vscode插件开发总结

前言

最近利用空闲时间开发了一个vscode插件，在开发过程中遇到了很多问题，反复查看了大量文档，故特此记录

项目搭建

为方便开发者开发，vscode官方为我们提供了一个脚手架模板，只需npm全局安装，执行命令即可

css 复制代码

npm install -g yo generator-code
yo code

配置项根据自己的喜好选择，我这里开发语言选择的是typeScript。没有其他要求的话，一路回车，就可以完成项目搭建。

以下是插件项目的目录

重点关注两个文件 package.json 和 src/extension.ts，后续插件的布局显示，按钮显示及命令配置等都是在package.json 的 contributes 属性下，而插件的入口就是 extension.ts。activate 就是插件激活函数，deactivate就是插件关闭函数。

API介绍

这里主要介绍一些常用的Api

dart 复制代码

vscode.commands.registerCommand('',()=>{})：为插件注册执行命令，接受一个字符串为命令名和一个回调函数

vscode.window.createTreeView('',{ 'treeDataProvider':{} })： 创建一个左边菜单树形结构的视图,另一个参数必须包含 treeDataProvider 属性

vscode.workspace.workspaceFolders：获取当前工作区的文件夹目录

vscode.window.createWebviewPanel(id, title, column, options)：创建一个新的视图面板，即webview，是类似浏览器一样的视图，这里面的内容是用HTML+CSS+JS来实现的。

vscode.window.showErrorMessage('')：右下角弹窗提示框

vscode.window.createInputBox(): 顶部弹出的输入框

context.globalState.get('')：存储本地数据的方法

context.globalState.update('')：获取本地数据。通过globalState操作的数据是永久存储在本地的，除非用 update 将其设置成 undefined 这个数据才会被清除

context.subscriptions.push()：将命令函数添加到插件上

以上的 context 是从 activate 激活函数的回调参数上传下来的

其他API及具体方法参数详见官方API地址

开发事项

首先，要在 package.json 的 contributes 下的 commands 属性配置一个命令，

command 用于 vscode.commands.registerCommand 注册使用，title 用于在vscode 搜索使用。按F5 可进入调试模式，在弹出的调试窗口里面按 ctrl + shift + P，输入 Hello World 即可看到相应的命令，选择回车就回看到提示框。

vscode 的插件函数大部分都是以类的模式来编写的，所以在拆分模块上也应该要以类的形式导出。

contributes

contributes，上面介绍过这是配置vscode 插件命令，按钮显示，菜单显示的属性，以下是vscode的分区图

contributes 包含以下属性

复制代码

commands：配置命令

viewsContainers：用于侧边栏显示的按钮图标

views：treeView 显示的标题名称

menus：treeView 模块上面的按钮，用于单独操作每个模块

webview

webview的内容是用HTML+CSS来实现的，页面挂载很简单，直接赋值在html属性上，但是由于赋值的是字符串形式的值，所以要求html的内容要完整,所有样式表和script脚本最好用外部引入的形式，因为内嵌可能会导致部分样式失效

xml 复制代码

const panel = vscode.window.createWebviewPanel()

panel.webview.html = getHtml()

const getHtml = () => {
    return `<!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <link href=" " rel="stylesheet">
		    <title>Document</title>
                     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		</head>
			<body></body>
		</html>`
}

如果你想编写 vue 或者 react 的形式也是可以的，但就是必须用script脚本引入的方式，另写一个script脚本生成Vue 对象或者 React 对象。

通信

从vscode 传到 webview 使用的是 postMessage

javascript 复制代码

// vscode 发送
const panel = vscode.window.createWebviewPanel()
panel.webview.postMessage({ })

//webview 接收
window.addEventListener('message', (event) => {
    const data = event.data
    console.log(data)
})

从webview 传输到 vscode

scss 复制代码

// webview 发送
const vscode = acquireVsCodeApi()
vscode.postMessage({})


// vscode 接收
const panel = vscode.window.createWebviewPanel()
panel.webview.onDidReceiveMessage(
  async (message) => {
   console.log(message)
  },
  null,
  []
)

打包

因为这个插件是内部使用的，故不考虑对外发布，只做本地打包安装，先安装打包工具 vsce

css 复制代码

npm i vsce -g

然后去除 READ.md 的内容，自己编写解释

其次，将 package.json 里面的 devdependencies 改成 dependencies，不然打包之后，devdependencies 里面的包不会被打包进去，插件运行会报错。

开始打包

go 复制代码

vsce package

如图，会生成一个 .vsix 的文件，期间可以会提示你完善 packahe.json的一些信息，不需要的话可以忽略

安装插件将打包完成的插件路径复制过去，执行命令

css 复制代码

code --install-extension E:\my-code\my-code-0.0.1.vsix

window系统的话在 C:/用户/用户/.vscode/extensions 下就能看到插件

而且在vscode的插件系统也能看到这个插件了

总结

以上是个人插件开发的总结，有很多细节没有顾及到，但是掌握了以上，至少就能对开发插件有进一步的认识

参考文档：