Set up your editor

Deck IntelliSense completes Deck's class names, tokens and icon names as you type, shows what a class actually declares when you hover over it, and underlines the mistakes that look almost right — a spacing step Deck does not have, a class one letter off — before they reach a browser. It runs in Visual Studio Code and in the editors built on it.

Not in an extension marketplace yet

Searching the Extensions view for Deck finds nothing. The extension is one .vsix file in Deck's repository, and you install it from the file. It also means the editor will not update it for you: see updating.

Which editors

Any editor built on Visual Studio Code can run it, because it is written against the VS Code extension API and nothing else. Editors with their own plugin systems cannot.

Editors Deck IntelliSense runs in, and whether each has been checked
EditorStatusNotes
Visual Studio Code Tested Needs 1.84 or later.
Antigravity Tested Install from the Command Palette, as below.
Cursor Expected to work Same extension API and the same install command. Not yet checked.
Other VS Code editors Expected to work Windsurf, VSCodium and the like install a .vsix the same way. Not checked.
JetBrains, Zed, Sublime Text, Neovim Not supported Different plugin systems. The class reference is the substitute.

Install it

  1. Download the extension. It is deck-intellisense-0.1.0.vsix, in tools/vscode/ of Deck's repository. If you cloned the repository, it is already on your disk. Download deck-intellisense-0.1.0.vsix
  2. Open the Command Palette. Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on macOS. The shortcut is the same in Visual Studio Code, Cursor and Antigravity.
  3. Run Extensions: Install from VSIX… and choose the file you downloaded. The same command is also in the … menu at the top of the Extensions view.
  4. Reload the window if the editor asks. The extension starts the next time you open an HTML, PHP or template file.

Or from a terminal, in the folder you downloaded it to:

# Visual Studio Code
code --install-extension deck-intellisense-0.1.0.vsix

# Cursor
cursor --install-extension deck-intellisense-0.1.0.vsix

Both commands need the editor's shell command on your PATH. If the terminal says the command is not found, use the Command Palette route above, or run Shell Command: Install 'code' command in PATH (or Cursor's equivalent) from the Command Palette first.

Check that it works

  1. Ask it what it loaded. Run Deck: Show loaded API version and counts from the Command Palette. It answers with one line, along the lines of Deck 0.1.x — 828 public classes, 103 internal, 31 removed, 144 tokens, 152 icons. If the command is not there, the extension is not installed.
  2. Type a class. In any HTML file, type class="btn-. A list of every button class appears, each with the cascade layer it belongs to and the declarations it sets.
  3. Make a mistake on purpose. Give a stack a spacing step Deck does not have: 
<div class="stack stack-5">

stack-5 is underlined in red: Deck's spacing scale is 0, 1, 2, 3, 4, 6 and 8. The quick fix offers both neighbours, stack-4 and stack-6, because 5 sits exactly between them and either could be what you meant. This is the bug the extension exists for. .stack on its own is a real class with a default gap, so stack-5 never fails — the page looks nearly right and nothing tells you.

What it does

