半年前,我开发了自己的 VSCode 主题,并且上架了 VSCode Market 商店。最近我的 VSCode Market Token 即将到期,就想着在更新 Token 的时候,也顺便写一篇简单的开发教程,帮助大家。

VSCode 主题开发

1.先前条件

首先你必须要安装以下必须工具:

  1. Visual Studio Code 软件
  2. 确保安装 Node.js (npm 工具)
  3. 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 地址。

完成后,我们就可以打开 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

Personal Access Tokens 页面上,选择 New Token 以创建新的 Personal Access Token 并设置以下详细信息:

  • 填入一个名字
  • 将组织设置为 “所有可访问的组织
  • 自定义有效期,可以自定义设置时间长一些,上限是一年
  • 将范围设置为自定义并选择 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 发布者管理页面 创建新发布者。

4.4 安装并测试 vsce

有了令牌之后,注册了发布者后,我们就可以安装 vsce 发布工具了。vsce“Visual Studio Code Extensions” 的缩写,是一个用于打包、发布和管理 VS Code 扩展的命令行工具。

npm install -g vsce

测试并使用您的发布者的个人访问令牌 vsce,同时将其存储以供以后使用:

vsce login <publisher name>

# 例子
vsce login Bitcookies

然后输入我们的 Personal Access Tokens 即可完成登录:

4.5 发布扩展

现在,我们终于可以发布拓展了。用法如下:

# 打包成 VSIX 格式
vsce package

# 发布到 VS Code Market
vsce publish

更多 vsce 发布工具,请参考:https://code.visualstudio.com/api/working-with-extensions/publishing-extension

我的 VSCode 主题

最后分享下我画画的二次元布丁主题吧:

Pudding Theme

Market License Issues

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Next Post

Web加载图片的双路备份方法

周二 7月 26 , 2022
我们浏览网页的时候,经常碰到图片加载失败的问题,例 […]

更多文章