VSCode extension: embed standard language in mine

Question

I need to embed standard languages (for example JavaScript) in my language extension. This means I want to see autocompletes, syntax higlighting etc. as in file.js. Can I do this (how)?

Thank you for any examples!

Answer 1

You can continue abc-lang example in Embedded Languages guide with additional grammar 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" } ]
        }
    }
}

Permalink for Matt's comment is https://github.com/microsoft/vscode/blob/5712574281bb096a2dd4ceda7e266d507f775b45/extensions/html/syntaxes/html.tmLanguage.json#L1936

Answer 2

Syntax highlighting is easy, just include the top level scope of the language to be embeded. Html for example uses "include": "source.js" to add js syntax highlighting inside script blocks.

IntelliSense is considerably more difficult. Again, take a look at what vscode's HTML extension does. It basically splits html files into virtual documents (one for script blocks, one for style blocks, one for html) and then embeds the required language libraries for each of these languages to provide IntelliSense. The Vetur extension also does something similar. In both cases, the extensions owns the top level document (html or vue) and then delegate to the correct embedded language based on where IntelliSense requests are made