web

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

前言

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

文章最后又github地址

说在前面的话：

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

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

为我们公司自己而用

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

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

UI: 可以呀

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

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

: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

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

npm install -g yo generator-code

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

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press  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 进行配置，先看我的这份：

{
"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 代码
```
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 中我们简单实现鼠标放上去就显式悬停效果

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 中我们注入一下

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 完善一下映射规则

大致如下：

// 这个文件是 变量映射表 --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

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 中我们注入一下

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 改成这样：

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进制值是什么，效果如下：

好了，到这里，我们就已经完全实现了，我们可以运行 npm run build 然后选择 y 就可以生成一个 variable-prompt-1.0.0.vsix 文件

三、如何发布🎉

我只教你手动上传，因为我也是手动上传，自动挡还没学会。

访问这个： Manage Extensions | Visual Studio Marketplace 去掉地址最后的 sakanaovo 然后输入你自己的 publisher

选择这个 vscode 插件

然后 variable-prompt-1.0.0.vsix 文件拖进去完毕

当然，如果你不想发布你可以选择在拓展中通过下图这种方式安装：

四、结语💯

好久没有写文章了，上次写文章还是在上次。本章，我们通过简短的代码，实现了css变量提示vscode插件，希望能帮助到各位。

看完打开电脑，打开vscode，点开笔者文章链接，写下你的第一个Hello World 插件吧！先写5分钟

作者：sakana
来源：juejin.cn/post/7263305276397355063

0

2023-11-27

0 个评论

要回复文章请先登录或注册