queryselector completion vscode extension

When developing web applications with vanilla js and web components, it is often required to select elements from an imported template with querySelector. This extension provides autocompletion for selectors and a code action to define corresponding class properties.

Features

querySelector completions in javascript/typescript

If a html document is imported via ES6 imports, typing querySelector in js/ts documents triggers autocompletion of possible css selectors.

Import the document for example as:

import * as template from "./template.html";

Currently supported completion suggestions:

• id attributes
• data-* attributes

Infer type from html when generating class properties for html elements (typescript)

When generating a missing class property, for a querySelector, the type of the property is generated as any. This extension infers the type correctly using the css selector and the imported html template.

As above the document needs to be imported:

import template from "./template.html";