VSCode 扩展：在我的中嵌入标准语言答案

【问题标题】：VSCode extension: embed standard language in mineVSCode 扩展：在我的中嵌入标准语言
【发布时间】：2018-02-26 08:59:17
【问题描述】：

我需要在我的语言扩展中嵌入标准语言（例如 JavaScript）。这意味着我想看到自动完成、语法高亮等，如file.js。我可以这样做（如何）？

感谢您提供任何示例！

【问题讨论】：

标签： visual-studio-code vscode-extensions

【解决方案1】：

您可以在Embedded Languages 指南中继续abc-lang 示例以及附加语法syntaxes/abc.tmLanguage.json：

{
    "scopeName": "source.abc",
    "patterns": [ { "include": "#expression" } ],
    "repository": {
        "expression": {
            "patterns": [
                { "include": "#letter" },
                { "include": "#paren-expression" },
                { "include": "#code" }
            ]
        },
        "letter": {
            "match": "a|b|c",
            "name": "keyword.letter"
        },
        "paren-expression": {
            "begin": "\\(",
            "end": "\\)",
            "beginCaptures": {
                "0": { "name": "punctuation.paren.open" }
            },
            "endCaptures": {
                "0": { "name": "punctuation.paren.close" }
            },
            "name": "expression.group",
            "patterns": [ { "include": "#expression" } ]
        },
        "code": {
            "begin": "```js",
            "end": "```",
            "beginCaptures": {
                "0": { "name": "punctuation.code.open" }
            },
            "endCaptures": {
                "0": { "name": "punctuation.code.close" }
            },
            "name": "meta.embedded.block.javascript",
            "patterns": [ { "include": "source.js" } ]
        }
    }
}

马特评论的固定链接是https://github.com/microsoft/vscode/blob/5712574281bb096a2dd4ceda7e266d507f775b45/extensions/html/syntaxes/html.tmLanguage.json#L1936

【讨论】：

因为其他到达这里的人让我困惑了一分钟； 'source.js' 不是文件名，它是 javascript 语法的名称。

【解决方案2】：

语法高亮很容易，只需包含要嵌入的语言的顶级范围。 htmlfor example使用"include": "source.js"在脚本块内添加js语法高亮。

IntelliSense 要困难得多。再次查看what vscode's HTML extension does。它基本上将 html 文件拆分为虚拟文档（一个用于脚本块，一个用于样式块，一个用于 html），然后为每种语言嵌入所需的语言库以提供 IntelliSense。 Vetur extension 也做了类似的事情。在这两种情况下，扩展都拥有顶级文档（html 或 vue），然后根据发出 IntelliSense 请求的位置委托给正确的嵌入式语言

【讨论】：

谢谢。这很有帮助，我不知道如何做语法高亮部分。我可以将它包含在 package.json 的贡献属性中（它为您提供了自动完成功能，尽管不是全部）。但是for example ref 的链接已失效，链接到的行号不再位于同一位置。琐碎的第一世界问题，只是想我会让您知道在您的答案中包含代码 sn-p 可能会有所帮助。谢谢！