甚至用不了五分钟就能学会vscode插件开发

2025-04-10 114

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文介绍了VSCode插件的开发流程，从创建项目到最终发布。首先通过安装`yo`和`generator-code`脚手架工具初始化项目，选择JavaScript语言配置基础信息。接着，在`extension.js`中实现业务逻辑，例如将中文“变量”替换为“var”。通过F5进入调试模式验证功能。完成后使用`vsce`工具进行打包，解决可能遇到的版本不兼容或README文档问题。最后生成`.vsix`文件，可通过VSCode的“从VSIX安装”加载插件，实现开发闭环。进一步可将插件发布至官方市场供更多开发者使用。

插件（plugin）是vscode生态的扩展能力，插件可以让基于vscode开发的过程丰富多彩。比如层级括号颜色区分，甚至是各种ai智能补全工具，成为程序员在使用vscode进行开发时不可缺少的插件工具，大大提升了程序员的开发体验。

前言

vscode的市场占有率越来越高，产品的轻量化是一大原因，更重要的是vscode拥有可高度定制化的插件生态。如果掌握了vscode插件开发能力，对团队提效和提升个人影响力都是一个较好的技术储备。本文通过简单的功能流程，旨在5分钟或更快跑通vscode开发流程。

Pasted Graphic 29.png

示例，写中文的“变量”，开发一个vscode的插件进行更替，最终全量替换成“var”。

变量 a = 1; // 自己书写的代码
var a = 1; // 插件替换的代码

创建项目

在创建项目之前，我们需要创建一个项目目录（路径随意），可以使用mkdir指令创建文件夹，再基于该文件夹目录打开vscode。

vscode-plugin --zsh- 80x24.png

vscode插件开发需要安装两个全局依赖，分别是yo和generator-code。这里使用了npm，执行命令npm install -g yo generator-code。

yo：一个通用型项目的脚手架工具。
generator-code：vscode的扩展生成器，需要配合yo使用。

npm install -g yo generator-code

Pasted Graphic 10.png

⚠️注意，node版本需要>=18，否则会出现类似以下的情况。

k-Provscode-plugin payuhnos non.png

安装完成后，执行命令yo generator-code，创建vscode的插件开发项目。

yo generator-code

mayuhaodeMacBook-Proyscode-pluqin mayuhaos yo qenerator-code.png

这里我们选择JavaScript语言进行开发，各种配置如extension的name、identifier、desciption等可以先随意配置，后边也可以在package.json中修改。

He lcone to the Visual.png

到此，我们的vscode插件开发项目就创建完成了！

指令配置

用vscode进入这个项目的文件目录，可以看到如下资源结构。extension.js文件很重要，里边是我们插件实现的业务逻辑。

进入package.json文件，可以看到contributes中的commands是一个数组，里边可以包含多个指令，title就是指令名称，原本是“Hello World”，我这里先换成to plugin，方便后续调试清晰看到（也可以不改）。

activationEventsm O..png

本地调试

在vscode插件项目中敲击F5，进入本地调试模式，会出现下图中的调试台，并且自动会开启一个调试窗口，可以随意打开一个项目进行调试。

() psckng Jwen () centrbutes Jcemmands ()o) C tn.png

在调试窗口中，随意找一个编辑位置，写上如下代码：

变量 a = 1;
变量 b = 2;

敲击键盘ctrl+shift+p打开指令栏，输入to plugin。（如果package.json的title没有修改就是Hello World），然后敲击回车。

Pasted Graphic 18.png

右下方会出现提示语，表示我们的vscode插件可以正常调试。

Pasted Graphic 19.png

我们回到插件工程，打开extension.js文件，可以看到有下图红圈中的语句，说明这里激活插件后，匹配了注册的plugin.helloWord命令，执行命令的回调函数会执行代码。

ine of cede vilt cnlyt CAwIeL 3e Men raur eateesiee 1s activeted.png

核心编码

那么我们可以直接在activate方法中新增其他指令，这里我直接在这个命令的回调域书写代码逻辑。

我们最终的目标是替换文本，设计的流程图如下，总共需要三个步骤。

Pasted Graphic 25.png

这里就可以进行编码，其中vscode的工具对象中有很多子对象，window就是其中之一，window中的activeTextEditor是专用于获取编辑器选中文本的变量。更多用法可以查阅官方api文档，做vscode开发更多是成为一名api调用工程师。【官方api文档】

const disposable = vscode.commands.registerCommand('plugin.helloWorld', function () {
    // 调用vscode中的工具对象
    const editor = vscode.window.activeTextEditor;
    if (!editor) {
        vscode.window.showErrorMessage('未识别到文本框');
        return;
    }
    if (editor.selection.isEmpty) {
        vscode.window.showErrorMessage('请选择要识别的代码');
        return;
    }
    // 获取编辑区选中的代码片段
    const text = editor.document.getText(editor.selection);
    const varReg = /变量/g;
    // 代码片段回插到编辑区中
    const rebackString = JSON.stringify(text.replace(varReg, 'var'));
    // 调用edit的写入api将代码片段回插到编辑区中
    editor.edit(build => {
        build.replace(editor.selection, JSON.parse(rebackString));
    });
    vscode.window.showInformationMessage('Hello World from myPlugin!');
});