# VSCode插件开发步骤

  1. 开发插件:

    • 修改或创建主题文件

    • 更新package.json配置

  2. 构建与测试:

    • 安装vsce工具:npm install -g @vscode/vsce node > 18

    • 打包插件:vsce package

    • 这会生成一个.vsix文件

  3. 本地安装:

    • 在VSCode中按Ctrl+Shift+P打开命令面板

    • 输入"Install from VSIX"

    • 选择生成的.vsix文件

  4. 快速测试: (这个没找到)

    • 也可以使用VSCode的调试功能

    • 在项目中按F5,会打开一个新的VSCode窗口加载你的插件

    • 这样可以快速测试主题效果而无需打包

  5. 发布:

    • 完成后可以通过vsce publish命令发布到VSCode插件市场

    • 需要先创建一个Personal Access Token

# 示例一个主题插件

格式大概这样

├── LICENSE
├── README.md  
├── images
│   └── icon.png  主题icon 
├── package.json
└── themes
    ├── dark_color.json
    ├── dark_plus.json
    ├── dark_vs.json
1
2
3
4
5
6
7
8
9

package.json

{
  "name": "cursor",
  "displayName": "cursor Theme",
  "description": "自定义主题UIDEMO",
  "version": "1.1.1",
  "publisher": "hezhenfeng",
  "engines": {
    "vscode": "^1.70.0"
  },
  "categories": [
    "Themes"
  ],
  "keywords": [
    "theme",
    "dark theme",
    "light theme",
    "color theme",
    "trae"
  ],
  "icon": "images/icon.png",
  "galleryBanner": {
    "color": "#1e1e1e",
    "theme": "dark"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/"
  },
  "bugs": {
    "url": "https://github.com/"
  },
  "homepage": "https://github.com",
  "contributes": {
    "themes": [
      {
        "label": "Trae Dark",
        "uiTheme": "vs-dark",
        "path": "./themes/dark_plus.json"
      }
    ]
  }
}
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

image-20250429153015107