半年前,我开发了自己的 VSCode 主题,并且上架了 VSCode Market 商店。最近我的 VSCode Market Token 即将到期,就想着在更新 Token 的时候,也顺便写一篇简单的开发教程,帮助大家。
![](https://www.nousbuild.org/codeu/wp-content/uploads/2022/06/vscode-logo-300px.png)
VSCode 主题开发
1.先前条件
首先你必须要安装以下必须工具:
- Visual Studio Code 软件
- 确保安装 Node.js (npm 工具)
- tmTheme 配置(可选)
.tmTheme 是 TextMate 主题的格式文件,ColorSublime 有数百个现有的 TextMate 主题可供选择。选择一个您喜欢的主题,然后复制下载链接以在 Yeoman 生成器或您的扩展程序中使用。
2.安装
使用 VS Code 的 Yeoman 扩展生成器生成新的主题扩展,首先安装 generator-code 工具:
npm install -g yo generator-code
安装完成后,我们就可以运行主题生成代码:
yo code
选择 New Color Theme,然后按照提示进行选择。如果你准备使用 .tmTheme 文件,请在第二个问题 Do you want to import or convert an existing TextMate color theme? 中,填入自己选择的 .tmTheme 文件地址或 URL 地址。
![](https://www.nousbuild.org/codeu/wp-content/uploads/2022/06/dev-and-release-vscode-theme-1.png)
完成后,我们就可以打开 VSCode 进行主题的开发。
3.开发
3.1 如何创建多个主题
我们在用 generator-code 创建主题的时候,只能选择 Light 或 Dark 的一种,但是如果我们要开发多种主题该怎么办呢?我们只需打开 package.json 文件,找到 contributes 此项,进行增添即可:
"contributes": { "themes": [ { "label": "Pudding Light", "uiTheme": "vs", "path": "./themes/pudding-light.json" }, { "label": "Pudding Dark", "uiTheme": "vs-dark", "path": "./themes/pudding-dark.json" } ] }
3.2 主题颜色开发
接下来我们就可以进行主题颜色开发了。我们只需修改 /theme/ 目录下对应的 json 文件即可。所有这些颜色的完整列表可以在 主题颜色参考 中找到,非常的详细。
在 VSCode 中选择 “运行-启动调试”,或者利用 F5 快捷键,即可实时预览和修改。
4.发布到 VSCode Market
一旦你做了一个高质量的主题,你可以将它发布到 VS Code 扩展市场,这样其他人就可以找到、下载和使用你的扩展。或者,您可以将扩展 打包 成可安装的 VSIX 格式并与其他用户共享。
Visual Studio Code 将 Azure DevOps 用于其市场服务。这意味着通过 Azure DevOps 提供扩展的身份验证、托管和管理。vsce 只能使用 Personal Access Tokens 发布扩展。所以,至少要创建一个才能发布扩展。
4.1 创建组织
在获取获取个人访问令牌 Token 之前,我们首先需要创建自己的组织。前往 Azure DevOps 注册和登录。
需要注意的是,这里的组织名与 VS Code Market 市场中的发布者名称无关。
4.2 获取个人访问令牌
从您组织的主页,打开您的个人资料图片旁边的用户设置下拉菜单,然后选择 “Personal access tokens”:
![](https://www.nousbuild.org/codeu/wp-content/uploads/2022/06/dev-and-release-vscode-theme-2.png)
在 Personal Access Tokens 页面上,选择 New Token 以创建新的 Personal Access Token 并设置以下详细信息:
![](https://www.nousbuild.org/codeu/wp-content/uploads/2022/06/dev-and-release-vscode-theme-3.png)
- 填入一个名字
- 将组织设置为 “所有可访问的组织”
- 自定义有效期,可以自定义设置时间长一些,上限是一年
- 将范围设置为自定义并选择 Marketplace > Manage
然后点击创建。创建成功后,会显示出新的 Token,尽快保存,此 Token 仅显示一次。
4.3 创建发布者
发布者是可以将扩展发布到 Visual Studio Code Marketplace 的身份。每个扩展都需要在 “package.json” 中包含一个名称,如下:
{ "name": "pudding-vscode-theme", "displayName": "Pudding Theme", "description": "Pudding Color Theme for Visual Studio Code", "version": "1.1.2", "preview": false, "publisher": "Bitcookies" }
并且,前往 Visual Studio Marketplace 发布者管理页面 创建新发布者。
![](https://www.nousbuild.org/codeu/wp-content/uploads/2022/06/dev-and-release-vscode-theme-4.png)
4.4 安装并测试 vsce
有了令牌之后,注册了发布者后,我们就可以安装 vsce 发布工具了。vsce 是 “Visual Studio Code Extensions” 的缩写,是一个用于打包、发布和管理 VS Code 扩展的命令行工具。
# 已废弃 npm install -g vsce # 维护中 npm install --global @vscode/vsce
测试并使用您的发布者的个人访问令牌 vsce,同时将其存储以供以后使用:
vsce login <publisher name> # 例子 vsce login Bitcookies
然后输入我们的 Personal Access Tokens 即可完成登录:
![](https://www.nousbuild.org/codeu/wp-content/uploads/2022/06/dev-and-release-vscode-theme-5.png)
4.5 发布扩展
现在,我们终于可以发布拓展了。用法如下:
# 打包成 VSIX 格式 vsce package # 发布到 VS Code Market vsce publish
更多 vsce 发布工具,请参考:https://code.visualstudio.com/api/working-with-extensions/publishing-extension
我的 VSCode 主题
最后分享下我画画的二次元布丁主题吧:
![](https://bitcookies.nousbuild.com/pudding-vscode-theme/icon.png)
Pudding Theme
![](https://www.nousbuild.org/codeu/wp-content/uploads/2020/07/copyright.png)