Vscode插件开发过程记录(使用外部PDF浏览器打开pdf)

记录下自己从零做一个Vscode插件的过程。开发Vscode插件需要用的语言是typescript。

先给几点小建议:
写插件时可以找下功能类似的插件源代码(博主写到最后发现已经有类似的了，不过还是借鉴了不少)。
官方例程合集:
https://github.com/microsoft/vscode-extension-samples
可以看看官方文档的中文翻译，很详细了:
https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/get-started/extension-anatomy

环境配置

按教程安装Node.js和Git，再在命令行中运行’npm install -g yo generator-code’。

Hello World

在预项目位置运行’yo code’并按提示进行配置后得到一个可以开发的Vscode插件项目。

使用Vscode打开该项目，点击F5，在新窗口中按下’Ctrl+Shift+P’输入’Hello World’命令，能看到新窗口的右下角弹出Hello World弹窗。

修改

所生成的文件机构如下列所示

.
├── .vscode
│   ├── launch.json     // 插件加载和调试的配置
│   └── tasks.json      // 配置TypeScript编译任务
├── .gitignore          // 忽略构建输出和node_modules文件
├── README.md           // 提示文档
├── src
│   └── extension.ts    // 插件源代码
├── package.json        // 插件配置清单
├── tsconfig.json       // TypeScript配置

其实主要需要修改就是’extension.ts’文件(负责执行代码)和’package.json’文件(解释包里面的配置)。

package.json

activationEvents是触发事件，触发时运行main(默认为extension.ts文件)，可以触发的事件在contributes中均列举出来。

事件类型有以下这些，具体可以看官方文档，选择自己插件 的触发时间。当然也可以添加多个触发事件(或关系)。

onLanguage
onCommand
onDebug
onDebugInitialConfigurations
onDebugResolve
workspaceContains
onFileSystem
onView
onUri
onWebviewPanel
onCustomEditor
onAuthenticationRequest
onStartupFinished
*

博主想让插件在打开pdf时触发，所以触发方式选择了’onCustomEditor:external-pdf’。并在’contributes’中配置

"customEditors": [{
			"viewType": "external-pdf",//与onCustomEditor后保持一致
			"displayName": "External Pdf Preview",//编辑器所显示名字
			"selector": [{
				"filenamePattern": "*.pdf"//是何种文件的编辑器
			}]
		}]

这里需要按你选择的触发方式去修改。

如果你需要用到插件配置，需要添加configuration让用户进行修改。因为博主需要让用户选择外部编辑器位置，所以添加了一项插件配置。

"configuration": {
            "type": "object",
            "title": "external-pdf",//配置文件中显示名字，最好与插件名字相同
            "properties": {
				"external-pdf.command": {
					"type": "string",//配置项类型
					"default": "",//配置项默认值
					"markdownDescription": "The external command to open pdf."//配置项描述
				  }			  
			}
		}

此外如果需要用到其他依赖包就需要在’package’的’dependencies’及’devDependencies’中进行添加依赖。

extension.ts

主要为’activate’函数，这个函数在第一次激活插件后运行一次。

如果要每次触发时均运行需注册函数。

let disposable = vscode.window.registerXX("external-pdf");//根据触发类型决定函数名，引号内事件名需与'activationEvents'一致
context.subscriptions.push(disposable);

此外博主使用cross-spawn库进行命令行打开外部窗口，spawn函数第一项参数为命令，第二项参数为命令参数数组。

发布

命令行输入’npm install -g vsce’安装vsce。在package.json的version下面一行添加
"publisher": "x",，后面的双引号内需与下面的publisher名称一致。命令行运行’vsce package’打包代码(需要添加许可证)。

注册微软账号，再去https://dev.azure.com/vscode注册Azure组织，按图中点击获得个人令牌。

如果没有marketplace点show more scopes就好了

去https://marketplace.visualstudio.com/manage/createpublisher?managePageRedirect=true创建publisher(名称需与package.json中的publisher一致)，然后去https://marketplace.visualstudio.com/manage/publishers/ 选择Vscode插件上传自己vsce package打包完的插件进行发布。就可以静候佳音，等着插件在市场里出现。

之后进行插件更改的话只需要重新vsce package并发布即可。

以上就是本人开发Vscode插件过程。本人是前端小白，如有不对请各位大佬指正。

参考资料

1. https://github.com/corentinartaud/vscode-pdfpreview ↩
2. https://github.com/James-Yu/LaTeX-Workshop ↩
3. https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/get-started/extension-anatomy ↩
4. https://www.jianshu.com/p/e642856f6044 ↩
5. https://www.cnblogs.com/liuxianan/p/vscode-plugin-overview.html ↩