Eagle VS Code Extension

VS Code extension for the Eagle (EDS) design system. Provides autocomplete, hover info, real-time diagnostics, and inline color preview.

Features

Autocomplete — var(--eds in CSS suggests all design tokens and shows light/dark resolutions; eds- in className/clsx suggests utility classes
Hover — Shows per-mode aliases, resolved values and chains, Figma provenance, hierarchy level, and CSS declarations
Diagnostics — Real-time validation against 7 lint rules (hardcoded values, unknown tokens, hierarchy violations)
Color swatches — Inline color preview for var(--eds-color-*) tokens in the configured light or dark mode

Installation

Build and install the .vsix:

# From the repository root, build the extension and its workspace dependencies.
pnpm exec turbo build --filter=eagle-vscode...
pnpm --filter eagle-vscode package    # creates apps/eagle-vscode/eagle-vscode-1.0.0.vsix

Then in VS Code: Extensions > "..." menu > "Install from VSIX..."

Publish locally to Visual Studio Marketplace

The publisher ID is smallcase and the extension ID is smallcase.eagle-vscode. Your Microsoft account needs access to that publisher in the Marketplace publisher management page.

Run the build and package commands above, then validate:

pnpm --filter eagle-vscode typecheck
pnpm --filter eagle-vscode lint

Create an Azure DevOps Personal Access Token with All accessible organizations and Marketplace > Manage scope. Follow Microsoft's publishing guide. Authenticate locally, entering the token at the prompt:
```
pnpm dlx @vscode/vsce login smallcase
```

From the repository root, publish the packaged artifact:

pnpm dlx @vscode/vsce publish --packagePath apps/eagle-vscode/eagle-vscode-1.0.0.vsix

Alternatively, upload the VSIX through the publisher management page. For later releases, use the filename matching package.json's version; Marketplace does not allow overwriting an already published version.

Configuration

Setting	Default	Description
`eagle.eagleDir`	`""`	Path to eagle source (auto-detected if empty)
`eagle.colorMode`	`"light"`	Mode used for inline color swatches (`light` or `dark`)
`eagle.diagnostics.enabled`	`true`	Enable/disable diagnostics
`eagle.diagnostics.severity`	`"warning"`	Severity: error, warning, information, hint

How It Works

Activates when @smallcase/eagle is detected in node_modules
Parses all eagle CSS files and builds a token/class index
Registers completion, hover, diagnostic, and color providers
Watches eagle CSS files for changes and rebuilds the index automatically

Supported Languages

CSS / CSS Modules
TypeScript React (.tsx)
TypeScript (.ts)
JavaScript React (.jsx)
JavaScript (.js)

Development

pnpm build       # Build with esbuild
pnpm watch       # Watch mode
pnpm typecheck   # Type-check
pnpm lint        # ESLint

To test: press F5 in VS Code to launch an Extension Development Host, then open a project that uses @smallcase/eagle.

Eagle Design System

smallcase