VS Code extension

VS Code

Autocomplete, hover notes, snippets, and warnings for EmilyCSS classes in your templates.

View on Marketplace Read IntelliSense docs

Freeinstall from the VS Code Marketplace

9 file typesHTML, JS, TS, JSX, TSX, Vue, Astro, PHP, Twig

One prerequisiterun npx emily-css build in your project first

EmilyCSS onlyEmilyJS directive help is not available yet

What it does

Editor help for the classes you actually generate.

The extension reads EmilyCSS tooling output, then uses it to suggest classes and flag likely mistakes while you work.

Autocomplete

Class suggestions in HTML, JavaScript, TypeScript, JSX, TSX, Vue, Astro, PHP, and Twig files.

Hover docs

Short notes for known EmilyCSS utilities without leaving the editor.

Diagnostics

Warnings for unknown EmilyCSS-looking classes, with strict mode available per workspace.

Snippets

Small starting points for buttons, cards, and responsive layouts.

Config aware

Your config controls the suggestions.

Colours, spacing, radius, shadows, z-index, and font sizes from emily.config.json appear in autocomplete. When the config changes, reload the project data from VS Code.

EmilyUI: Reload ConfigEmilyUI: Show Project Info

emily.config.json

{
  "colours": {
    "brand": "#DB2777",
    "accent": "#F59E0B"
  },
  "spacing": {
    "scale": {
      "4": "1rem",
      "6": "1.5rem"
    }
  }
}

Works

EmilyCSS classes

Autocomplete, hover notes, snippets, and unknown-class warnings, driven by your project’s generated data.

Works

Your config, your suggestions

Colours, spacing, radius, shadows, z-index, and font sizes come from emily.config.json — not a generic class list.

Not yet

EmilyJS directives

No autocomplete or hover help for emily-state, emily-click, and friends. Use the EmilyJS docs for those.

Scope

What works today, plainly.

The extension covers EmilyCSS classes. If you use EmilyJS attributes like emily-state or emily-click, the editor will not help with those yet.