如何为YAML特定字段实现自定义语法高亮（支持VSCode及其他编辑器）

我们团队现在把基础设施的各类流程都用YML文件来配置，典型的配置块长这样：

process:
  my-process:
    requires: "@other-process::parameter"
    dockerfile: |
      FROM alpine
      RUN apk add git
    script: |
      #!/bin/bash
      if [ ! -f $file ]; then
        echo header > $file;
      fi

平时我们用VSCode编辑这些文件，为了提升可读性，想实现三个自定义语法高亮需求：

• 高亮requires字段值里的@other-process这类以@开头的字符串；
• 给script字段里的多行内容自动应用Bash脚本的语法高亮；
• 给dockerfile字段里的多行内容自动应用Dockerfile的语法高亮。

我们知道VSCode是用TextMate语法定义来实现高亮的，但自己写完整的语法文件实在超出能力范围，想问问有没有更简便的注入方式，也接受其他编辑器的解决方案。

VSCode简便实现方案：语法注入（Grammar Injection） #

不需要编写完整的TextMate语法，只需要用VSCode的语法注入功能，针对YAML文件里的特定字段注入现有语法即可，步骤如下：

1. 创建自定义语法注入文件
   在项目的.vscode/grammars文件夹下（没有的话就新建），创建一个yaml-process-injection.json文件，内容如下：

{
  "fileTypes": ["yaml", "yml"],
  "injectionSelector": "L:yaml -string -comment",
  "patterns": [
    // 高亮requires字段中@开头的流程名称
    {
      "match": "(?<=requires:\\s*\")[@][^:]+",
      "name": "entity.name.process.yaml"
    },
    // 给script字段注入Bash语法
    {
      "begin": "^\\s*script:\\s*\\|",
      "beginCaptures": {
        "0": { "name": "keyword.control.yaml" }
      },
      "end": "^(?=\\s*\\w)",
      "patterns": [
        {
          "include": "source.shell.bash"
        }
      ]
    },
    // 给dockerfile字段注入Dockerfile语法
    {
      "begin": "^\\s*dockerfile:\\s*\\|",
      "beginCaptures": {
        "0": { "name": "keyword.control.yaml" }
      },
      "end": "^(?=\\s*\\w)",
      "patterns": [
        {
          "include": "source.dockerfile"
        }
      ]
    }
  ]
}

2. 配置VSCode加载这个注入文件
   打开VSCode的settings.json（可以通过Ctrl+,打开设置，然后点击右上角的打开设置(JSON)），添加以下配置：

"files.associations": {
  "*.yml": "yaml",
  "*.yaml": "yaml"
},
"grammar.injections": [
  "./.vscode/grammars/yaml-process-injection.json"
]

3. 自定义@开头字符串的高亮颜色
   如果觉得默认的高亮颜色不够醒目，可以在settings.json里继续添加颜色配置：

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": "entity.name.process.yaml",
      "settings": {
        "foreground": "#FF79C6", // 粉色，可自行修改
        "fontStyle": "bold"
      }
    }
  ]
}

这样配置完成后，重新打开YML文件，就能看到三个需求都实现了：@other-process会高亮显示，script里的内容是Bash高亮，dockerfile里的内容是Dockerfile高亮。

其他编辑器方案：JetBrains系列（IntelliJ IDEA/PyCharm等） #

如果团队有用JetBrains的编辑器，实现起来更直观：

• 语法注入：在dockerfile或script字段的多行字符串上右键，选择Inject language or reference，然后选择对应的语言（Dockerfile/Bash），之后同类型的字段会自动应用高亮；
• 高亮@开头字符串：打开Settings -> Editor -> Color Scheme -> YAML，点击+号添加一个新的规则，用正则表达式@\w+匹配，然后设置喜欢的颜色和样式即可。

内容的提问来源于stack exchange，提问作者Aaron