记录一下我学习开发VS Code插件的过程,实现一个能自动补全颜色代码的插件。
参考文档
官方文档:Extension API | Visual Studio Code ExtensionAPI
官方提供的各类插件示例:GitHub - microsoft/vscode-extension-samples: Sample code illustrating the VS Code extension API.
插件需求
我在写css样式时,经常会遇到不知道该用什么颜色的情况,所以我想要是能有个语义化的颜色插件就好了,只要我输入# + 颜色
,就能以代码提示的方式,将对应的颜色列出来供我选择。
我在VS Code插件市场搜了一圈,没找到类似的,于是决定自己写一个。
最终效果:
获取颜色
访问这个网址,按F12打开浏览器控制台,输入colorsArray,就能获取所有颜色的rgb、hex等值。
安装环境
npm i -g yo generator-code
我个人在这里遇到个问题,不管我使用npm、yarn还是pnpm,在cmd下总是安装失败,最终在powershell下才安装成功。
Windows任意目录下,按住shift键然后右键,可以看到打开powershell的选项。
或者:在任意目录的地址栏输入powershell,然后回车,也可以打开powershell。
新建项目
yo code
我的各项配置如上图所示。
Hello World
初始项目中有个Hello World,用VS Code打开项目,然后按F5(或者点击“运行-->启动调试”)可以开启调试窗口。
然后在调试窗口下 Ctrl + Shift + P (或者点击“设置-->命令面板”),输入并选择 Hello World 命令,就会在编辑器右下角弹出一个消息提示。
extension.ts
是插件的入口文件:
import * as vscode from 'vscode';
// activate方法会在插件被激活时调用
export function activate(context: vscode.ExtensionContext) {
// 注册命令,第一个参数是命令名称,第二参数是回调
let disposable = vscode.commands.registerCommand('chinese-colors.helloWorld', () => {
// 弹出消息提示
vscode.window.showInformationMessage('Hello World from Chinese Colors!');
});
// 添加到右键菜单
context.subscriptions.push(disposable);
}
// deactivate方法会在插件失活时调用
export function deactivate() {}
package.json
查看package.json
,其中比较重要的两项:
{
"activationEvents": [
"onCommand:chinese-colors.helloWorld"
],
"contributes": {
"commands": [
{
"command": "chinese-colors.helloWorld",
"title": "Hello World"
}
]
},
}
activationEvents是插件的激活配置,它是一个数组,每一项对应一个激活插件的条件,格式为“<类型>:<名称>”,onCommand是调用命令(也就是上面的输入Hello World)。
contributes:一般翻译为贡献点(这个词有点费解),配置了一个“chinese-colors.helloWorld”,与activationEvents配置项对应。
其他packege.json配置见下表:
名称 | 必要 | 类型 | 说明 |
---|