偶然看到稀土掘金 2022 编程挑战赛，题目形式比较开放而且我近期刚好有空，因此决定和朋友一起开发一个 VSCode 主题插件。

本文涉及的项目源码已在 GitHub 开源，这篇文章也是在这个配色主题下完成的，插件配色效果如下：

image

新建项目

通过简单的搜索，可以发现 VSCode 很贴心地给开发者提供了创建新主题的教程。

跟着教程创建一个新的项目

1
2
3
4
5
6
7
8
9
10
npm install -g yo generator-code
yo code

# What type of extension do you want to create?
# 选择创建颜色主题 `New Color Theme`

# Do you want to import or convert an existing TextMate color theme?
# 选择从头开始 `Start fresh`

# 后续的配置选项可以根据自己的需要填写

这两行命令可以帮助我们快速创建一个新的插件项目，并且配置好开发所需的配置。其中比较重要的配置如下：

  • themes/xxxxx-color-theme.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
    // 一个典型的主题配置文件
    {
      // 主题名
      "name": "theme name",
      // 颜色配置
      "colors": {
        // VSCode 背景颜色
        "editor.background": "#263238",
        // VSCode 默认前景色（文字颜色）
        "editor.foreground": "#eeffff",
        "activityBarBadge.background": "#007acc",
        "sideBarTitle.foreground": "#bbbbbb"
        // ...
      },
      // 代码高亮配置
      "tokenColors": [
        {
          "name": "Variables",
          "scope": ["variable", "string constant.other.placeholder"],
          "settings": {
            "foreground": "#EEFFFF"
          }
        },
        {
          "name": "Colors",
          "scope": ["constant.other.color"],
          "settings": {
            "foreground": "#ffffff"
          }
        }
        // ...
      ]
    }
  • .vscode/launch.json 这个文件配置了 VSCode 插件的运行方式，用于开发时 Debug。
  • package.json 中的 contributes 字段。这个字段声明了 VSCode 插件包含的内容。

项目创建完成后，我们可以尝试用 VSCode 打开项目，然后按下 F5（Start Debugging），VSCode 就会打开一个加载了当前开发主题插件的新窗口。进入 Debug 模式之后，尝试修改 themes/xxxxx-color-theme.json 的 colors 配置，保存后可以发现 Debug 窗口的对应区域颜色会发生变化。

至此，我们就完成了一个项目环境的基本搭建。

配色开发

通过修改 themes/xxxxx-color-theme.json 的 colors 配置我们就可以根据自己的喜好调整 VSCode 不同区域的颜色了，主题具体的配置选项非常多，哪项配置对应哪个区域可以直接通过把鼠标悬浮在配置项上得到提示或者在 VSCode 的主题色文档中查找。

如果你还希望调整不同语言的高亮，还需要调整 tokenColors 的配置了，在 VSCode 的命令面板中运行 Developer: Inspect Editor Tokens and Scopes，可以得到对应语言的详细语法信息，这些信息在调整配置时很有帮助。VSCode 也给了详尽的语法高亮指南

inspect token

以上就是开发一个 VSCode 主题所需的全部知识了。

优化

但是真正开始设计时，会发现单纯操作 json 文件需要关注很多琐碎的细节并且很难复用各种颜色，因此可能还需要借助一系列工具帮助我们降低配置的复杂度。

比如我还使用了 vscode-theme-generator 帮助简化配置，同时把设计主题色抽取出来编写成配置文件，方便调整配色。

打包发布

在 vsce (Visual Studio Code Extensions) 的帮助下打包只需要一条命令就够了

1
vsce package

如果你还希望将插件发布到官方市场，还需要一个 Azure 账号配置并配置好 token

1
2
3
4
5
6
7
# 手动登录
vsce login <publisher name>

# 或者配置 token 环境变量
VSCE_PAT=<token>

vsce publish

更详细的步骤可以查看 VSCode 的发布文档。