Logo

菜单

发布于 2026-01-05 1 阅读
0

构建 VSCode 主题

构建 VSCode 主题

目录

大家好，我是 Brittney，我的第一个主题“深水”（Deep Water）刚刚发布到 VSCode Marketplace。我也是ZTM Academy的讲师，同时还是bDesigned 的所有者、设计师和开发者。您可以在Console Logs找到我撰写的更多开发笔记。

简而言之：创建并发布您自己的 VSCode 主题，或者直接查看我下面的主题。

vscode 主题标题

深水主题

深水仓库

创建 VSCode 主题扩展

主题和扩展是Visual Studio Code (VSCode)如此出色的重要原因之一。我喜欢时不时地更换颜色，这样在编写代码时就能获得全新的视觉体验。创建自己的 VSCode 主题可能是一个学习的过程，有时也充满挑战，所以我决定写这篇文章，记录我创建第一个主题的历程。从编辑主题到发布到应用市场，我将一步一步地带你了解整个过程。让我们开始吧！

创建文件



首先，我们需要创建一个目录来存放我们的主题文件。

mkdir theme-name
cd theme-name
Enter fullscreen mode Exit fullscreen mode

VSCode 中的颜色主题只需要两个必需组件：一个package.json文件和一个主题文件（json格式为 .ts）。readme添加一个文件和一个徽标总是好的，所以我们也会创建它们。让我们创建所需的文件。npm init -y在您创建的目录中运行命令package.json。创建一个名为“themes”的文件夹，或者mkdir themes在终端中运行命令。下一步在我第一次发布主题时给我带来了很多麻烦。虽然文档中没有说明，但json主题文件需要以特定的方式命名，才能在 VSCode 首选项中显示。在您的“themes”文件夹中，创建一个名为“displayName”的文件，后跟“.ts” -color-theme.json。例如，如果您的主题是“Test Theme”，则其文件名应如下所示。Test Theme-color-theme.json以下是按顺序执行的命令。

npm init -y
mkdir themes
touch themes/Test Theme-color.theme.json
Enter fullscreen mode Exit fullscreen mode

Package.json

对于我们的package.json文件，VSCode 扩展有一些必填字段。运行后npm init -y，我们应该会得到一个类似于下面的文件。

package.json 文件启动器

我们可以移除脚本部分，其他字段可以根据你的主题进行修改。文件中还需要一些额外的字段来支持 VSCode 扩展package.json，这些字段包括`<script>` publisher、 `<script>` engines、` categories<script>` 和contributes`<script>`，添加一个 ` displayName<script>` 字段也很有帮助。编辑完初始文件后package.json，我们来添加所需的字段。

{
  "publisher": "bDesigned",
  "engines": {
    "vscode": "^1.0.0"
  },
  "categories": [
    "Themes"
  ],
  "contributes": {
    "themes": [
      {
        "label": "test-theme",
        "uiTheme": "vs-dark",
        "path": "./themes/theme-name.json"
      }
    ]
  },
  "displayName": "Theme Name"
Enter fullscreen mode Exit fullscreen mode

编辑颜色

现在我们可以开始制作主题了。VSCode 使用一个settings.json文件来编辑工作区。为了在添加颜色时预览效果，我编辑了我的文件，settings.json然后将其添加到我的文件中theme/theme-name.json，以确保颜色正确。在 VSCode 中， Windows 用户settings.json点击打开文件CTRL+SHIFT+P，CMD+SHIFT+PMac 用户点击打开文件，然后settings.json在弹出的对话框中输入。这将打开该文件。

你的配置文件中可能已经有一些内容settings.json，但我们需要编辑的区域位于`<path>`"workbench.colorCustomizations"和`<rules>` 下"editor.tokenColorCustomizations": {"textMateRules":[]}。为了避免添加这些作用域（VSCode 中用于指代规则的术语）时产生混淆，我创建了一个颜色调色板，然后在所有 `<path>` 中添加了一个“名称”字段，"textMateRules"用于指定颜色或规则设置的内容。以下是我的 `<path>` 示例settings.json。

"workbench.colorCustomizations": {
    "activityBar.background": "#08131a",
    "activityBar.border": "#008c9644",
    "activityBar.foreground": "#008c96",
    "activityBarBadge.background": "#08131a",
    "activityBarBadge.foreground": "#008c96"
},
"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "Italic",
        "scope": [
          "comment",
        ],
        "settings": {
          "fontStyle": "italic"
        }
      },
      {
        "name": "Gray",
        "scope": ["comment"],
        "settings": {
          "foreground": "#4b6869"
        }
      },
    ]
}
Enter fullscreen mode Exit fullscreen mode

我将斜体和颜色分别放在不同的作用域中，这样如果我想更改或删除某些内容，只需前往相应的作用域即可。确定好调色板后，您可以添加一个作用域，每个作用域包含一个"name"颜色字段。要为每个作用域添加规则，我们需要弄清楚 VSCode 如何称呼我们想要着色的内容。我使用了内置的“开发者：检查编辑器标记和作用域”功能来确定每个项目的名称。您可以通过在命令面板中搜索“开发者：检查编辑器” ，找到它，它应该会显示一个类似于下图的框。

