VSCODE插件开发API
vscode插件开发功能很强大，但是网上的资料很少，整理下自己使用的插件接口。
安装
npm install -g yo generator-code
yo code
tips:
提示’yo’ 不是内部或外部命令，也不是可运行的程序或批处理文件。
需要新增node的环境变量：C:\Users\用户\AppData\Roaming\npm
成功之后会有模板创建的一系列问题：
? What type of extension do you want to create(您想要创建什么类型的扩展?)?
New Extension (JavaScript) New Extension (TypeScript)
新扩展名（TypeScript） New Extension (JavaScript)
新扩展（JavaScript） New Color Theme
新颜色主题 New Language Support
新语言支持 New Code Snippets
新代码段 New Keymap
新密钥映射 New Extension Pack
新扩展包 New Language Pack (Localization)
新语言包（本地化）
? What’s the name of your extension(你的是项目名什么，在应用市场的名字）？ demo
? What’s the identifier of your extension（你的插件名是什么）? demo
? What’s the description of your extension（扩展的描述）
? learn vscode plugin
? Enable JavaScript type checking in ‘jsconfig.json’（在’jsconfig.json’中启用JavaScript类型检查）? Yes
? Initialize a git repository（初始化一个git仓库）? Yes
? bundel the source code with webpack (是否用webpack打包源码)？ Yes
? Which package manager to use（使用哪个包管理器）? yarn
调试
在代码区 F5 打开 扩展开发宿主 ，可以在宿主环境里面调试插件效果（涉及到webview， 在宿主环境ctr+shift+P搜索webview，选择打开开发人员工具）
如果代码有更新，在宿主区ctrl+R更新挂载
发布
方法一：直接把文件夹发给别人，让别人找到vscode的插件存放目录并放进去，然后重启vscode，一般不推荐；
方法二：打包成vsix插件，然后发送给别人安装，如果你的插件涉及机密不方便发布到应用市场，可以尝试采用这种方式；
方法三：注册开发者账号，发布到官网应用市场，这个发布和npm一样是不需要审核的。
本地打包 指令
npm i @vscode/vsce -D
vsce package
根据编辑命令会生成 displayName + version + .vsiv 的插件
周期函数
├── CHANGELOG.md 插件变更记录
├── README.md
├── extension.js 插件入口main文件
├── jsconfig.json 编辑器关于js的配置
├── package.json 全局配置
├── test 测试代码文件夹
│ ├── extension.test.js
│ └── index.js
├── vsc-extension-quickstart.md
└── yarn.lock
插件默认入口文件为：extension.js
入口文件主要声明两个周期
- activate：插件被激活时执行的方法
- deactivate：插件被销毁时调用的方法
package.json
{
// 插件的名字，应全部小写，不能有空格
"name": "vscode-plugin-demo",
// 插件的友好显示名称，用于显示在应用市场，支持中文
"displayName": "VSCode插件demo",
// 描述
"description": "VSCode插件demo集锦",
// 关键字，用于应用市场搜索
"keywords": ["vscode", "plugin", "demo"],
// 版本号
"version": "1.0.0",
// 发布者，如果要发布到应用市场的话，这个名字必须与发布者一致
"publisher": "sxei",
// 表示插件最低支持的vscode版本
"engines": {
"vscode": "^1.27.0"
},
// 插件应用市场分类，可选值： [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs]
"categories": [
"Other"
],
// 插件图标，至少128x128像素
"icon": "images/icon.png",
// 扩展的激活事件数组，可以被哪些事件激活扩展，后文有详细介绍
"activationEvents": [
"onCommand:extension.sayHello"
],
// 插件的主入口
"main": "./src/extension",
// 贡献点，整个插件最重要最多的配置项
"contributes": {
// 插件配置项
"configuration": {},
// 命令
"commands": [
{
"command": "extension.sayHello",
"title": "Hello World"
}
],
// 快捷键绑定
"keybindings": [
{
"command": "extension.sayHello",
"key": "ctrl+f10",
"mac": "cmd+f10",
"when": "editorTextFocus"
}
],
// 菜单
"menus": {
// 编辑器右键菜单
"editor/context": [
{
// 表示只有编辑器具有焦点时才会在菜单中出现
"when": "editorFocus",
"command": "extension.sayHello",
// navigation是一个永远置顶的分组，后面的@6是人工进行组内排序
"group": "navigation@6"
},
{
"when": "editorFocus",
"command": "extension.demo.getCurrentFilePath",
"group": "navigation@5"
},
{
// 只有编辑器具有焦点，并且打开的是JS文件才会出现
"when": "editorFocus && resourceLangId == javascript",
"command": "extension.demo.testMenuShow",
"group": "z_commands"
},
{
"command": "extension.demo.openWebview",
"group": "navigation"
}
],
// 编辑器右上角图标，不配置图片就显示文字
"editor/title": [
{
"when": "editorFocus && resourceLangId == javascript",
"command": "extension.demo.testMenuShow",
"group": "navigation"
}
],
// 编辑器标题右键菜单
"editor/title/context": [
{
"when": "resourceLangId == javascript",
"command": "extension.demo.testMenuShow",
"group": "navigation"
}
],
// 资源管理器右键菜单
"explorer/context": [
{
"command": "extension.demo.getCurrentFilePath",
"group": "navigation"
},
{
"command": "extension.demo.openWebview",
"group": "navigation"
}
]
},
// 代码片段
"snippets": [
{
"language": "javascript",
"path": "./snippets/javascript.json"
},
{
"language": "html",
"path": "./snippets/html.json"
}
],
// 自定义新的activitybar图标，也就是左侧侧边栏大的图标
"viewsContainers": {
"activitybar": [
{
"id": "beautifulGirl",
"title": "美女",
"icon": "images/beautifulGirl.svg"
}
]
},
// 自定义侧边栏内view的实现
"views": {
// 和 viewsContainers 的id对应
"beautifulGirl": [
{
"id": "beautifulGirl1",
"name": "国内美女"
},
{
"id": "beautifulGirl2",
"name": "国外美女"
},
{
"id": "beautifulGirl3",
"name": "人妖"
}
]
},
// 图标主题
"iconThemes": [
{
"id": "testIconTheme",
"label": "测试图标主题",
"path": "./theme/icon-theme.json"
}
]
},
// 同 npm scripts
"scripts": {
"postinstall": "node ./node_modules/vscode/bin/install",
"test": "node ./node_modules/vscode/bin/test"
},
// 开发依赖
"devDependencies": {
"typescript": "^2.6.1",
"vscode": "^1.1.6",
"eslint": "^4.11.0",
"@types/node": "^7.0.43",
"@types/mocha": "^2.2.42"
},
}
常用API
-
指令
vscode.commands.registerCommand(指令名称, function () {})
需要在package.json里面注册下"activationEvents": [ "onCommand: 指令名称" ], "contributes": { "commands": [ { "command": 指令名称, "title": 查找出来的指令名称 } ], } -
提示语
vscode.window.showInformationMessage(提示语);
-----------------vscode右下角的一些提示弹窗 -
弹窗选择
vscode.window.showQuickPick([下拉内容]).then(() => {})
ctrl+P的效果，会有下拉内容，可以选择
vscode.window.showInputBox({}).then(()=>{})
输入框 -
得到光标选中的词汇
const editor = vscode.window.activeTextEditor;
if(editor===undefined){return;};
const text = editor.document.getText(editor.selection); // 拿到选中的单词
- 替换光标选中内容
editor.edit((editBuilder) => {
const range = new vscode.Range(editor.selection.start, editor.selection.end);
editBuilder.replace(range, item.description)
});
- 鼠标悬停
注册事件，package.json里面也得写
vscode.languages.registerHoverProvider('需要支持该功能的文件格式，比如javascript', 悬停后执行的方法)
new vscode.Hover(悬停显示的内容);
- 创建webview
const panel = vscode.window.createWebviewPanel(
'testWebview', // viewType
`appwiki: 视图标题,
vscode.ViewColumn.Two, // 显示在编辑器的哪个部位
{
enableScripts: true, // 启用JS，默认禁用
retainContextWhenHidden: true, // webview被隐藏时保持状态，避免被重置
}
);
panel.webview.html = 需要展示的html内容;
// 因为webviewpanel在js里面不能直接处理，所以需要通知panel处理，通过vscode.postMessage(message)传递消息
panel.webview.onDidReceiveMessage(message => {
得到消息处理message
});