如何向 VSCode 添加基本语法?
How do I add a bare-bones syntax to VSCode?
我想向 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?
需要在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 添加 最简单的 (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?
需要在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 理解它。