VSCode 中的命令面板

在 VSCode 中检查编辑器

在底部图片的左侧，您可以看到 TextMate 的作用域，右侧则是与当前选中项相匹配的作用域。图中选中了 JavaScript函数。您将使用这些作用域来为您的元素添加颜色settings.json。通常，这些作用域与特定语言密切相关，但在大多数情况下，仅使用基本作用域即可。以下是一个示例：

"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "Dark Teal",
        "scope": [
          "storage.type"
        ],
        "settings": {
          "foreground": "#01779b"
        }
      }
    ]
}
Enter fullscreen mode Exit fullscreen mode

现在您可以逐个检查想要着色的元素，并为每个元素添加对应颜色的规则。设置完成后，我们可以将这些规则复制到我们的theme.json文件中。所有包含"workbench.colorCustomizations": { ...copyEverythingHere }这些规则的内容都"textMateRules": [ ...copyEverythingHere ]需要复制到theme.json文件中，如下所示：

{
  "name": "Deep Water",
  "type": "dark",
  "colors": {
    ...pasteAll workbench.colorCustomizations here
  },
  "tokenColors": [
      ... pasteAll textMateRules here
  ]
}
Enter fullscreen mode Exit fullscreen mode

图片

完成这些步骤后，主题在技术上就可以发布了。但是，如果您想让它看起来更美观，可以添加图标和 README 文件。images在根目录或mkdir images终端中创建一个文件夹。创建一个图标和一些屏幕截图png（不支持 SVG 格式），并将它们放入 images 文件夹中。我们需要更新主题配置package.json以使其能够识别图标。添加一个"icon"键，后跟图像路径"icon": "images/logo.png"。

自述文件

现在我们可以readme.md在根目录下添加一个文件。在文件中填写主题信息，并添加一些主题截图，使其更加醒目。你还可以从Badgen.net添加一些徽章，增添一些特色。务必注明主题支持的语言，并附上主题截图，这总是很有帮助的。

成为出版商

VSCode 文档

要在应用市场发布文件，您需要从 Azure 获取访问令牌。您可以访问dev.azure.com/vscode创建此帐户。创建帐户后，我们需要获取个人访问令牌。这是一个比较复杂的过程，请务必按照下图中的所有说明进行操作。需要注意的是，在“组织”中，请务必选择“所有可访问的组织”。然后，要打开“应用市场”选项，请单击“自定义定义”并显示所有范围。之后，您可以找到应用市场并选中所有复选框（“读取”、“获取”、“发布”和“管理”）。完成所有这些操作后，单击“创建”，并务必将您的访问令牌保存到某个位置，因为 Azure 不会将其保存在本地。此外，请将访问令牌复制到剪贴板，因为我们将在下一步中使用它。

Azure 访问令牌映像

Azure 访问令牌映像

Azure访问令牌图像

Azure 访问令牌映像

发布主题

现在我们已经设置好了用于在 Marketplace 上发布应用的 Azure 帐户，接下来就可以安装软件包并创建发布者了。如果您已经在VSCode Marketplacevsce的帐户部分设置了发布者名称，则可以跳过创建步骤，直接使用您已有的名称。

npm i -g vsce
vsce create-publisher your-name
Enter fullscreen mode Exit fullscreen mode

这里应该会提示您输入创建帐户时复制的访问令牌。您可以CTRL+V在 Windows 或CMD+VMac 系统上粘贴令牌。设置发布者后，我们应该就能登录了。

vsce login your-publisher-name
Enter fullscreen mode Exit fullscreen mode

文件中的package.json该publisher字段也是vsce登录时使用的用户名。请仔细检查是否已将所有settings.json规则复制到主题文件的正确部分json，然后我们就可以继续打包和发布扩展程序了。

vsce package
vsce publish
Enter fullscreen mode Exit fullscreen mode

如果没有错误，你的软件包现在应该已经发布到 Marketplace 了。它会显示一个指向主题页面的链接，大约需要 5 分钟才能生效。但是等等，如果我们尝试更新呢？VSCode 不会自动跟踪代码库的更改。

正在更新

如果您对主题进行了任何更改，要更新主题，我们首先需要将版本号从 ` package.json<version> ` 更新到1.0.0`<version> 1.0.1`。更新版本后，将更改推送到 GitHub。

git add .
git commit -m 'commit message'
git push
Enter fullscreen mode Exit fullscreen mode

当更改推送完毕后，我们需要使用git 为版本号打标签。

git tag v1.0.1
Enter fullscreen mode Exit fullscreen mode

版本标记完成后，我们就可以重新发布更新后的扩展程序了。

vsce publish
Enter fullscreen mode Exit fullscreen mode

现在你的主题应该已经在 Marketplace 上架了！希望你阅读愉快，并且从中有所收获！

文章来源：https://dev.to/brittneypostma/build-a-vscode-theme-3f4i
免费仪表盘 - 2024 年的超棒模板
🎯 JS面试清单 - 第一部分（...