For Katapult

To update this forked extension:

• Modify the "patterns" regex in this file: syntaxes\lit-html.json
• Package the extension into a VSIX file following these instructions: https://code.visualstudio.com/api/working-with-extensions/publishing-extension#packaging-extensions
• Create a new release and upload the VSIX file to the assets for the release

Adds syntax highlighting and language support for html inside of JavaScript and TypeScript tagged template strings, such as used in lit-html and other frameworks.

Features

• Syntax highlighting of inline html blocks.
• IntelliSense for html tags and attributes.
• Quick info hovers on tags.
• Formatting support.
• Auto closing tags.
• Folding html.
• CSS completions in style blocks.
• Works with literal html strings that contain placeholders.

Usage

The lit-html extension adds highlighting and IntelliSense for lit-html template strings in JavaScript and TypeScript. It works out of the box when you use VS Code's built-in version of TypeScript.

If you are using VS Code 1.30 or older and are using a workspace version of typescript, you must currently configure the TS Server plugin manually by following these instructions

Configuration

You can either configure this plugin using a tsconfig or jsconfig as described here, or configure the plugin using VS Code. This requires VS Code 1.30+ and TS 3.2+. Note the VS Code based configuration override the tsconfig or jsconfig configuration.

Tags

This extension adds html IntelliSense to any template literal tagged with html or raw:

import {html} from 'lit-html'

const a = html`
    <div></div>
`

You can enable IntelliSense for other tag names by settings "lit-html.tags":

"lit-html.tags": [
    "html",
    "template"
]

Formatting

The plugin formats html code by default. You can disable this by setting "lit-html.format.enabled": false:

"lit-html.format.enabled": false