VS Code extension that adds basic syntax highlighting for JavaScript and TypeScript tagged template strings using language identifier comments:

const cssString = /* css */ `
    button {
        color: hotpink !important;
    }
`;

const htmlString = /* html */`
    <button class="my-button">
        Click me!
    </button>
`;

Usage

The language identifier comment must appear before the opening backtick for the template string. Here is basic list of valid identifiers (note that some languages require that you install an VS Code extension that provides a grammar for that language):

Advanced language support

For IntelliSense and more advanced embedded language support, checkout these extensions:

• lit-html — Html template intellisense
• vscode-styled-components — CSS template Intellisense

Contributing

To build this extension, you'll need Git and Node.js.

First, fork this repo and clone your fork:

git clone https://github.com/YOUR_GITHUB_ACCOUNT_NAME/vscode-comment-tagged-templates.git
code vscode-comment-tagged-templates

Then install dev dependencies using npm:

npm install

The main grammar is generated using the script in build/build.js. To run it:

npm run build

The generate grammar files will be written to the syntaxes directory. The grammar files are regenerated on each build so you should not make manual changes in them.

The supported languages are defined in build/languages.js

To run the tests:

npm run test