如何向 VSCode 添加基本语法？

Question

我想向 vscode 添加 最简单的 (mvp) 语言语法和句法突出显示。

它是 (imo) 一堆 TextMate 文档（适用两个不同的版本）和随机的互联网建议。我无法使一个基本示例起作用，也找不到一个。

How would I add a language grammar with only one rule (eg: treat "foo" as mylang.symbol.foo), and a single coloring rule that affects this symbol?

Answer 1

需要在package.json的contributes.grammars段声明语法文件，此处为示例语言foo。由于 VSCode 还不知道任何具有该 ID 的语言，我们还需要在此处注册一个新的语言 ID：

{
    // ...
    "contributes": {
        "grammars": [
            {
                "language": "foo",
                "scopeName": "source.foo",
                "path": "grammar.json"
            }
        ],
        "languages": [
            {
                "id": "foo",
                "extensions": ["foo"]
            }
        ]
    }
}

grammar.json 看起来像这样：

{
    "scopeName": "source.foo",
    "patterns": [
        {
            "match": "foo",
            "name": "mylang.symbol.foo"
        }
    ]
}

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

为了 mylang.symbol.foo 以特定方式着色，扩展还需要在 package.json 中贡献一个主题：

{
    // ...
    "contributes": {
        // ...
        "themes": [
            {
                "label": "foo",
                "id": "foo",
                "uiTheme": "vs-dark",
                "path": "theme.json"
            }
        ]
    }
}

theme.json 看起来像这样：

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

使用Preferences: Color Theme命令选择主题后，单词foo会变成红色（bar不是）：

VSCode 在 Syntax Highlighting and Color Themes 上的官方文档也应涵盖几乎所有这些内容，但更深入。

顺便说一句，与 JSON 不同，VSCode 还支持 XML / plist 格式的 TmLanguage 语法，但我发现前者往往更具可读性。实际上，在我看来，用于 TmLanguage 语法的最易读的格式是 YAML，因为它们主要由正则表达式组成，并且不需要在那里进行转义。然而，这确实需要从 YAML 到 JSON 或 XML 的转换步骤，以便 VSCode 理解它。

如何向 VSCode 添加基本语法？

How do I add a bare-bones syntax to VSCode?

visual-studio-code

grammar

vscode-extensions

textmate2

tmlanguage