ts-html-plugin v0.0.23

Typescript HTML Plugin

Typescript plugin that adds type checking and code completion for html inside tagged template strings like lit-html.

Features

• Attribute type checking.
• Report missing imports of custom elements.
• Goto definition for tags and attributes.
• Code completions for html tags and attributes.
• Quick info on on hover for tags and attributes.
• Required attributes not included
• Auto closing tags.

Install

Visual Studio Code

If you use Visual Studio Code you can simply install the tagged-html extension.

code --install-extension runem.tagged-html

Other

First, install the plugin:

npm install ts-html-plugin -D

Then add a plugins section to your tsconfig.json:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "ts-html-plugin",
        "flavor": "lit-html"
      }
    ]
  }
}

Roadmap

• Support for web-components.json
• Add tests
• Aria/accessibility mode
• SVG support
• CSS support
• Support "// @ts-ignore"
• Type check events (onclick, @click, eg.)
• Type check slots
• lit-html: Directive type checking support.
• lit-element: Better support for the @property({}) decorator taking metadata into account.
• vanilla: Parse custom elements (observedAttributes, eg.)