Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Template LiteralsNew to Visual Studio Code? Get it now.
Template Literals

Template Literals

julienetie

|
2,028 installs
| (4) | Free
Template Literals Syntax Highlighting for HTML and SVG (Without the need of a tag function)
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Template Literals

The VS Code Syntax Highlighter for using HTML and SVG in Template Literals

Use this extension to highlight markup used within template-literals without the need to specify a tag function.

From

... => `<h1 class="greeting" style="background: lime;">Hello ${place}</h1>` 

To

... => `<h1 class="greeting" style="background: lime;">Hello ${place}</h1>`

Usage

/* 
To enable syntax highlighting, a template literal needs to be assigned or returned. 
(The end back-tick must either come immediately after the markup or at the start of a new line) */

// Assigned
const assigned = `
    <div class="some-class">
        <style>h1{color: lime;}</style>
        <h1>Hello World!</h1>
        <script>console.log('Hello World')</script>
    </div>
`
const property = {
    templateLiteral: `
        <div class="some-class">
            <style>h1{color: lime;}</style>
            <h1>Hello World!</h1>
            <script>console.log('Hello World')</script>
        </div>`
}

// Returned 
const returned = () => {
    return `
        <div class="some-class">
            <h1>Hello World!</h1>
        </div>`
}

// Wtih tag function 
const tagged = html `
    <div class="some-class">
        <style>h1{color: lime;}</style>
        <h1>Hello World!</h1>
        <script>console.log('Hello World')</script>
    </div>
`

// With starting comments
const startingComment = /*html*/ `
    <div class="some-class">
        <style>h1{color: lime;}</style>
        <h1>Hello World!</h1>
        <script>console.log('Hello World')</script>
    </div>
`

--

Disabling syntax highlighting

Because HTML's text syntax is neutral, you will rarely need to disable highlighting though if necessary there are two ways to do so. You may need to use ignore in your linter.

Disable single-line syntax using a trailing empty single-line comment

`<h1 class="greeting" style="background: lime;">Hello ${place}</h1>`//

Disable multi-line syntax with the no-html directive

const ignoreMultiLine = /*no-html*/`    
    {"menu": {
        "id": "file",
        "value": "File",
        "popup": {
        "menuitem": [
            {"value": "New", "onclick": "CreateNewDoc()"},
            {"value": "Open", "onclick": "OpenDoc()"},
            {"value": "Close", "onclick": "CloseDoc()"}
        ]
        }
    }}
`

Unsupported

// Standalone template literals are not supported 
`<div class="some-class">
    <style>h1{color: lime;}</style>
    <h1>Hello World!</h1>
    <script>console.log('Hello World')</script>
</div>`

// Direct arguments are not supported (TBA)
someFunction(`<article></article>`)

Install

Search for "template literals" in VSCode extensions and install.


This plugin is based on the lit-html and Literally HTML VS Code extensions.

** Contributions are welcomed **

MIT © 2022 Julien Etienne.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2023 Microsoft