What Deck IntelliSense adds to the editor
FeatureWhereWhat you get
Class completion Inside class and className 828 public classes, each with its layer and the declarations it sets.
Token completion Inside var( All 144 custom properties, with a colour swatch on the colours and the resolved value on the rest.
Icon completion After deck-icons.svg# All 152 symbols, with the markup to paste.
Hover On any class or token What it declares, which cascade layer owns it, its siblings in the family, and the source file and line.
Go to definition On any class Opens the rule in Deck's src/. See where it looks.
Diagnostics As you type The problems in the next table, with a quick fix wherever there is a right answer.

What it reports

The problems Deck IntelliSense reports, and how severe each is
CaseSeverityExample
A number off a real scale Error, with fixes gap-5, p-7, stack-5
A class removed from Deck Error, with the replacement is-full → w-full
One character off a real class Error, with a fix btn-primery → btn-primary
A class internal to Deck Warning carousel-dot, which Deck's JavaScript draws for you
An is-* state class written by hand Hint is-copied, which Deck's JavaScript sets

What it leaves alone

Your own classes. With the default setting a class is reported only when it looks like a Deck class gone wrong, so site-header, hero and row stay silent. A typo needs at least five characters before it is matched at all, because below that almost any string is one edit from something.

If a project uses Deck classes and nothing else, set deck.diagnostics.unknownClasses to all and every class Deck does not define is reported. Set it to off and none are.

Languages

It switches on for markup and template files, and for stylesheets, where it completes tokens:

  • html
  • php
  • blade
  • twig
  • css
  • scss
  • less
  • javascript
  • javascriptreact
  • typescript
  • typescriptreact
  • vue
  • svelte
  • astro
  • handlebars
  • erb
  • django-html
  • jinja-html
  • razor

These are the editor's language IDs, the name shown in the bottom-right corner of the window. For any other templating language, add its ID to deck.languages, for example ["liquid", "njk"].

Template expressions are blanked out before anything is checked, so a PHP echo, Blade braces or a JavaScript interpolation inside a class attribute is never mistaken for a class name. Classes inside those expressions are skipped rather than guessed at.

Go to definition

Jumping from a class to its rule needs Deck's source on disk. The extension looks in node_modules/@echodial/deck/src and vendor/echodial/deck/src in each folder of your workspace, which covers the npm and Composer installs. If you copied Deck into your project by hand, or keep it somewhere else, set deck.sourceRoot to the folder that holds its src/ files. Completion, hover and diagnostics do not need the source; they carry their own copy of the class list.

Settings

Search for Deck in the editor's Settings, or add these to settings.json.

Every Deck IntelliSense setting, its default and what it does
SettingDefaultWhat it does
deck.enable true Master switch. Turn off to disable completion, hover and diagnostics without uninstalling.
deck.languages [] Extra language IDs to treat as markup, beyond the built-in list. Use this for a templating language the extension does not know, e.g. ["liquid", "njk"].
deck.completion.classes true Suggest Deck class names inside class and className attributes.
deck.completion.tokens true Suggest Deck custom properties inside var( ), with a colour swatch where the token is a colour.
deck.completion.icons true Suggest icon symbol names after deck-icons.svg#.
deck.diagnostics.enable true Report removed, internal and misspelt Deck classes as you type.
deck.diagnostics.unknownClasses likely How aggressively to report classes Deck does not define.
deck.diagnostics.internalClasses true Warn when markup uses a class that is internal to Deck and may change in a patch release.
deck.diagnostics.stateClasses true Hint when markup hand-writes an is-* state class that Deck's JavaScript is supposed to apply.
deck.sourceRoot "" Path to Deck's src/ folder, for go-to-definition on a class. Leave empty to search node_modules/@echodial/deck/src and vendor/echodial/deck/src in each workspace folder.

Two commands go with them: Deck: Show loaded API version and counts, and Deck: Re-check all open files after you change a setting.

Updating

Each Deck release can add, rename or remove classes, and the extension's class list is generated from the release it was built against. Because it was installed from a file, nothing updates it: when you upgrade Deck, download the new .vsix from the same folder and install it the same way. It replaces the old one in place, settings and all.

If something is off

No suggestions appear
Check the language shown in the bottom-right corner of the window against the list above, and add it to deck.languages if it is missing. Then check deck.enable is on.
One of your own classes is underlined
It is one character away from a Deck class. swatch is one letter from Deck's switch, so it is reported as a typo. Rename it — that is what Deck's own templates did — or set deck.diagnostics.unknownClasses to off.
A class Deck ships is underlined as internal
Internal classes are pieces of markup Deck's JavaScript writes for itself. The warning means the name may change in a patch release, not that it is broken. Turn it off with deck.diagnostics.internalClasses if you are writing that markup on purpose.
Go to definition does nothing
It cannot find Deck's source. Set deck.sourceRoot.
Install from VSIX is not in the Command Palette
The editor is not built on Visual Studio Code, so the extension cannot run in it. Check the list.

Next

With the editor finishing class names for you, build something: a full account settings page, typed line by line, in one sitting.

Build your first page Or start from a template