Native syntax highlighting in javascript template literals

[Qsppl]

Feature Description

See MDN template literals.

Template literals are currently displayed like this:

Let's make template literals appear like this:

In recent years, many web developers have needed this feature. Here are examples of projects known to me that require this feature:

• symbiote.js
• vue
• angular
• polymer
• lit
• skatejs
• hyperHTML
• hybrids
• framework
• enhance-dev
• graphql-js
• and many others...

Many of these projects come up with their own ways of highlighting the syntax of template literals, but in all known implementations this does not work well.
Even if you can turn on syntax highlighting inside a template literal, formatting, tabulation, auto-substitutions, and transitions to definitions still do not work.
In some cases, these solutions break the syntax highlighting of javascript code.

Here are examples of these solutions:

Usually, in conjunction with these extensions, you also need to use prettier for correct tabulation.

• vscode-template-literal-editor
• vscode-inline-html
• vscode-js-template-literal
• es6-string-html
• and many others...

Feature implementation details

Unlike Markdown, PHP, and HTML, Javascript syntax does not explicitly define the language of a template literal.

Therefore, I assume that a meta attribute will have to be added to jsdoc and tsdoc to explicitly determine the language of the template literal:

Details of the technical implementation of the feature

Perhaps to fully implement this feature you will need to use tree-sitter (#50140)

[RedCMD]

does https://marketplace.visualstudio.com/items?itemName=ruschaaf.extended-embedded-languages work for you?

[Qsppl]

This extension has no less problems than the others.
There is no code formatting, syntax highlighting is broken both in the template literal itself and in the code after the template literal (see lines 12-14). Emmet, snippets and other features do not work in a template literal.

But the main problem is that syntax highlighting generally has to be enabled by extensions.

[vs-code-engineering]

We try to keep VS Code lean and we think the functionality you're asking for is great for a VS Code extension. Maybe you can already find one that suits you in the VS Code Marketplace. Just in case, in a few simple steps you can get started writing your own extension. See also our issue reporting guidelines.

Happy Coding!

[RedCMD]

snippets and other features do not work in a template literal
*extension-candidate

@mjbvz I don't see how extensions can provide half these features

• extensions cannot assign snippets to embedded languages
• extensions can't provide correct tabulation inside embedded languages
• "autoClosingPairs" and "surroundingPairs" doesn't work in embedded languages
• Comments broken in markdown codeblock #232343
• Embedded languages do not use their own indentationRules settings #176034
• Embedded languages use outer language auto-closing characters #133397
• Cannot set embedded language indentation rules #73559
• there is no api to 'just' format an embedded language
• [regression] language-configuration of embedded language not loading #202938
• Incorrect highlighting of tsx code inside Markdown code blocks (bracket token exclusion rules of embedded grammars are not considered) #165232
• Is there a "Format Selection As ..." command? #131814
• Add when clause context for language at active cursor #107989
• Expanding semantic theming to support semantically embedded languages for colorization #81558