概要
相信大家对vscode都很熟悉，也当然会使用里面的各种插件来提高工作效率，这里介绍个工具开发vscode插件，如果能开发自己想要的插件，可以进一步提高工作效率。由于VSCode 是基于 Electron 构建的，并且有web view
工具准备
-
利用大厂提供的工具，安装Yeoman和VS Code Extension Generator可以快捷开发插件，npm install -g yo generator-code
-
进入到合适的文件夹运行yo code 准备好进行开发的TypeScript或JavaScript项目（尽量选择ts项目） 填写项目信息并选择项目结构（类似cli脚手架） 用VSCode打开你的项目 然后，在编辑器中按F5，会打开一个运行此插件的新编辑器窗口。 在新窗口中在命令面板（⇧⌘P）运行命令：Hello World，会发现底部多出了一个消息提示。
-
生成的项目目录结构中最主要的是两个文件，package.json和 extension.ts文件， package.json文件管理着整个项目,大量属性需要我们手动配置，以下简单说明说明
{
// 插件项目名
"name": "firstextension",
// 显示在应用市场的插件名，支持中文
"displayName": "FirstExtension插件教程",
// 插件描述
"description": "a tutorial for extension",
// 版本号
"version": "0.0.1",
// 表示插件最低支持的vscode版本
"engines": {
"vscode": "^1.50.0"
},
// 插件应用市场分类
"categories": [
"Other"
],
// 插件图标，至少128x128像素（可选配）
// "icon": "images/icon.png",
// 插件的被动激活事件，可配*来保持在后台持续运行
"activationEvents": [
"onCommand:firstExt.hello"
],
// 插件的主入口文件
"main": "./out/extension.js",
// 贡献点，整个插件最重要最多的配置项
"contributes": {
// 命令
"commands": [
{
"command": "firstExt.hello",
"title": "Hello World"
}
],
// 快捷键绑定，分为mac和win操作系统；when是触发的先决条件，可不配；
"keybindings": [
{
"command": "firstExt.hello",
"key": "ctrl+w",
"mac": "cmd+shift+w",
"when": "editorTextFocus"
}
],
// ---- 下面配置在后面小说案例中说明
// 菜单
"menus": {
// 编辑器鼠标右键菜单
"editor/context": [],
// 编辑器右上角图标，不配置图片就显示文字
"editor/title": [],
// 编辑器标题右键菜单
"editor/title/context": [],
// 资源管理器右键菜单
"explorer/context": []
},
// 自定义新的activitybar图标，也就是最左侧 图标栏
"viewsContainers": {},
// 自定义左侧侧边栏内view树的实现
"views": {},
// 插件自定义设置项，由用户配置后传参进入代码逻辑里，暂不展示
"configuration": {},
}
}
运行说明
配置中的activationEvents使用onCommand来激活插件，这样该命令可以被快捷键等执行，从而激活插件逻辑，而调用命令的逻辑就写在嗯extension.ts中,主要修改activate函数，可以在这里直接调用vscode提供的api地址
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
// Use the console to output diagnostic information (console.log) and errors (console.error)
// This line of code will only be executed once when your extension is activated
console.log('Congratulations, your extension "wupemg" is now active!');
// The command has been defined in the package.json file
// Now provide the implementation of the command with registerCommand
// The commandId parameter must match the command field in package.json
let disposable = vscode.commands.registerCommand('wupemg.helloWorld', () => {
// The code you place here will be executed every time your command is executed
// Display a message box to the user
vscode.window.showWarningMessage('你好，吴鹏!,要不要去度娘一下？', {modal: false},'yes', 'no').then((res)=>{
if(res === 'yes'){
vscode.env.openExternal(vscode.Uri.parse('https://www.baidu.com'));
}else{
console.log('no');
}
});
});
context.subscriptions.push(disposable);
}
// this method is called when your extension is deactivated
export function deactivate() {}
开始调试插件， 此时按F5,会打开一个运行此插件的新编辑器窗口，在新窗口中在命令面板（⇧⌘P）运行命令：Hello World，会发现底部多出了一个消息提示，也就是会执行我在activate函数的逻辑，调用vscode的一个确认弹窗。这就是编写插件的方式。
打包发布
-
可以简单编写一个一键删除所有console的插件，然后进行打包发布，使用vsce，全局安装 vsce npm install vsce -g ; 在插件目录下运行 vsce package打包 完成后多出一个.vsix的文件，打包成功，不需要发布到市场的话，可以直接在本地使用这个插件（把.vsix的文件拖拽到VSCode左边栏即可安装）
-
发布到应用市场，需要提前注册账号，并保存好token，请查看官方文档 code.visualstudio.com/api/working…
在你当前插件目录下执行 vsce publish
按照要求输入名字和token就行啦！
