记录VS Code插件开发过程——补全颜色代码的插件。

记录一下我学习开发VS Code插件的过程，实现一个能自动补全颜色代码的插件。

参考文档

官方文档：Extension API | Visual Studio Code ExtensionAPI

官方提供的各类插件示例：GitHub - microsoft/vscode-extension-samples: Sample code illustrating the VS Code extension API.

插件需求

我在写css样式时，经常会遇到不知道该用什么颜色的情况，所以我想要是能有个语义化的颜色插件就好了，只要我输入# + 颜色，就能以代码提示的方式，将对应的颜色列出来供我选择。

我在VS Code插件市场搜了一圈，没找到类似的，于是决定自己写一个。

最终效果：

 获取颜色

中国色：zhongguose － 传统颜色

访问这个网址，按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配置见下表：

名称	必要	类型	说明