Typescript Lit Html Plugin

Overview

The TypeScript lit-html Plugin is a server plugin that adds intellisense for lit-html template strings. It provides features such as IntelliSense for html tags and attributes, quick info hovers on tags, auto closing tags, formatting support, folding html, CSS completions in style blocks, and more. This plugin can be used with TypeScript 2.4 or later in various editors including VS Code, Sublime, Atom, and Visual Studio.

Features

• IntelliSense for html tags and attributes: Provides intelligent code suggestions for html tags and attributes.
• Quick info hovers on tags: Displays relevant information about tags when hovering over them.
• Formatting support: Automatically formats html code for improved readability.
• Auto closing tags: Automatically closes html tags as you type.
• Folding html: Allows you to collapse and expand sections of html code.
• CSS completions in style blocks: Provides CSS completions within the style blocks of html templates.

With VS Code

1. Install the lit-html extension and TypeScript in your workspace.
2. Add a plugins section to your tsconfig.json or jsconfig.json file.
3. Run the "Select TypeScript version" command in VS Code to switch to the workspace version of TypeScript.

With Sublime

1. Install the Sublime TypeScript plugin and TypeScript in your workspace.
2. Configure Sublime to use the workspace version of TypeScript by setting the typescript_tsdk setting.
3. Add a plugins section to your tsconfig.json or jsconfig.json file.
4. Restart Sublime.

With Atom

1. Install the Atom TypeScript plugin and TypeScript in your workspace.
2. Add a plugins section to your tsconfig.json or jsconfig.json file.
3. Restart Atom.
4. Optional: Install the language-babel extension for syntax highlighting of lit-html strings.

With Visual Studio

1. Install the plugin in your project.
2. Add a plugins section to your tsconfig.json file.
3. Reload your project to ensure the plugin is loaded properly.

Summary

The TypeScript lit-html Plugin enhances the development experience by providing intellisense and other helpful features for lit-html template strings. It can be easily installed in popular editors like VS Code, Sublime, Atom, and Visual Studio. With features such as IntelliSense, quick info hovers, auto closing tags, and CSS completions, this plugin improves productivity and code quality for developers working with lit-html templates.