如何开发一个 VSCode 插件

• 1. 如何开发一个 VSCode 插件?

• 1.1. 操作步骤

• 1.1.1. 步骤 1：准备开发环境
• 1.1.2. 步骤 2：创建插件项目
• 1.1.3. 步骤 3：编写插件代码
• 1.1.4. 步骤 4：测试插件
• 1.1.5. 步骤 5：打包与发布

• 2. 一个VSCode 插件实例

• 2.1. 步骤 1：初始化项目
• 2.2. 步骤 2：编写插件代码
• 2.3. 步骤 3：更新 package.json
• 2.4. 步骤 4：测试插件

如何开发一个 VSCode 插件?

开发一个 Visual Studio Code (VSCode) 插件涉及以下主要步骤。

以下是一个简化的示例流程，包括创建一个简单的 "Hello World" 插件：

操作步骤

步骤 1：准备开发环境

确保您的计算机上已安装以下软件：

• Node.js：VSCode 插件开发通常基于 JavaScript 或 TypeScript，因此需要 Node.js 环境，包括 npm（Node 包管理器）。
• Visual Studio Code：作为开发插件的集成开发环境 (IDE)，确保您已安装最新版本的 VSCode。

步骤 2：创建插件项目

创建一个用于存放插件源代码的新文件夹：

mkdir my-hello-world-extension
cd my-hello-world-extension

接下来，使用 VSCode 的官方插件生成器 yo code（需提前通过 npm install -g yo generator-code 全局安装）来初始化项目：

yo code

按照提示回答几个问题，如插件名称、描述、标识符、初始激活事件等。选择插件类型时，可以选择一个基础的 TypeScript 插件模板。

步骤 3：编写插件代码

初始化完成后，您将获得一个包含基本结构的插件项目。核心文件通常包括：

• package.json：插件的元数据和依赖项。
• src/extension.ts（或 .js）：插件的主入口文件，定义插件的激活函数和核心逻辑。
• README.md：插件的说明文档。
• vsc-extension-quickstart.md：快速入门指南。
• tsconfig.json（如果使用 TypeScript）：TypeScript 编译配置。
• .vscode 文件夹（可能包含 launch.json 和 tasks.json）：调试和构建配置。

Hello World 示例：

打开 src/extension.ts，找到 activate 函数。

这是一个示例，展示如何添加一个命令，当用户触发时会在状态栏显示一条消息：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const disposable = vscode.commands.registerCommand('myExtension.sayHello', () => {
    vscode.window.showInformationMessage('Hello, World from My VSCode Extension!');
  });

  context.subscriptions.push(disposable);
}

export function deactivate() {}

这段代码注册了一个名为 myExtension.sayHello 的命令。

当用户通过命令面板（Cmd + Shift + P 或 Ctrl + Shift + P）输入并执行此命令时，插件将在状态栏显示一条欢迎消息。

步骤 4：测试插件

在 VSCode 中打开插件项目文件夹，按下 F5 键启动调试模式。

这将启动一个带有插件加载的 VSCode 开发者版实例。

在新实例中，尝试触发您刚刚编写的命令，验证插件是否正常工作。

步骤 5：打包与发布

• 打包：当插件开发完成并经过充分测试后，使用 vsce 工具（可通过 npm install -g vsce 全局安装）打包插件为 .vsix 文件，准备发布：

vsce package

这将生成一个名为 my-hello-world-extension-<version>.vsix 的文件。

• 发布：如果您拥有 VSCode Marketplace 账户，可以使用 vsce publish 命令将打包好的插件发布到市场供其他用户安装。如果没有账户，需要先注册并创建一个publisher。

vsce publish

至此，您已经完成了开发、测试、打包和发布一个简单的 VSCode 插件的过程。

实际开发过程中，您可能还需要处理更复杂的任务，如扩展编辑器功能、提供代码片段、实现语言服务等，这些都可以通过 VSCode API 来实现，具体细节可查阅官方文档和相关教程。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

一个VSCode 插件实例

由于直接在文本对话中编写一个完整的VSCode插件涉及到大量的代码和文件结构，这并不适合在此环境中展示。但我可以为您概述一个简单插件的基本结构，并提供关键代码片段，以便您在本地环境中自行创建。这里我们创建一个插件，它会在用户点击菜单项时，弹出一个消息框显示当前活动文本编辑器中的选中文本。

步骤 1：初始化项目

按照之前的回复中所述的步骤，使用 yo code 命令创建一个新的VSCode插件项目，并选择适当的选项（如使用TypeScript）。确保项目目录结构正确，并包含必要的文件，如 package.json、src/extension.ts 等。

步骤 2：编写插件代码

修改 src/extension.ts 文件，添加以下代码：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // 注册一个命令
  let disposable = vscode.commands.registerCommand('extension.displaySelectedText', () => {
    // 获取当前活动文本编辑器及其选中文本
    const editor = vscode.window.activeTextEditor;
    if (!editor) {
      vscode.window.showErrorMessage('No active text editor found.');
      return;
    }
    const selection = editor.selection;
    const selectedText = editor.document.getText(selection);

    // 显示选中文本
    vscode.window.showInformationMessage(`Selected Text: ${selectedText}`);
  });

  // 将命令添加到插件的上下文订阅列表中，以便插件卸载时自动清理资源
  context.subscriptions.push(disposable);
}

export function deactivate() {}

上述代码定义了一个名为 extension.displaySelectedText 的命令。当用户触发该命令时，插件会获取当前活动文本编辑器的选中文本，并将其显示在一个消息框中。

步骤 3：更新 `package.json`

在 package.json 文件中，确保 contributes 部分包含了新命令的菜单项定义。如果没有这一部分，添加如下内容：

"contributes": {
  "commands": [
    {
      "command": "extension.displaySelectedText",
      "title": "Display Selected Text"
    }
  ],
  "menus": {
    "editor/context": [
      {
        "command": "extension.displaySelectedText",
        "when": "editorHasSelection",
        "group": "9_my_extension@1"
      }
    ]
  }
}