在 Visual Studio Code 中自定义语法突出显示

Posted 2023-02-15

【中文标题】在 Visual Studio Code 中自定义语法突出显示

【英文标题】：Customizing syntax highlighting in Visual Studio Code

【发布时间】：2016-11-04 01:39:39

【问题描述】：

我目前正在尝试为新文件类型 (ANTLR) 编写扩展名，并且想知道如何更改 Visual Studio Code 中用于语法突出显示的颜色。对我来说，它看起来好像没有在扩展中定义，而是在其他地方。没有颜色的首选项条目，我也没有找到定义它的 CSS 文件（我希望这是因为 vscode 使用的是 Electron）。我还查看了生成的设置文件 vscode 和附带的文件，但也没有任何线索。网络搜索也没有帮助。所以，我现在有点迷路了。

谁能给我一些提示或指向相关文档？

【问题讨论】：

相关问题How can I have an extension colorize the syntax the extension is defining without it actually being a color theme the user has to enable?在这里提问：***.com/questions/46377151/…

【参考方案1】：

这里有两个概念：

语言语法，将文本文件转换为具有不同

范围

和的标记 主题，以一种（希望）赏心悦目的方式为这些

范围

着色。

如果您正在编写自己的语法，或者从 TextMate 等进行转换，那么您可能使用的范围与主题定义的范围不同。在这种情况下，您定义的标记之间不会有明显的区别，即使它们是实际定义的。

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

举个例子，这里是默认的深色 VSCode 主题定义的 comment 范围。

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

这是来自 C++ 语法的等效语言 sn-p：

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

基本上，该语言根据需要在comment 下定义多个标记，并且由于主题说comment.* 将是绿色的，因此它们都被着色相同。

【讨论】：

如果有人知道如何将自定义颜色应用于 VSCode 扩展中的自定义范围（可能通过 CSS？），我会全力以赴。

正如问题中所述，这正是问题所在。您不能只覆盖并将自己的样式附加到主题，但您要么必须使用已经定义的样式（可能适合也可能不适合），或者您创建完全自己的主题（我所做的），但这不是用户友好（如果他们不喜欢你的主题怎么办？）。如果需要，我们需要一种方法来修改扩展中的任何活动主题。

一个解决方案可能比我们认为的更接近：github.com/Microsoft/vscode/pull/17933 虽然这仍然是开放的，听起来我们俩都想要：github.com/Microsoft/vscode/issues/11556

人们如何制定这些定义？我找不到 任何 工具，例如单元测试或实时预览模式，这些工具几乎适用于所有其他语法高亮引擎。没有这个，我真的不明白如何编辑这些文件。

【参考方案2】：

主题不用打补丁，来自official documentation：

要调整编辑器的语法高亮颜色，请在用户设置 settings.json 文件中使用 editor.tokenColorCustomizations

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

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

【讨论】：

我正在尝试更改 php 语法高亮颜色，例如我有这个<a href="<?php echo ROOT_URL ?>">Home</a></li>，echo 和ROOT_URL 常量几乎都是白色的。你能提示如何改变它们吗？还是我应该打开一个新的 *** 问题？谢谢

【参考方案3】：

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

什么是关键字？ 什么是字符串文字？ 什么是评论？ 等

点击此处了解更多信息：https://code.visualstudio.com/Docs/customization/colorizer

您没有在.plist 文件中定义颜色！

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

在此处了解更多信息 https://code.visualstudio.com/Docs/customization/themes 和这里How to add theme in Visual Studio Code?

通常，当您尝试扩展 VSCode 时，此文档也很有帮助：https://code.visualstudio.com/docs/extensionAPI/overview

【讨论】：

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

谢谢，但我已经阅读了所有这些文件。然而，没有什么能解释你将如何改变颜色。有几句话如何导入主题，从市场下载等等，但没有解释如何自定义主题甚至从头开始创建主题。

【参考方案4】：

您可以考虑使用color theme

自从VSCode 1.44 (March 2020)，你现在有了

语义标记的主题支持

颜色主题现在可以编写规则来为 TypeScript 等语言扩展报告的语义标记着色。

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

上面的规则定义了Java中所有只读变量的声明都应该是贪婪和粗体的

请参阅Semantic Highlighting Wiki Page 了解更多信息。