Vestra VS Code Extension

⚠️ WARNING: EXPERIMENTAL
This extension is for an experimental language that is not ready for use. See vestra disclaimer.

Syntax highlighting and snippets for VES (Visual Element Styling) files.

Features

• Syntax Highlighting for .ves files
• Code Snippets for common VES patterns
• Auto-completion for VES keywords
• Bracket Matching and auto-closing
• Comment Support (// and /* */)

Installation

From VSIX (Local)

1. Download the .vsix file
2. In VS Code: Extensions → ... menu → Install from VSIX
3. Select the downloaded file

From Marketplace (Future)

ext install vestra.vestra-vscode

Supported Syntax

Keywords & Directives

• @theme, @use, @mixin, @include, @scope
• @accessible, @focus-ring, @reduced-motion, @readable
• @tablet, @desktop, @mobile
• @media

Functions

• @spacing(), @type-scale(), @contrast()
• @optimal-line-height, @fluid-type()
• lighten(), darken(), alpha(), saturate(), desaturate(), mix()

Theme Variables

• @primary, @secondary, @error, etc.
• @font-family, @spacing, @type-scale

Special Values

• golden-ratio, fibonacci

Code Snippets

Type these prefixes and press Tab:

• theme → Theme definition
• button → Button component
• card → Card component
• accessible → Accessible directive
• reduced → Reduced motion directive
• tablet → Tablet breakpoint
• desktop → Desktop breakpoint
• use → Import statement
• mixin → Mixin definition
• include → Include mixin
• spacing → Spacing function
• contrast → Contrast function

Example

:root {
  @theme {
    primary: #3B82F6;
    spacing: golden-ratio;
  }
}

.button {
  padding: @spacing(2);
  background: @primary;
  color: @contrast(@primary);
  
  @accessible {
    min-height: 44px;
  }
  
  &:hover {
    background: lighten(@primary, 10%);
  }
}

Building the Extension

# Install vsce
npm install -g @vscode/vsce

# Package the extension
cd vscode-extension
vsce package

# This creates vestra-vscode-0.1.0.vsix

Publishing to Marketplace

# Login to Azure DevOps
vsce login vestra

# Publish
vsce publish

Development

1. Open vscode-extension/ in VS Code
2. Press F5 to launch Extension Development Host
3. Open a .ves file to test syntax highlighting
4. Make changes to syntaxes/ves.tmLanguage.json
5. Reload window (Cmd+R) to see changes

Known Issues

• IntelliSense/autocomplete not yet implemented (requires language server)
• No error checking (requires language server)
• No formatting support

Roadmap

• [ ] Language server for IntelliSense
• [ ] Error diagnostics
• [ ] Auto-formatting
• [ ] Hover documentation
• [ ] Go to definition
• [ ] Refactoring support

License

MIT

Links

• Vestra on GitHub
• Report Issues
• Documentation