Hypen Language Server (LSP)

The Hypen Language Server provides IDE support for VSCode, Cursor, and other LSP-compatible editors. It makes writing Hypen code faster and more productive with features like auto-completion, error detection, and formatting.

Features

Syntax Highlighting

Beautiful color themes that highlight Hypen syntax including:

• Component names
• Applicators
• State references
• Actions
• Strings, numbers, and other values

Real-Time Error Detection

Catch errors as you type:

• Unclosed braces, parentheses, or strings
• Invalid syntax structures
• Warnings for common mistakes (e.g., lowercase component names)

Auto-Completion

Intelligent suggestions triggered with Ctrl+Space or automatically:

Components - Type a capital letter to see component suggestions:

Col  // suggests: Column, Container, Card

Applicators - Type . after a component to see styling options:

Text("Hello")
  .  // suggests: padding, color, fontSize, fontWeight...

References - Type @ to see state and action completions:

Button(onClick: @  // suggests: @actions, @state

Argument Values - Context-aware value suggestions:

Text("Hello")
  .color(  // suggests: red, blue, green, primary, secondary...

Hover Documentation

Hover over any component or applicator to see documentation:

Text - Hypen Component
Displays text content with optional styling.

Document Outline

Navigate your component hierarchy in the outline view. See all components at a glance and jump to any location.

Code Formatting

Format your Hypen files with proper indentation:

• Right-click → Format Document
• Or press Shift+Alt+F (Windows/Linux) / Shift+Option+F (Mac)

Before:

Column{
Text("Hello")
.fontSize(24)
Button{Text("Click")}
}

After:

Column {
  Text("Hello")
    .fontSize(24)
  Button {
    Text("Click")
  }
}

Installation

From VSIX (Recommended)

1. Download the latest .vsix file from releases
2. Open VSCode or Cursor
3. Go to Extensions (Ctrl+Shift+X)
4. Click the ... menu → Install from VSIX
5. Select the downloaded file
6. Reload the window

From Source

cd hypen-lsp
npm install
npm run compile

Then press F5 in VSCode to launch the extension in development mode.

Building VSIX Package

npm install -g @vscode/vsce
cd hypen-lsp
npm run package

This creates a .vsix file you can install or distribute.

Configuration

Configure the extension in your VSCode/Cursor settings:

{
  "hypen.trace.server": "off",           // Debug LSP communication (off/messages/verbose)
  "hypen.maxNumberOfProblems": 100,      // Max diagnostics to show
  "hypen.formatting.enable": true        // Enable/disable auto-formatting
}

Supported Components

The LSP provides completions and documentation for all built-in components:

Layout: Column, Row, Container, Stack, Center, Grid, List, Spacer, Divider

Content: Text, Image, Card

Input: Button

Supported Applicators

The LSP provides completions for common applicators:

Spacing: padding, margin, marginTop, marginBottom, marginLeft, marginRight, paddingTop, paddingBottom, paddingLeft, paddingRight

Typography: fontSize, fontWeight, fontStyle, lineHeight, textAlign, textDecoration, color

Layout: width, height, maxWidth, maxHeight, minWidth, minHeight, alignItems, justifyContent, flexDirection

Visual: backgroundColor, border, borderRadius, borderColor, borderWidth, boxShadow, opacity

Interactive: onClick, onHover, cursor

Keyboard Shortcuts

Troubleshooting

Extension doesn't activate

• Ensure the file has a .hypen extension
• Try reloading the window (Ctrl+Shift+P → "Reload Window")
• Check the Output panel for errors (View → Output → select "Hypen")

Completions not appearing

• Try manually triggering with Ctrl+Space
• Check if you're inside a string (completions don't appear in strings)
• Ensure the LSP server is running (check Output panel)

Syntax highlighting issues

• Try changing the color theme
• Ensure no other extension is overriding .hypen file association

Editor Support