开发 vscode 插件却不知从何入手？

Posted 2025-01-10 Updated 2025-01- 10

By power 已删除用户

123~158 min read

什么是 vscode 插件？

VSCode 是一款高度可扩展的编辑器，我们可以通过插件对 VSCode 进行定制和增强。

打开 VSCode 编辑器，在左侧工具栏可以查看和安装可用的插件。

实际上，VSCode 的许多核心功能都是作为插件构建的。

若想查找更多已发布的插件，可前往插件市场

vscode 插件能做些什么？

几乎 VSCode 所有的部分都可以通过插件进行增强，包括但不限于以下几种场景：

主题
- 颜色主题：创建和应用自定义的颜色主题，改变编辑器、侧边栏、状态栏等界面元素的颜色。
- 文件图标主题：自定义文件和文件夹的图标，使项目结构更加直观和个性化。
扩展工作台
- 自定义组件：在 VSCode 的 UI 中添加新控件，如按钮、输入框、下拉菜单等。
- 自定义视图：创建新视图来展示特定的信息或工具，如项目管理器、数据查看器等。
Webview
- 创建Webview：使用 HTML、CSS 和 JavaScript 创建自定义网页，在 VSCode 中以 Webview 形式展示。
- 交互式内容：创建交互式的用户界面，如图表、动态数据展示等。
语言扩展概览 ：支持新的编程语言。
- 语法高亮：为代码添加语法高亮，以更容易地阅读和编写代码。
- 代码补全：提供智能提示和代码补全功能，提高编码效率。
- 代码导航：如跳转到定义、查找引用等。
- 代码格式化：确保代码风格一致。
调试器扩展 ：支持特定运行时的调试。
- 断点管理：设置断点，以在调试时暂停程序执行。
- 变量查看：在调试过程中查看和修改变量的值。
- 调用堆栈：展示调用堆栈，帮助理解程序的执行流程。
- 调试控制：提供控制程序执行的命令，如继续、单步、跳出等。
其他…

开发过程，创建-调试-集成测试-发布

本文以 auto-nvm 项目为例，演示过程，至于 auto-nvm 插件的内部逻辑不做介绍。

初始化插件项目

初始化项目需要用到 Yeoman 和 vscode 插件生成器两个工具。

全局安装 Yeoman 和 vscode 插件生成器

终端输入以下命令，回车执行：

npm install --global yo generator-code

初始化项目

终端输入以下命令，回车执行：

yo code

若考虑后续不会再使用 Yeoman 和 vscode 插件生成器，不想全局安装，可通过终端执行以下命令来初始化：
npx --package yo --package generator-code -- yo code

结合个人需求，完成问答环节，即可完成创建。

工具会自动安装相关依赖，执行完成后直接 vscode 打开即可。

项目结构介绍

初始化的插件项目包含以下结构：

重点文件介绍

挑几个重点文件说一说：

.vscode
- extensions.json
- launch.json
- tasks.json
src
- test
- extension.ts
.vscode-test.mjs
.esbuild.js

package.json

"contributes": {
    "commands": [
      {
        "command": "auto-nvm.helloWorld",
        "title": "Hello World"
      }
    ]
},

其他

extension.ts 逻辑介绍

由上述介绍可以看出，插件的核心逻辑都是在 src/extension.ts 中编写，所以我们先来看看初始化的插件逻辑是怎么样的，以便理解后续的操作步骤：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, your extension "auto-nvm" is now active!');
    const disposable = vscode.commands.registerCommand('auto-nvm.helloWorld', () => {
            vscode.window.showInformationMessage('Hello World from auto-nvm!');
    });
    context.subscriptions.push(disposable);
}

export function deactivate() {}

除去注释，以上就是 src/extension.ts 所有的代码了，内容很少是不是，我们来简单分析一下。

activate 和 deactivate

extension.ts 道出了两个函数，分别是 activate 和 deactivate，这并不是随便导出的，而是 vscode 插件指定的导出函数。其中，activate 函数会在插件激活时（首次执行命令时会激活扩展程序）调用；deactivate 函数会在插件停用时调用。
const disposable = vscode.commands.registerCommand('auto-nvm.helloWorld', () => {})

借助 vscode.commands.registerCommand api 注册 helloWorld 命令及执行函数。

上面介绍 package.json 时有提到 contributes.commands 配置项可以配置插件提供的执行命令，比如：
```
"contributes": {
    "commands": [
        {
            "command": "auto-nvm.helloWorld",
            "title": "Hello World"
        }
    ]
},
```
可以发现 command 配置和这里 registerCommand api 的第一个参数一致，也就是说这段代码就是为 Hello World 命令注册具体的执行逻辑。
vscode.window.showInformationMessage('Hello World from auto-nvm!');

借助 vscode.window.showInformationMessage api 弹出提示消息。

当我们通过快捷键(Ctrl+Shift+P(Windows)/Cmd+Shift+P(Mac))执行 Hello World 命令时，会在 vscode 编辑器右下角弹出提示信息。
context.subscriptions.push(disposable);

context 是 activate 函数的参数，提供了插件运行时的上下文信息和一些实用工具。context.subscriptions 是一个数组，用来管理插件所有的订阅（如事件监听器、定时器等），确保插件的资源被适当管理和释放。这里就是将 disposable 命令订阅管理起来。