前言
最近利用空闲时间开发了一个vscode插件，在开发过程中遇到了很多问题，反复查看了大量文档，故特此记录
项目搭建
为方便开发者开发，vscode官方为我们提供了一个脚手架模板，只需npm全局安装，执行命令即可
npm install -g yo generator-code
yo code
配置项根据自己的喜好选择，我这里开发语言选择的是typeScript。没有其他要求的话，一路回车，就可以完成项目搭建。
以下是插件项目的目录
重点关注两个文件 package.json 和 src/extension.ts，后续插件的布局显示，按钮显示及命令配置等都是在package.json 的 contributes 属性下，而插件的入口就是 extension.ts。activate 就是插件激活函数，deactivate就是插件关闭函数。
API介绍
这里主要介绍一些常用的Api
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脚本最好用外部引入的形式，因为内嵌可能会导致部分样式失效
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
// vscode 发送
const panel = vscode.window.createWebviewPanel()
panel.webview.postMessage({ })
//webview 接收
window.addEventListener('message', (event) => {
const data = event.data
console.log(data)
})
从webview 传输到 vscode
// webview 发送
const vscode = acquireVsCodeApi()
vscode.postMessage({})
// vscode 接收
const panel = vscode.window.createWebviewPanel()
panel.webview.onDidReceiveMessage(
async (message) => {
console.log(message)
},
null,
[]
)
打包
因为这个插件是内部使用的，故不考虑对外发布，只做本地打包安装，先安装打包工具 vsce
npm i vsce -g
然后去除 READ.md 的内容，自己编写解释
其次，将 package.json 里面的 devdependencies 改成 dependencies，不然打包之后，devdependencies 里面的包不会被打包进去，插件运行会报错。
开始打包
vsce package
如图，会生成一个 .vsix 的文件，期间可以会提示你完善 packahe.json的一些信息，不需要的话可以忽略
安装插件
将打包完成的插件路径复制过去，执行命令
code --install-extension E:\my-code\my-code-0.0.1.vsix
window系统的话在 C:/用户/用户/.vscode/extensions 下就能看到插件
而且在vscode的插件系统也能看到这个插件了
总结
以上是个人插件开发的总结，有很多细节没有顾及到，但是掌握了以上，至少就能对开发插件有进一步的认识
参考文档：
