实现一个自己的vscode插件到发布

前言

本篇文章讲述了一个 vscode 插件开发的过程，希望能帮助到想了解 vscode 插件是如何开发的同学

文章最后又github地址

说在前面的话：

在看内容之前，确保你想了解如何开发一款 vscode 插件
内容以大白文教学形式输出，如果写的不清晰的地方，欢迎留言告诉我，这会帮助我理解到各位的痛点
看一万遍不如自己写一遍
学会这个思路，可以尝试去给开源的 UI 组件写提示插件，做出一些开源贡献
以上看完之后，请带着思考去看下面内容

一、为什么要做这个 vscode 插件🤔

为我们公司自己而用

在之前，我问到我们 UI设计师 老师，

我：能给我一些我们的颜色的设计资源吗？

UI: 可以呀

然后就给了我一些主题色，辅色，然后线条色等等。

OK，当我拿到之后，对于颜色我们前端创建了一个 vars.scss 的文件夹，用于定义一些变量，大致是这样：

css 复制代码

:root {
    --tsl-doc-white: #fff;
    // 文字色
    --tsl-doc-gray-1: #e2e5e8;
    --tsl-doc-gray-2: #d2d5d8;
    --tsl-doc-gray-3: #b6babf;
    --tsl-doc-gray-4: #afb2b7;
    --tsl-doc-gray-5: #999b9f;
    --tsl-doc-gray-6: #66686c;
    --tsl-doc-gray-7: #3c3d3f;
}

使用 color: var(--tsl-doc-white) ，就达到目的，其实就是 css 变量，没什么的，当我们做完一系列之后，发现有个痛点~~

妈的（骂骂咧咧），这个颜色我起的名字是什么，笑死🤣，根本记不住，然后就导致了开发人员是一种什么情况，一边看变量文件一边写，我寻思，还不如直接写颜色来的快这样。

所以啊，所以，我在思考之后，我就想起，我一直在下一些提示插件，那么别人是如何实现的？

突然，我是不是也可以做一个，这样我们就可以避免这种问题了。于是就开始了我的插件开发之路。

二、如何实现一个 vscode 插件🖥️

2.1 一些或许有点用的文档资源

【vscode 官方文档】：Your First Extension | Visual Studio Code Extension API

【VS Code插件创作中文开发文档】: 你的第一个插件 - VS Code插件创作中文开发文档

2.2 需要提前准备的环境

Node环境: 大于16，主要使用 npm

安装一些脚手架(给我装就完了)：

js 复制代码

npm install -g yo generator-code

执行命令 yo code ，过一会儿就会看到下面这段话

js 复制代码

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Enable stricter TypeScript checking in 'tsconfig.json'? Yes
# ? Setup linting using 'tslint'? Yes
# ? Initialize a git repository? Yes
# ? Which package manager to use? npm

code ./helloworld

细节的一些可以看官方，有视频，😏，当你已经能成功输出 Hello World 然后，在回来看我这里

2.3 分析需求

明确知道自己要做什么：

输入我们指定的 tsl、--tsl 这些是不是要出现提示呀，告知我们可以选择哪些
鼠标放到 --tsl-doc-white 显式出对应的变量，不要觉得自己能记住了

就两个效果，明白之后我们就开始进行配置和 Coding

2.4 实现 variable-prompt

配置

主要还是 package.json 进行配置，先看我的这份：

json 复制代码

{
  "name": "variable-prompt",
  "displayName": "variable-prompt",
  "icon": "src/assets/tsl-logo.png", # 插件的图标就是这里来的
  "description": "css variable prompt",# 描述插件的用途
  "version": "1.0.0",
  "publisher": "sakanaovo",
  "engines": {
    "vscode": "^1.56.0" # 这里要和 types/vscode 同步一下
  },
  "categories": [
    "Other"
  ],
  "main": "./extension.js",
  "contributes": {},
   # activationEvents 激活事件，这里配置了以下这些文件激活
  "activationEvents": [
    "onLanguage:vue",
    "onLanguage:javascript",
    "onLanguage:typescript",
    "onLanguage:javascriptreact",
    "onLanguage:typescriptreact",
    "onLanguage:scss",
    "onLanguage:css",
    "onLanguage:less"
  ],
  "scripts": {
    "lint": "eslint .",
    "pretest": "npm run lint",
    "build": "vsce package", # 打包命令
    "test": "node ./test/runTest.js"
  },
  "devDependencies": {
    "@types/vscode": "^1.56.0",
    "@types/glob": "^8.1.0",
    "@types/mocha": "^10.0.1",
    "@types/node": "20.2.5",
    "eslint": "^8.41.0",
    "vsce": "^2.13.0", # 打包 后面会介绍
    "glob": "^8.1.0",
    "mocha": "^10.2.0",
    "typescript": "^5.1.3",
    "@vscode/test-electron": "^2.3.2"
  }
}

这里看完了教帮助大家记忆训练

window高玩： Ctrl + C 、Ctrl + V

mac高玩： Cmd + C 、Cmd + V

编码

创建 src/helper.js 和 src/variableMap.js
清空根目录 extension.js 代码
js 复制代码
```
function activate(context) {
  console.log("启动成功");

}

// This method is called when your extension is deactivated
function deactivate() {}

module.exports = {
  activate,
  deactivate,
};
```
按下 F5 ，就可以启动容器，好的，那我们是不是想看这个 console 日志在哪儿，有两种
- 第一种，在你开发插件vscode中查看调试控制台，一般在vscode左侧，找不到或者就 Ctrl+Shift+Y 就可以看是否打印
- 第二种，在你启动的容器中，按 Ctrl+Shift+I ，也可以打开一个控制台，并查看你的日志信息，这是因为 vscode 是用 Electron 开发的，Electron 也是这样查看调试

