本人打算创建一个VS Code插件用于调试代码，拟结合AI用于生成测试用例，分析代码等

环境准备

安装Node.is

VS Code 插件开发使用 JavaScript / TypeScript 编写，需要 Node.js 来运行开发脚本和构建流程

官网：https://nodejs.org

安装后验证是否成功

1
node -v

image-20250702125208539

安装脚手架

这里会用到yo和generator-code

yo 是 Yeoman 的命令行工具，是一个用于快速生成项目脚手架的工具，类似于项目生成器

generator-code 是一个 Yeoman 生成器插件，专门用于生成 VS Code 插件项目 的脚手架。

全局安装yo和generator-code

1
npm i -g yo generator-code

我这里已经安装过了，输出如下

image-20250702130516689

创建VS Code插件项目

新建工程

在你需要创建插件的目录下输入

1
yo code

执行如下

image-20250702130907859

[!NOTE]

这里将会依次问你如下几个问题

  • 选择你的插件类型
  • 插件的名字
  • 插件的唯一标识
  • 插件的描述
  • 是否需要git仓库
  • 打包工具选择
  • 选择包管理工具

我的配置如图

image-20250702131821599

选择完成之后出现如下内容

image-20250702132231534

然后可以选择打开新建的工程或者直接跳过，这里选择第一个，打开之后项目结构如图所示，其中最重要的文件是package.json和extension.js，到这里一个VS Code的框架算是基本完成了。

image-20250702132908585

目录介绍

[!NOTE]

.vscode: 里面的文件是用来测试插件或者测试代码的一些文件。
node_modules: 第三方依赖。
src/test：测试文件。
src/extension.ts：插件的主文件

package.json文件

该文件是vscode扩展的清单文件，具体可以看文档：发布内容配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
{
  "name": "code-auto-test",	// 插件名
  "displayName": "code-auto-test",	// 应用市场显示的名字
  "description": "自动执行代码测试",	// 插件描述
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.101.0"
  },
  "categories": [
    "Other"	// 扩展类别
  ],
   // 激活事件组，在那些事件情况下被激活
  "activationEvents": [],
   // 插件的主入口文件
  "main": "./out/extension.js",
  "contributes": {
     // 命令
    "commands": [
      {
        "command": "code-auto-test.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "pretest": "npm run compile && npm run lint",
    "lint": "eslint src",
    "test": "vscode-test"
  },
  "devDependencies": {
    "@types/vscode": "^1.101.0",
    "@types/mocha": "^10.0.10",
    "@types/node": "20.x",
    "@typescript-eslint/eslint-plugin": "^8.31.1",
    "@typescript-eslint/parser": "^8.31.1",
    "eslint": "^9.25.1",
    "typescript": "^5.8.3",
    "@vscode/test-cli": "^0.0.10",
    "@vscode/test-electron": "^2.5.2"
  }
}

extension.js文件

入口文件，即package.json中main字段对应的文件，文件中有导出两个方法：activate和deactivate

测试

在package.json文件中添加激活事件

1
"activationEvents": ["onCommand:code-auto-test.helloWorld"],

终端进入项目

1
2
3
cd code-auto-test
npm install
npm run compile

这会将 src/extension.ts 编译到 out/extension.js，为插件运行做好准备

F5运行插件，会启动扩展宿主环境，打开任意文件夹，按下ctrl+shift+p 并输入helloworld

image-20250702140525575

确认选择Hello World，右下角出现如图内容表明运行成功

image-20250702140610288

先到这吧，累了😮‍💨