在Visual Studio Code中自定义语法高亮

Question

我目前正在尝试为一个新的文件类型（ANTLR）编写扩展程序，并想知道如何更改Visual Studio Code中用于语法高亮显示的颜色。在我的看法中，似乎扩展程序中没有定义，而是在其他地方定义。没有关于颜色的首选项条目，也没有找到CSS文件来定义它（我期望vscode使用Electron）。我还查看了由vscode生成的设置文件和随附的文件，但没有任何线索。网络搜索也没有帮助。因此，我现在有点迷失。

能否有人给我一些提示或指向相关文档？

- Mike Lischke

---

相关问题“如何使扩展程序着色其定义的语法，而无需用户启用颜色主题？”在此处提出：https://dev59.com/QVYO5IYBdhLWcg3wF9wg - adabru

Answer 1

这里涉及到两个概念:

• 语言语法将文本文件转换为具有不同范围的标记，
• 主题则以（希望）令人愉悦的方式对这些范围进行着色。

如果您正在编写自己的语法，或从TextMate等转换，则有可能使用与主题定义的不同的范围。在这种情况下，即使实际上已经定义了这些标记，它们之间也没有清晰的区别。

有两种解决方法。第一种方法是使用自定义范围扩展主题，并以所需颜色对其进行着色。除非每个使用您的语言的人都喜欢您的配色方案，否则这不是一个好的选择。另一个方法是使用已由VSCode和主题作者定义和着色的（有限的）范围。很可能您的语言在您选择的主题中看起来很好，在其他主题中也足够好。

以下是默认暗色VSCode主题中定义的comment范围的示例。

"name": "Dark Visual Studio",
"settings": [
    {
        "scope": "comment",
        "settings": {
            "foreground": "#608b4e"
        }
    },

这里是C++语法中等价的语言片段：

"comments": {
    "patterns": [
        {
            "captures": {
                "0": {
                    "name": "punctuation.definition.comment.java"
                }
            },
            "match": "/\\*\\*/",
            "name": "comment.block.empty.java"
        },

基本上，语言根据需要定义了多个comment令牌，并且由于主题表示comment.*将是绿色的，因此它们都会被着色。

- Laur

---

如果有人知道如何在VSCode扩展中应用自定义颜色到自定义作用域（也许通过CSS？），我非常乐意听取建议。 - Laur

正如问题所述，这确实是个问题。你不能仅仅覆盖和添加自己的样式到一个主题中，而是必须使用已经定义好的样式（可能适合或不适合），或者创建完全属于自己的主题（这就不太用户友好了，如果他们不喜欢你的主题怎么办？）。我们需要一种方法来从扩展中修改任何活动主题，如果需要的话。 - Mike Lischke

一个解决方案可能比我们想象的更接近：https://github.com/Microsoft/vscode/pull/17933虽然这个问题仍然存在，但它听起来像是我们都想要的： https://github.com/Microsoft/vscode/issues/11556 - Laur

人们如何开发这些定义？我找不到任何工具，例如单元测试或实时预览模式，这对于几乎所有其他语法高亮引擎来说都是标配。没有这些，我真的不知道如何编辑这些文件。 - Konrad Rudolph

Answer 2

根据官方文档，无需修补主题：

要调整编辑器的语法突出显示颜色，请在您的用户设置settings.json文件中使用editor.tokenColorCustomizations。

除了简单的令牌自定义外，您还可以使用略微更复杂的设置完全覆盖TextMate规则，例如：

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
        "scope": "keyword.control.ref.latex",
        "settings": {
            "foreground": "#FF0000"
        }
    }
  ]
}

- memeplex

---

我正在尝试更改PHP语法高亮颜色，例如我有这个<a href="<?php echo ROOT_URL ?>">Home</a></li>，而echo和ROOT_URL常量几乎是白色的。您能否提供如何更改它们的提示？或者我应该在stackoverflow上开一个新问题吗？谢谢。 - Robert

Answer 3

语法高亮规则存储在.plist文件（或者是.tmLanguage文件）中。在这些文件中，为了进行语法高亮，声明了不同的标记类型：

• 什么是关键字？
• 什么是字符串文字？
• 什么是注释？
• 等等。

在这里查看更多信息：https://code.visualstudio.com/Docs/customization/colorizer

你不需要在.plist文件中定义颜色！

标记类型和颜色之间的关系是在颜色主题声明中完成的。

在这里学习更多： https://code.visualstudio.com/Docs/customization/themes 和 如何在 Visual Studio Code 中添加主题？

一般来说，在您尝试扩展 VSCode 时，此文档也会有所帮助：https://code.visualstudio.com/docs/extensionAPI/overview

- Wosi

---

请注意，您可能会遇到 .tmLanguage 文件而非 .plist 文件，它们是基于 XML 的替代语法。从功能上讲，它们实现相同的目标。您只需要使用其中一种文件格式即可。 - seairth

谢谢，但我已经阅读了所有这些文件。然而，没有任何地方解释如何更改颜色。有一些关于如何导入主题、从市场下载等话语，但没有地方解释如何自定义主题，甚至从头开始创建主题。 - Mike Lischke

Answer 4

您可以考虑使用颜色主题

自VSCode 1.44(2020年3月)以来，您现在拥有：

Theme Support for Semantic Tokens

Color themes can now write rules to color semantic tokens reported by language extensions like TypeScript.

"semanticHighlighting": true,
"semanticTokenColors": {
   "variable.declaration.readonly:java": { "foreground": "#00ff00" "fontStyle": "bold" }
}

The rule above defines that all declarations of readonly variables in Java should be colored green and bold

See the Semantic Highlighting Wiki Page for more information.

- VonC