实现 Hover 效果

在 src/helper.js 中我们简单实现鼠标放上去就显式悬停效果

js 复制代码

const vscode = require("vscode");

function provideHover(document, position, token) {
  // 获取鼠标位置的单词
  const word = document.getText(document.getWordRangeAtPosition(position));

  // 创建悬停内容
  const hoverText = `这是一个悬停示例，你鼠标放上去的单词是：${word}`;
  const hover = new vscode.Hover(hoverText);

  return hover;
}

module.exports = {
  provideHover
};

在 src/extension.js 中我们注入一下

js 复制代码

const vscode = require("vscode");
const { provideHover } = require("./src/helper.js");
// 添加一些文件类型
const files = [
  "javascript",
  "typescript",
  "javascriptreact",
  "typescriptreact",
  "vue",
  "scss",
  "less",
  "css",
  "sass",
];

function activate(context) {
  console.log("启动成功");

  context.subscriptions.push(
    vscode.languages.registerHoverProvider(files, {
      provideHover,
    })
  );
}

然后 F5 ，如果你已经启动过会有这个小标记，如下图：

那我们点击一下框住的这个刷新按钮，然后在容器中调试一下，随便写下一段代码，下图是一个展示效果：

OK，到这里，我们就实现了悬停了效果

把 variableMap.js 完善一下映射规则

大致如下：

js 复制代码

// 这个文件是 变量映射表 --tsl-color:#fa8c16
const variableMap = {
  // 用于存放变量的映射关系
  "--tsl-primary-color": "#33c88e",
  "--tsl-doc-white": "#ffffff",
  "--tsl-doc-gray-1": "#e2e5e8",
  "--tsl-doc-gray-2": "#d2d5d8",
  "--tsl-doc-gray-3": "#b6babf",
  "--tsl-doc-gray-4": "#afb2b7",
  "--tsl-doc-gray-5": "#999b9f",
  "--tsl-doc-gray-6": "#66686c",
  "--tsl-doc-gray-7": "#3c3d3f",
  "--tsl-bg-gray-1": "#f2f4f4",
  "--tsl-warn-color": "#ff6813",
  "--tsl-accent-color": "#f9ba41",
  "--tsl-disabled-color-1": "#edfff8",
  "--tsl-disabled-color-2": "#b4e7d2",
  "--tsl-disabled-color-3": "#9eedcc",
};

module.exports = variableMap;

非常简单，就是把我们的定义的一些，在这里写好就行

根据 variableMap.js 实现触发提示

在 src/helper.js 中我们实现 provideCompletionItems

js 复制代码

const VARIABLE_RE = /--tsl(?:[\w-]+)?/;

function provideCompletionItems(document, position) {
  const lineText = document.lineAt(position.line).text;

  const match = lineText.match(VARIABLE_RE);
  if (
    lineText.includes("tsl") ||
    match ||
    lineText.includes("--tsl") ||
    lineText.includes("t")
  ) {
    // 拿到 variableMap 中的所有变量
    const variables = Object.keys(variableMap);
    const completionItems = variables.map((variable) => {
      const item = new vscode.CompletionItem(variable);
      const color = variableMap[variable];
      item.detail = color;
      // 给detail 添加注释
      const formattedDetail = `这是一个颜色变量，值为 ${color}`;
      // 创建一个 MarkdownString
      const markdownString = new vscode.MarkdownString();
      // 添加普通文本和代码块
      markdownString.appendText(formattedDetail);
      // 将注释转换为 markdown 格式
      item.documentation = markdownString;
      item.kind = vscode.CompletionItemKind.Variable;
      return item;
    });
    return completionItems;
  }
  return [];
}

module.exports = {
  provideHover,
  provideCompletionItems,
};

在 src/extension.js 中我们注入一下

js 复制代码

const { provideHover, provideCompletionItems } = require("./src/helper.js");

function activate(context) {
  console.log("启动成功");

  context.subscriptions.push(
    vscode.languages.registerHoverProvider(files, {
      provideHover,
    })
  );
  // 注入的提示
  context.subscriptions.push(
    vscode.languages.registerCompletionItemProvider(files, {
      provideCompletionItems,
    })
  );
}

刷新，和上面操作一样，然后我们输入 tsl 就会出现这样的一个效果，如下图：

为了让能有点颜色看看我们需要小小的改造一下下，在 provideCompletionItems 中，把 kind 设置为 Color ，修改成这样：

item.kind = vscode.CompletionItemKind.Color ，然后我们刷新启动看看效果：

这样我们就实现了带颜色提示

改造我们的 Hover 效果

在 src/helper.js 中我们把 provideHover 改成这样：

js 复制代码

function provideHover(document, position) {
  const lineText = document.lineAt(position.line).text;
  const regex = /--[\w-]+/g;
  const match = lineText.match(regex);
  const word = match[0];
  if (match.length > 0 && word.includes("--tsl")) {
    const completeVariable = match.find((variable) => variable.includes(word));
    const hoverText = variableMap[completeVariable];
    if (hoverText) {
      return new vscode.Hover(hoverText);
    }
  }
}

最终效果就是我们鼠标放在对应的变量上会告诉我们对应的16进制值是什么，效果如下：