VS Code extension

VS Code

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

View on Marketplace Read IntelliSense docs

0.0.1first Marketplace package

9supported editor languages

JSONreads generated IntelliSense data

PlannedEmilyJS directive help

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"
    }
  }
}

Now

EmilyCSS IntelliSense

Autocomplete, hover notes, snippets, and unknown-class warnings for EmilyCSS.

EmilyJS support

Autocomplete and hover notes for EmilyJS directives such as emily-state and emily-click.

Later

Framework fixtures

Example projects for React, Vue, Astro, Next, Nuxt, WordPress, and Drupal to test diagnostics against real templates.

Roadmap

CSS support first. EmilyJS support next.

Version 0.0.1 focuses on EmilyCSS. The next useful step is directive help for EmilyJS, followed by better checks against real framework examples.

View roadmap