VSCode 扩展

Source: Dev.to

前置条件

• 已安装 Node.js 和 npm（或 yarn）。
• Yeoman – 脚手架工具。
• 官方的 VS Code 扩展生成器。

安装 Yeoman 和 VS Code 扩展生成器

npm install -g yo generator-code

运行扩展生成器

yo code

系统会提示您几个问题。请选择以下选项（或根据您的偏好进行调整）：

完成回答后，生成器会为您的扩展创建目录结构。

打开项目

cd hello-world-extension
code .

您会看到类似以下的结构：

hello-world-extension/
├── .vscode/
│   └── launch.json
├── .gitignore
├── .vscodeignore
├── README.md
├── package.json
├── tsconfig.json
├── src/
│   └── extension.ts
└── webpack.config.js

• package.json – 包含扩展的元数据、依赖项，以及关键的 activationEvents 和 contributes 部分。
• src/extension.ts – 您的扩展主要逻辑所在的文件。
• .vscode/launch.json – 用于调试扩展的配置文件。

理解 package.json

打开 package.json 并定位以下部分：

"activationEvents": [
  "onCommand:hello-world-extension.helloWorld"
],
"contributes": {
  "commands": [
    {
      "command": "hello-world-extension.helloWorld",
      "title": "Hello World"
    }
  ]
}

• activationEvents – 定义扩展何时会被激活。这里，当执行命令 hello-world-extension.helloWorld 时激活。
• contributes.commands – 声明扩展提供的命令。

核心逻辑 (src/extension.ts)

// Import the VS Code API
import * as vscode from 'vscode';

// Extension activation method. Called when the extension is activated.
export function activate(context: vscode.ExtensionContext) {

    // Register the command defined in package.json
    // The first argument is the command ID, the second is the function to execute.
    const disposable = vscode.commands.registerCommand(
        'hello-world-extension.helloWorld',
        () => {
            // When the command is executed, display an informative message.
            vscode.window.showInformationMessage('Hello World from Hello World Extension!');
        }
    );

    // Add the registered command to the extension's context.
    // This ensures the command is disposed of when the extension is deactivated.
    context.subscriptions.push(disposable);
}

// Extension deactivation method. Called when the extension is deactivated.
export function deactivate() {}

详细说明

测试扩展

1. 按 F5。这将启动一个新的 VS Code 窗口，称为 Extension Development Host，并加载你的扩展。
2. 在新窗口中：
   • 打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P）。
   • 输入 Hello World 并选择你注册的命令。

你应该会在右上角看到消息 “Hello World from Hello World Extension!”。

打包与发布

要共享您的扩展，您可以使用 vsce（Visual Studio Code 扩展管理器）进行打包：

npm install -g vsce
vsce package

该命令会生成一个 .vsix 文件，您可以将其发布到 Visual Studio Marketplace 或私下分发。

接下来做什么？

• 添加更多命令、UI 贡献或语言特性。
• 探索 VS Code API 文档，以获取高级功能。
• 发布你的扩展并收集社区反馈。

编码愉快！ 🚀

构建和打包你的 VS Code 扩展

安装 VS Code 扩展 CLI

npm install -g vsce

打包扩展

vsce package

运行上述命令将生成一个 .vsix 文件。该文件可以：

• 手动在 VS Code 中安装，或
• 发布到 VS Code Marketplace。

恭喜！

您已经创建并运行了第一个 VS Code 扩展。在本教程中，您了解了：

• 扩展项目的基本结构。
• package.json 的核心作用。
• 如何使用 VS Code API 与编辑器交互。

经典的 “Hello World” 扩展仅仅是个开始。借助 VS Code API，您可以：

• 访问文件系统。
• 操作编辑器（例如，编辑文档、添加命令）。
• 为丰富的 UI 创建 webview。
• 添加代码片段、诊断信息以及更多功能。

为什么要构建自定义扩展？

作为一名 Tech Lead，投入时间开发自定义扩展可以：

• 提升团队生产力。
• 强制执行编码标准和最佳实践工作流。
• 提供针对代码库量身定制的共享工具。

下一步

1. 探索官方 VS Code 文档 – 其中包含大量示例和 API 参考。
2. 实验 – 尝试添加新命令、状态栏项目或自定义树视图。
3. 发布 – 当你准备好时，将你的扩展发布到 Marketplace，让整个团队受益。

塑造你的开发环境的力量掌握在你手中——继续构建吧！