UI JS Linter

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 ⚡