Lit Analyzer

Syntax highlighting, type checking, and code completion for Lit templates in Visual Studio Code.

Overview

Lit Analyzer adds language support to html and css tagged template literals in JavaScript and TypeScript files.

The extension can:

• Report errors while you type.
• Complete element, attribute, property, event, and CSS names.
• Show type information and documentation.
• Go to the declarations of elements and their members.
• Find custom elements in your project.
• Add imports for custom elements.
• Close HTML tags automatically.

Installation

Install the packaged extension from a .vsix file:

code --install-extension lit-analyzer.vsix

To build the file from this repository, run this command:

pnpm --dir packages/vscode-lit-plugin package

Editor features

Diagnostics

Lit Analyzer checks each template while you edit the file. A rule can report an error or a warning. You can also turn off each rule. See Rules for the complete rule list.

Code completion

Press Ctrl+Space in an html or css template. Lit Analyzer completes element, attribute, property, event, CSS property, and CSS part names.

Quick info

Move the pointer over an element, attribute, property, or event. Lit Analyzer shows its type and JSDoc text.

Go to definition

Use Cmd+Click on macOS or Ctrl+Click on Windows and Linux. You can go to the declaration of an element, attribute, property, or event.

For standard HTML attributes, Lit Analyzer opens the applicable declaration in the TypeScript DOM library. This also works for attributes that an unknown custom element inherits from HTMLElement.

Automatic tag close

Lit Analyzer adds a closing HTML tag when you type an opening tag in a template.

Custom element discovery

Lit Analyzer finds custom elements that you declare in your project. It uses web-component-analyzer to read each element declaration.

The extension then supplies completion, type checking, documentation, navigation, and imports for the element.

Elements from a dependency

A dependency can add its elements to the global HTMLElementTagNameMap interface. Lit Analyzer reads this map and checks those elements.

declare global {
	interface HTMLElementTagNameMap {
		'my-element': MyElement;
	}
}

These limits apply:

• Lit Analyzer reads public fields and their types. It does not read a @property decorator or a field initializer from a declaration file. Thus, each property is optional.
• TypeScript must load the dependency before Lit Analyzer can find its elements. Import the dependency from your project to make its declaration files available.

Rules

The default severity of a rule depends on the strict option. Strict mode is off by default. Set a rule to off, warning, or error to override its default severity.

Custom elements

Binding names

Binding types

LitElement

CSS

Configuration

Formatting

Run Lit Analyzer: Format Lit HTML from the Command Palette to format Lit HTML bindings without changing the file's default formatter. This command can coexist with ESLint format-on-save.

Open Settings, then select Extensions > Lit Analyzer. All setting names have the lit-plugin. prefix.

Document a custom element

Lit Analyzer reads properties, attributes, and events from your code. Use JSDoc to supply information that is not present in the code.

/**
 * A custom element.
 * @attr size
 * @attr {red|blue} color - The element color
 * @prop {String} value
 * @prop {Boolean} active - The active state
 * @fires change
 * @fires my-event - A custom event
 * @slot - Content for the default slot
 * @slot right - Content for the right slot
 * @cssprop {Color} --border-color
 * @csspart header
 */
class MyElement extends HTMLElement {
}

customElements.define('my-element', MyElement);

Architecture

Lit Analyzer uses these components:

• lit-language-server supplies diagnostics, completion, navigation, and type information.
• vscode-lit-html supplies syntax highlighting for html templates.
• vscode-styled-components supplies syntax highlighting for css templates.

This extension starts the language server and sends it the relevant VS Code settings.

Report syntax highlighting problems to the applicable highlighting project. Report all other problems in the Lit Analyzer issue tracker.

Contributing

See CONTRIBUTING.md.

License

Lit Analyzer uses the MIT License. See LICENSE.md.

This extension is a fork of lit-analyzer by Rune Mehlsen and Andreas Mehlsen. The original copyright notice is in the license file.