首页 > 解决方案 > 如何在自定义 VSCode 语言中引用注入的语法

问题描述

前言如下。可以在以下位置找到说明此问题的演示项目: https ://github.com/kirksl/so60384141

我可以在原生 VSCode 语言中引用注入的语法

指定这个(package.json)

        "grammars": 
        [
            {
                "scopeName": "source.js.mylang",
                "path": "./syntaxes/mylang-js.tmLanguage.json",
                "injectTo": ["source.js"]
            }
        ]

还有这个(./syntaxes/mylang-js.tmLanguage.json)

{
  "scopeName": "source.js.mylang",
  "injectionSelector": "L:source",
  "patterns": [
    {
      "include": "#todo-keyword"
    }
  ],
  "repository": {
    "todo-keyword": {
      "match": "TODO",
      "name": "keyword.todo"
    }
  }
}

我看到了这个(.js 文件,本机 JS)

在此处输入图像描述

到目前为止,一切都很好。

但是,我似乎无法在下面详述的自定义语言中引用相同的注入语法。带有三引号的围栏代码块应该使用它。

现在更新这个(package.json)

        "languages": [
            {
                "id": "mylang",
                "aliases": ["Mylang", "mylang"],
                "extensions": [".mylang"],
                "configuration": "./language-configuration.json"
            }
        ],
        "grammars": 
        [
            {
                "language": "mylang",
                "scopeName": "source.mylang",
                "path": "./syntaxes/mylang.tmLanguage.json",
                "embeddedLanguages": {
                    "meta.embedded.block.javascript": "javascript"
                }
            },
            {
                "scopeName": "source.js.mylang",
                "path": "./syntaxes/mylang-js.tmLanguage.json",
                "injectTo": ["source.js"]
            }
        ]

并另外指定这个(./syntaxes/mylang-js.tmLanguage.json)

    "fenced-expression": {
      "begin": "(^|\\G)\\s*[\"]{3}\\s*$",
      "end": "(^|\\G)\\s*[\"]{3}\\s*$",
      "contentName": "meta.embedded.block",
      "beginCaptures": {
        "0": {
          "name": "string.quoted.triple.mylang"
        }
      },
      "endCaptures": {
        "0": {
          "name": "string.quoted.triple.mylang"
        }
      },
      "patterns": [
        {
          "begin": "^(\\s*)(?=[\\S&&[^{<\\[]])",
          "while": "^(?!\\s*[\"]{3}\\s*)",
          "contentName": "meta.embedded.block.javascript",
          "patterns": [
            {
              "include": "source.js"
            }
          ]
        }
      ]
    }

我看到了这个(.mylang 文件,JS 突出显示,TODO 未突出显示)

在此处输入图像描述

最后只是显示一些管道可以启用我正在寻找的突出显示

如果我切换"include": "source.js""include": "source.js.mylang"

    "fenced-expression": {
      "begin": "(^|\\G)\\s*[\"]{3}\\s*$",
      "end": "(^|\\G)\\s*[\"]{3}\\s*$",
      "contentName": "meta.embedded.block",
      "beginCaptures": {
        "0": {
          "name": "string.quoted.triple.mylang"
        }
      },
      "endCaptures": {
        "0": {
          "name": "string.quoted.triple.mylang"
        }
      },
      "patterns": [
        {
          "begin": "^(\\s*)(?=[\\S&&[^{<\\[]])",
          "while": "^(?!\\s*[\"]{3}\\s*)",
          "contentName": "meta.embedded.block.javascript",
          "patterns": [
            {
              "include": "source.js.mylang"
            }
          ]
        }
      ]
    }

我看到了这个(.mylang 文件,JS 未突出显示,TODO 突出显示)

在此处输入图像描述

标签: visual-studio-codevscode-extensionstextmatetmlanguage

解决方案


您还需要注入mylang-js.tmLanguage.jsonsource.mylanginjectTo适用于顶级范围名称,请参见此处的说明):

{
    "scopeName": "source.js.mylang",
    "path": "./syntaxes/mylang-js.tmLanguage.json",
    "injectTo": ["source.js", "source.mylang"]
}

然后它似乎按预期工作:

此外,您必须调整您的injectionSelector以确保TODO仅在嵌入的 JS 块中的注释中应用突出显示:

"injectionSelector": "L:comment.line.double-slash.js"

推荐阅读