VS Code Extension

The Airframe VS Code extension provides IntelliSense and autocomplete for CSS tokens and component classes directly in your editor.

Features

CSS Custom Property Autocomplete — Type --af- or var(--af- for all design tokens
CSS Class Autocomplete — 2,000+ classes including responsive variants
Responsive Suffix Completion — Type af-stack@ to complete @xs, @sm, @md, @lg, @xl, @2xl
Hover Documentation — Hover over tokens and classes for inline docs
Color Preview — Visual swatches for color tokens in CSS files
Modifier Suggestions — Autocomplete for .af-is-primary, .af-is-sm, etc.

Not on the Marketplace yet? Install from a VSIX: follow From VSIX (before Marketplace) in the extension README.

Type --af- or var(--af- to get autocomplete:

.my-element {
  color: var(--af-color-primary);
  padding: var(--af-space-4);
  border-radius: var(--af-radius-md);
}

Type .af- or use in class/className attributes:

<button class="af-btn af-is-primary">
  Click me
</button>

<div className="af-card">
<h3 className="af-card__title">Title</h3>
<div className="af-card__body">Content</div>
</div>

Type af-stack@ or af-col-span-6@ for breakpoint suggestions:

<div class="af-grid af-grid-2 af-grid-4@md af-col-span-6@lg">

Hover over any --af-* variable or .af-* class to see token values, component docs, and available modifiers.

Setting	Default	Description
`airframeui.enable`	`true`	Enable/disable the extension
`airframeui.showColorPreview`	`true`	Show color swatches for color tokens