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

划雨悦潭之赋

于 2025-04-10 11:07:58 发布

阅读量868

点赞数 8

分类专栏：提升工作效率文章标签： vscode ide 编辑器前端团队开发 javascript

本文链接：https://blog.csdn.net/mayuhao0000/article/details/147097751

版权

提升工作效率专栏收录该内容

5 篇文章

订阅专栏

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

前言

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

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

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

创建项目

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

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

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

npm install -g yo generator-code

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

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

yo generator-code

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

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

指令配置

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

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

本地调试

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

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

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

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

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

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

核心编码

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

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

这里就可以进行编码，其中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!');
});

进行保存后，我们点击一下刷新的按钮对编写的插件重新编译。