Pagani VS Code Extension
VS Code extension for the Pagani (EDS) design system. Provides autocomplete, hover info, real-time diagnostics, and inline color preview.
Features
- Autocomplete —
var(--eds in CSS suggests all design tokens; eds- in className/clsx suggests utility classes
- Hover — Shows resolved value, reference chain, 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
Installation
Build and install the .vsix:
cd apps/pagani-vscode
pnpm build
pnpm package # creates pagani-vscode-0.1.0.vsix
Then in VS Code: Extensions > "..." menu > "Install from VSIX..."
Configuration
| Setting |
Default |
Description |
pagani.paganiDir |
"" |
Path to pagani source (auto-detected if empty) |
pagani.diagnostics.enabled |
true |
Enable/disable diagnostics |
pagani.diagnostics.severity |
"warning" |
Severity: error, warning, information, hint |
How It Works
- Activates when
@smallcase/pagani is detected in node_modules
- Parses all pagani CSS files and builds a token/class index
- Registers completion, hover, diagnostic, and color providers
- Watches pagani 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/pagani.
| |
