开始一个自己的VS Code Extension!

第一次尝试开发vsc遍及插件，就从一个开发手册开始吧！

1. 检查并升级 Node.js

这是我自己开发的时候遇到的问题，因为node本地默认使用的是16.20.0版本，所以犯错了。需要至少18.0.0版本以上的node

2.全局安装Yeoman和generator-code

npm install -g yo generator-code

Yeoman 是一个代码生成器，而 generator-code 是 VS Code 团队编写的专门用于生成插件骨架的工具。

3.开始创建第一个插件项目

　　3.1 终端执行以下命令：

yo code

　　后续会选择插件类型并填写基本信息，可以根据自己的想法进行。

　　3.2 了解项目结构: 命令执行成功后，会生成一个插件项目目录。用 VS Code 打开该目录，你会看到类似下面的结构

.
├── .vscode                      # VS Code 调试和任务配置
├── src                         # 源代码目录（TypeScript项目）
│   └── extension.ts            # 插件的入口文件
├── package.json                # 插件的清单文件，非常重要
├── tsconfig.json              # TypeScript 配置（如果是TypeScript项目）
└── README.md

　　重点文件是package.json，它是插件的“清单”，定义了插件的元数据、依赖、激活事件以及如何扩展 VS Code（贡献点）。

{
  "name": "my-first-extension",
  "displayName": "My First Extension",
  "description": "A simple VS Code extension",
  "version": "0.0.1",
  "engines": { // 指定插件所需的VS Code最低版本
    "vscode": "^1.32.0"
  },
  "categories": ["Other"],
  "activationEvents": [ // 插件在什么情况下被激活
    "onCommand:myExtension.sayHello"
  ],
  "main": "./out/extension.js", // 编译后的入口文件
  "contributes": { // 向VS Code贡献的功能点
    "commands": [ // 注册命令
      {
        "command": "myExtension.sayHello",
        "title": "Say Hello",
        "category": "Hello World"
      }
    ],
    "keybindings": [ // 注册快捷键:cite[6]:cite[10]
      {
        "command": "myExtension.sayHello",
        "key": "ctrl+shift+h",
        "mac": "cmd+shift+h",
        "when": "editorTextFocus"
      }
    ],
    "menus": { // 在菜单中添加项，例如右键菜单:cite[6]
      "editor/context": [
        {
          "when": "editorHasSelection",
          "command": "myExtension.sayHello",
          "group": "navigation"
        }
      ]
    }
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./"
  },
  "devDependencies": {
    "@types/vscode": "^1.32.0",
    "typescript": "^4.9.4"
  }
}

　　3.3 编写插件功能逻辑

　　　插件的核心逻辑通常在 src/extension.ts（TypeScript 项目）或 extension.js（JavaScript 项目）中实现。

　　 基本生命周期与 API

　　　VS Code 插件需要导出两个函数：activate 和 deactivate。

• • activate：当激活事件（在 package.json 的 activationEvents 中定义）发生时被调用，是插件启动的地方。

  • deactivate：当插件停用时调用，用于执行一些清理工作，可选。

　　　VS Code 提供了丰富的 API 供插件使用，所有这些 API 都通过 vscode 模块暴露。

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    // 插件激活时的逻辑
    console.log('Congratulations, your extension "my-first-extension" is now active!');

    // 注册一个命令（命令ID需与package.json中声明的一致）
    let disposable = vscode.commands.registerCommand('myExtension.sayHello', () => {
        // 显示一个信息提示框
        vscode.window.showInformationMessage('Hello World from myExtension!');
    });

    // 将命令的 disposable 对象放入订阅数组，以便在插件停用时清理
    context.subscriptions.push(disposable);
}

export function deactivate() {}

　　3.4 运行与调试插件

1. 打开调试视图: 在 VS Code 中打开你的插件项目。

2. 启动调试: 按 F5 或点击“运行和调试”视图中的“启动调试”按钮。这将会开启一个新的扩展开发主机窗口。

3. 测试功能: 在新打开的窗口中，按下 Ctrl+Shift+P (或 Cmd+Shift+P on Mac) 打开命令面板，输入你注册的命令（例如 "Say Hello"）并执行，即可看到效果。

4. 断点调试: 你可以在源代码中设置断点，调试器会在运行到断点时暂停，方便你检查变量和调用栈

    就这样，你的第一个vsc插件基本就运转起来了，可以动手先试试，后续扩展api的使用，可以多查阅文档，有问题一起沟通，我也还在学习中！