手把手教你开发自己的VSCode插件_编程技术

一、前言

在VSCode市场上搜索一个PDF阅读插件，找到了下载量最高的插件。在检查了插件的源代码之后，发现它直接嵌入了pdf.js的Web界面。

手把手教你开发自己的VSCode插件图片

开发这样的插件并不复杂，只需要一些插件开发的知识。

接下来，将在这里与大家分享这个插件是如何开发的。虽然与源代码可能有些许不同，但基本原理是相同的。

二、定义自定义编辑器

默认情况下，VSCode不直接支持查看某些特定类型的文件。但是，你可以通过使用自定义编辑器（customerEditors）来扩展其功能。

通过customerEditors，你可以创建完全可自定义的读/写编辑器，以替换VSCode的标准文本编辑器，用于处理特定类型的资源。

例如，在编辑Markdown文件时，可以创建一个自定义编辑器，从而实时预览Markdown的渲染效果。

对于PDF文件的预览，同样也可以使用customerEditors功能。

首先，在插件的pacakge.json文件中定义它：

"contributes": {
  "customEditors": [
    {
      "viewType": "dodo-reader.pdfEditor",
      "displayName": "PDF Viewer",
      "selector": [
        {
          "filenamePattern": "*.pdf"
        }
      ]
    }
  ]
}

三、注册自定义编辑器

创建一个实现vscode.CustomEditorProvider接口的类。该接口包含了用于管理自定义编辑器（例如打开和保存）的方法。例如：

class PdfEditorProvider implements Partial {
 constructor() {
 // 可在此处进行初始化操作
 }

resolveCustomEditor(document: CustomDocument, webviewPanel: WebviewPanel, _token: CancellationToken) {
 // 基于URI创建一个自定义文档，并返回一个自定义文档对象
 }
openCustomDocument(uri: vscode.Uri, openContext: vscode.CustomDocumentOpenContext, token: vscode.CancellationToken) {
 // 将自定义文档与Webview面板关联，并处理编辑器内容与Webview之间的交互
 }
}
 // 注册你的提供程序
const myProvider = new PdfEditorProvider();
const disposable = vscode.window.registerCustomEditorProvider('dodo-reader.pdfEditor', myProvider);
context.subscriptions.push(disposable);

四、改进视图提供程序

如上所述注册自定义编辑器之后，下一步就是加强PdfEditorProvider接口，以定义视图的显示方式。

显示涉及使用网络视图，而你将使用pdf.js的Web视图程序。首先，下载预构建的程序（现代浏览器），并将其提取到你的项目目录中。

手把手教你开发自己的VSCode插件图片

这个程序可以直接在浏览器中访问。在目录中启动一个服务，并打开地址：

你可以通过添加查询参数?file=fileUrl来打开PDF文件。

4.1 openCustomDocument

当打开PDF文件时，首先会调用openCustomDocument方法。你可以基于传入的URI创建一个自定义文档对象。该文档对象将包含你想要编辑的内容。在这个程序中，不进行任何处理，而是直接返回一个包含URI的对象，该对象将传递给resolveCustomEditor方法的document参数。

openCustomDocument(uri: vscode.Uri, openContext: vscode.CustomDocumentOpenContext, token: vscode.CancellationToken) {
 return {
   uri,
   dispose: () => { }
 };
}

4.2 resolveCustomEditor

在resolveCustomEditor方法中，可以定义要显示的视图，程序如下。

resolveCustomEditor(document: CustomDocument, webviewPanel: WebviewPanel, _token: CancellationToken) {
   webviewPanel.webview.html = 'Hello World!';
}

要显示PDF文件，只需将下载的PDF程序的HTML内容替换为当前的webviewPanel.webview.html值。最初认为可以更改为：

// 嵌入一个iframe以查看PDF
webviewPanel.webview.html = `
  
  
   
     
   
   
     
   
  
`

这个方法是最简单的，但令人意外的是，iframe没有显示内容。这可能是由于VSCode的安全策略限制造成的。

因此，在这里考虑了另一种方法：读取PDF视图主页的HTML内容，并将其赋值给webviewPanel.webview.html。

然而，这种方法可能会遇到一个问题：如何向PDF视图程序提供文件链接。

如前所述，PDF视图程序将通过查询参数“file.”获取文件链接。如果没有提供此参数，程序将读取默认链接。以下是一个相关的源代码示例：

file = params.get("file") ?? _app_options.AppOptions.get("defaultUrl");

然而，直接赋值HTML文本不能通过URL提供“file”的值。这可能需要修改源代码。尽管修改源代码可能会带来一些不便，但一开始似乎也没有其他办法，所以不得不尝试一下。一种方法是改变获取“file”值的方式，直接从全局变量中获取。可以使用如下方法在HTML内容中添加“file”值：

window.file = 'https://...'

然后将上述源代码修改为：

file = window.file ?? _app_options.AppOptions.get("defaultUrl");

然而，就在我以为成功即将到来的时候，出现了一个红色错误：“加载PDF时出现错误。文件来源与阅览器不匹配”。

经过进一步调查，在相应的源代码中发现了一个“fileinputchange”事件监听处理程序，如下所示：

var webViewerFileInputChange = function (evt) {
 if (PDFViewerApplication.pdfViewer?.isInPresentationMode) {
   return;
 }
 const file = evt.fileInput.files[0];
 PDFViewerApplication.open({
   url: URL.createObjectURL(file),
   originalUrl: file.name
 });
};

从代码中很容易看出，一旦检测到文件发生更改，就会立即调用open方法打开文件。重要的是要注意，该open方法并不验证URL是否与当前源相匹配。目前，它使用了一个blob链接。在这种情况下，我们是否可以在初始化后直接调用open方法来打开文件呢？经过一些改造，最终证明是可行的。以下是修改后的代码示例：

resolveCustomEditor(document: CustomDocument, webviewPanel: WebviewPanel, _token: CancellationToken) {
   webviewPanel.webview.options = {
     enableScripts: true,
     localResourceRoots: [vscode.Uri.file(path.dirname(document.uri.fsPath)), this.context.extensionUri]
  };
   const base = vscode.Uri.joinPath(this.context.extensionUri, 'dist/web/pdf/web/')
   webviewPanel.webview.html = readFileSync(path.join(base.fsPath, 'viewer.html'), 'utf8').replace('', `
   
   
   
 `)
}

对上面的关键代码进行分析：

localResourceRoots参数：该参数的目的是定义可以通过Web URL访问的目录。在这里，需要明确定义两个目录：一个用于打开PDF文件的当前目录，另一个用于插件所在的目录。确保两者都正确定义，否则可能在访问时遇到401错误。
tag：通过设置tag，可以为网页内部加载资源提供基本路径。确保资源能够正确加载。
setTimeout函数：在调用程序打开文件时使用setTimeout的目的是在打开默认PDF文件后再打开所需的PDF文件。这样可以防止后面执行打开默认PDF的操作覆盖想要打开的PDF（尽管实际上会出现默认文件错误，但不会产生实质性影响）。

与之前提到的PDF插件实现相比，这种实现要简单得多，但原理基本相同。

原文地址：https://mp.weixin.qq.com/s/d6TDRfDPm7z_xBi73LYBvg