VSCode 扩展

Source: Dev.to

解密 VS Code：创建你的第一个 “Hello World” 扩展

Visual Studio Code 革新了我们的开发方式，而它最大的优势之一就在于可扩展性。能够直接在你最爱的编辑器中自定义和添加功能，打开了无限可能。在本篇文章中，我们将进行一次实战之旅，创建你的第一个 VS Code 扩展，示例采用经典的 “Hello World”。准备好了解基础概念，并迈出扩展开发的第一步吧！

为什么要为 VS Code 创建扩展？

想象一下，你可以为重复性的任务设定自定义快捷键，与你最常用的工具实现深度集成，甚至拥有一个能够理解你特定工作流的代码助手。扩展正是实现这些需求的利器。它们不仅提升你的生产力，还孕育了一个充满活力的生态系统，社区成员共同贡献，让 VS Code 变得更加强大。对于我们这些开发者和技术负责人来说，掌握扩展的创建意味着能够根据项目和团队的需求，塑造出最适合的开发环境。

Source: …

动手实践：扩展的 “Hello World”

要开始，你需要先安装 Node.js 和 npm（或 yarn）。此外，我们将使用 Yeoman（脚手架生成器）和官方的 VS Code 扩展生成器来初始化项目。

1. 准备环境

首先，全局安装 Yeoman 和 VS Code 扩展生成器：

npm install -g yo generator-code

2. 生成项目

运行扩展生成器。它会询问一些问题来配置你的项目：

yo code

按照提示操作：

• What type of extension do you want to create? – 选择 New Extension (TypeScript)。
• What’s the name of your extension? – 输入 hello-world-extension。
• What’s the identifier of your extension? – 保持默认 hello-world-extension。
• What’s the description of your extension? – Uma extensão simples de Hello World para VS Code.（保持原文）
• Initialize a git repository? – Yes（或 No）。
• Bundle the source code with webpack? – Yes。
• Which package manager to use? – npm（或 yarn）。

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

3. 浏览项目结构

进入创建好的文件夹（cd hello-world-extension）并在 VS Code 中打开：

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 – 调试配置。

4. 理解 package.json 与 activationEvents

打开 package.json，可以看到：

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

• activationEvents 定义了扩展何时被激活。
• contributes.commands 声明了扩展提供的命令。

5. 在 src/extension.ts 中编写逻辑

// Importa a API do VS Code
import * as vscode from 'vscode';

// Método de ativação da extensão. Chamado quando a extensão é ativada.
export function activate(context: vscode.ExtensionContext) {

    // Registra o comando definido no package.json
    let disposable = vscode.commands.registerCommand('hello-world-extension.helloWorld', () => {
        // Exibe uma mensagem informativa.
        vscode.window.showInformationMessage('Hello World from Hello World Extension!');
    });

    // Garante que o comando seja descartado ao desativar a extensão.
    context.subscriptions.push(disposable);
}

// Método de desativação da extensão.
export function deactivate() {}

详细说明

• import * as vscode from 'vscode'; – 导入完整的 VS Code API。
• activate(context) – 根据 activationEvents 调用的函数。
• vscode.commands.registerCommand – 注册命令。
• vscode.window.showInformationMessage – 显示通知。
• context.subscriptions.push(disposable) – 管理命令的生命周期。

下一步

1. 测试扩展 – 按 F5 打开一个加载了该扩展的 VS Code 新窗口。打开命令面板（Ctrl+Shift+P）并执行 Hello World。
2. 调试 – 在 extension.ts 中使用断点，实时观察行为。
3. 发布 – 当满意后，遵循 VS Code 官方指南将扩展发布到 Marketplace。

在 VS Code 中添加新命令

• commandId – 必须对应 package.json 中定义的 command。
• commandHandler – 当命令被调用时执行的函数。
• vscode.window.showInformationMessage(message) – 显示一条信息性消息。
• context.subscriptions.push(disposable) – 管理资源，防止内存泄漏。
• deactivate() – 在扩展被停用时调用；对于简单扩展可以保持为空。

6. 运行并测试你的扩展

按 F5 启动 Extension Development Host。在新窗口中：

1. 打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P）。
2. 输入 “Hello World” 并选择已注册的命令。

消息 “Hello World from Hello World Extension!” 将出现在右上角。

7. 打包与发布（可选）

要共享您的扩展，请使用 vsce 打包：

npm install -g vsce
vsce package

这将生成一个 .vsix 文件，可手动安装或发布到 Marketplace。

结论

恭喜！您已经创建并运行了您的第一个 VS Code 扩展。我们探讨了：

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

这个 “Hello World” 只是开始。使用 VS Code 的 API，您可以访问文件系统、操作编辑器、创建 webview、添加代码片段等。投入时间开发自定义扩展可以显著提升团队的生产力和规范化。继续阅读官方文档并尝试更复杂的功能。塑造您的开发环境的力量掌握在您手中！