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!
You can also override the default UI language by explicitly setting the VS Code display language using the Configure Display Language command. Press Ctrl+Shift+P to bring up the Command Palette then start typing "display" to filter and display the Configure Display Language command.
In Visual Studio Code, we have support for almost every major programming language. Several ship in the box, for example, JavaScript, TypeScript, CSS, and HTML but more rich language extensions can be found in the VS Code Marketplace.
VS Code extensions support two main languages: JavaScript and TypeScript.
Modify language packsChoose the Language packs tab in the Visual Studio Installer. Select the language you prefer. Follow the prompts.
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With