VSCode support for .ui.js and .lit files with Lit HTML intelligence.

This extension makes custom UI JavaScript files behave like first-class frontend citizens inside VSCode.

Features include:

HTML autocomplete inside html\``
HTML diagnostics and linting
Emmet support
Auto formatting
Lit plugin integration
Custom file icons for .lit and .ui.js
Automatic file association setup

Supported Files

*.lit
*.ui.js
*.ui.mjs
*.ui.cjs

All supported files are treated as JavaScript with enhanced HTML template support.

Features

HTML Intelligence Inside Template Literals

import { html } from "lit";

export default () => html`
  <div class="card">
    <button @click=${handleClick}>Click</button>
  </div>
`;

Inside html\`` you get:

HTML autocomplete
Attribute suggestions
Auto closing tags
Syntax highlighting
Emmet expansion
Diagnostics

Automatic Configuration

The extension automatically configures:

{
  "editor.formatOnSave": true,
  "emmet.triggerExpansionOnTab": true,
  "html.autoClosingTags": true
}

and other JavaScript + Lit optimizations.

No manual setup rituals required.

Included Dependencies

This extension automatically integrates with:

Prettier
Lit Plugin
ES6 String HTML

Users do not need to manually configure them.

File Icons

Custom icons are provided for:

.lit
.ui.js
.ui.mjs
.ui.cjs

To enable icons:

Preferences → File Icon Theme → UI JS Icons

Installation

Marketplace

Install from the VSCode Marketplace.

Manual Installation

code --install-extension ui-js-dev-kit.vsix

Development

Install Dependencies

npm install

Run Extension

Press:

F5

inside VSCode.

Package Extension

npm run package

Recommended Usage

Use together with:

Lit
Web Components
SSR UI systems
Custom template engines
Vanilla JS frontend architectures

Example

import { html } from "lit";

export const Button = ({ text }) => html`
  <button class="btn">${text}</button>
`;

License

MIT

Built for developers who think .js files deserve superpowers ⚡

UI JS Linter