Adds syntax highlighting for html inside of JavaScript and TypeScript tagged template strings
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode Add basic ability to synchronize settings between VS Code and TS plugin Nov 16, 2018
docs
schemas
src
syntaxes
.gitignore Add basic ability to synchronize settings between VS Code and TS plugin Nov 16, 2018
.vscodeignore
CHANGELOG.md
LICENSE Initial commit Oct 11, 2017
README.md 1.10.0 Nov 16, 2018
highlighting.test.js Adding basic test case file for highlighting Jul 2, 2018
package-lock.json 1.10.1 Nov 17, 2018
package.json 1.10.1 Nov 17, 2018
tsconfig.json

README.md

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 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