实现一个自己的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 <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 进行配置，先看我的这份：
{
"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也是这样查看调试
- 第一种，在你开发插件vscode中查看调试控制台，一般在vscode左侧，找不到或者就
-
实现
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中我们实现provideCompletionItemsconst 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分钟
往期回顾
仓库链接：
【Github地址链接，如果对你有用，请帮我给个star】: variable-prompt