如何在VSCode中添加准系统语法?

Sim*_*lGy 3 grammar textmate2 visual-studio-code tmlanguage vscode-extensions

我想将最简单的(mvp)语言语法和语法高亮添加到vscode。

(imo)一团糟的TextMate文档(适用两个不同版本)和随机的互联网建议。我无法制作一个基本示例,也找不到一个。

如何添加仅具有一个规则(例如:将“ foo”视为mylang.symbol.foo)和影响该符号的单一着色规则的语言语法?

Gam*_*a11 5

需要在的contributes.grammars小节中声明语法文件,以package.json获取示例语言foo。由于VSCode尚不知道具有该ID的任何语言,因此我们还需要在此处注册一个新的语言ID:

{
    // ...
    "contributes": {
        "grammars": [
            {
                "language": "foo",
                "scopeName": "source.foo",
                "path": "grammar.json"
            }
        ],
        "languages": [
            {
                "id": "foo",
                "extensions": ["foo"]
            }
        ]
    }
}
Run Code Online (Sandbox Code Playgroud)

grammar.json 看起来像这样:

{
    "scopeName": "source.foo",
    "patterns": [
        {
            "match": "foo",
            "name": "mylang.symbol.foo"
        }
    ]
}
Run Code Online (Sandbox Code Playgroud)

Developer: Inspect TM Scopes命令确认它按预期工作:


为了mylang.symbol.foo以特定的方式上色,扩展程序还需要在以下主题中添加一个主题package.json

{
    // ...
    "contributes": {
        // ...
        "themes": [
            {
                "label": "foo",
                "id": "foo",
                "uiTheme": "vs-dark",
                "path": "theme.json"
            }
        ]
    }
}
Run Code Online (Sandbox Code Playgroud)

有了theme.json这样看:

{
    "$schema": "vscode://schemas/color-theme",
    "name": "Foo Theme",
    "tokenColors": [
        {
            "scope": "mylang.symbol.foo",
            "settings": {
                "foreground": "#FF0000"
            }
        }
    ]
}
Run Code Online (Sandbox Code Playgroud)

使用Preferences: Color Theme命令选择主题后,该单词foo将显示为红色(bar不是):


VSCode的有关语法突出显示颜色主题的官方文档几乎也应涵盖所有这些内容,但要更深入。

顺便说一句,VSCode代替了JSON,还开箱即用地支持XML / plist格式的TmLanguage语法,但是我发现前者倾向于更具可读性。实际上,在我看来,用于TmLanguage语法的最易读格式是YAML,因为它们主要由正则表达式组成,不需要在此处进行转义。但是,这确实需要从YAML到JSON或XML的转换步骤,VSCode才能理解它。

  • 很棒的答案。这将是一篇很棒的博客文章。“vscode/textmate 语法入门” (2认同)