开发一款 VSCode 插件

1. 环境准备

安装 Node.js 和 npm ： VSCode 插件基于 Node.js 开发，所以需要先安装 Node.js（它自带 npm 包管理器）。可从 Node.js 官方网站 下载适合你操作系统的安装包进行安装。安装完成后，在命令行中输入 node -v 和 npm -v 来验证安装是否成功。

安装 Yeoman 和 VSCode 扩展生成器：Yeoman 是一个脚手架工具，VSCode 扩展生成器可以帮助你快速创建插件项目的基础结构。在命令行中运行以下命令进行安装：

npm install -g yo generator-code 

2. 创建插件项目

打开命令行工具，进入你想要创建项目的目录，然后运行以下命令来生成一个新的 VSCode 插件项目：

yo code 

运行上述命令后，会有一系列的交互提示，你需要根据自己的需求进行选择和输入，例如插件的名称、描述、初始命令等。完成后，Yeoman 会为你生成一个基本的插件项目结构。

3. 理解项目结构

一个基本的 VSCode 插件项目包含以下主要文件和目录： package.json ：插件的配置文件，包含插件的元数据（如名称、版本、描述等）、激活事件、命令等信息。 src/extension.ts ：插件的主入口文件，包含插件的核心逻辑代码。 .vscode 目录：包含用于调试和打包插件的配置文件。

4. 编写插件代码

以下是一个简单的示例，演示如何创建一个在命令面板中显示"Hello World"消息的插件：

修改 package.json 在 package.json 中添加一个命令和激活事件。示例如下：

 {
     "name": "hello-world-plugin",
     "displayName": "Hello World Plugin",
     "description": "A simple VSCode plugin that says hello",
     "version": "0.0.1",
     "engines": { "vscode": "^1.60.0" },
     "categories": [ "Other" ],
     "activationEvents": [ "onCommand:extension.helloWorld" ],
     "main": "./src/extension",
     "contributes": {
         "commands": [ { "command": "extension.helloWorld", "title": "Hello World" } ]
     },
     "scripts": {
         "lint": "eslint . --ext .ts,.tsx",
         "pretest": "npm run lint",
         "test": "node ./test/runTest.js" 
     },
     "devDependencies": { 
         "@types/vscode": "^1.60.0",
         "@types/glob": "^7.1.4",
         "@types/mocha": "^9.1.1",
         "@types/node": "14.x",
         "@typescript-eslint/eslint-plugin": "^5.30.0",
         "@typescript-eslint/parser": "^5.30.0",
         "eslint": "^8.19.0",
         "glob": "^7.2.0",
         "mocha": "^10.0.0",
         "typescript": "^4.7.4",
         "vscode-test": "^1.6.1"
     }
 }

上述配置中，activationEvents 定义了插件的激活条件，contributes.commands 定义了插件提供的命令。

编写 src/extension.ts

 import * as vscode from 'vscode';
 export function activate(context: vscode.ExtensionContext) { 
     let disposable = vscode.commands.registerCommand('extension.helloWorld', () => { 
             vscode.window.showInformationMessage('Hello World!'); 
     });
     context.subscriptions.push(disposable); 
 }
 export function deactivate() {}

在上述代码中，activate 函数是插件激活时执行的入口函数，registerCommand 方法用于注册一个命令，当用户在命令面板中执行该命令时，会显示一个信息提示框。

5. 调试插件

打开 VSCode 中的项目文件夹。 - 按下 F5 键或选择"运行" -> "启动调试"，VSCode 会打开一个新的扩展开发主机窗口。 - 在扩展开发主机窗口中，按下 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac）打开命令面板，输入"Hello World"并执行该命令，你应该能看到"Hello World!"的提示信息。

6. 打包和发布插件

打包插件 ：在项目根目录下，使用以下命令将插件打包成 .vsix 文件： bash vsce package 需要先使用 npm install -g vsce 安装 vsce 工具。

发布插件 ：要将插件发布到 VSCode 市场，你需要在 Visual Studio Marketplace 上注册一个账号，并获取个人访问令牌（Personal Access Token）。然后在命令行中运行以下命令进行发布：

vsce publish

7. 持续开发和维护

根据用户反馈和新的需求，不断改进和完善你的插件。同时，要关注 VSCode 的更新，确保插件与最新版本的 VSCode 兼容。