VS Code Extensions

To enhance your development experience with Sapling, we recommend installing the following VS Code extensions:

Essential Extensions

1. UnoCSS

UnoCSS

This extension provides intelligent autocomplete and hover previews for UnoCSS classes. Since Sapling uses UnoCSS for styling, this extension will greatly improve your development experience by:

  • Providing intelligent class name suggestions
  • Showing hover previews of the generated CSS
  • Supporting custom rules and configurations
  • Offering quick completions for utility classes

2. Lit Plugin

Lit Plugin

While Sapling doesn't use Lit directly, this extension provides excellent support for HTML template literals, which are a core part of Sapling's templating system. Key features include:

  • Syntax highlighting for HTML template literals
  • Type checking in template expressions
  • Auto-completion for HTML tags and attributes
  • Quick info on hover
  • Go to definition support

Installation

The easiest way to install these extensions is to add them to your workspace recommendations. Create or edit .vscode/extensions.json in your project root with the following content:

{
  "recommendations": [
    "antfu.unocss",
    "runem.lit-plugin"
  ]
}

VS Code will automatically prompt you to install these recommended extensions when opening the project for the first time.

Additional Benefits

These extensions work together to provide a seamless development experience:

  • Improved Code Intelligence: Get better type checking and autocompletion for both your HTML templates and CSS classes
  • Enhanced Productivity: Save time with intelligent suggestions and quick documentation access
  • Better Error Detection: Catch potential issues early with built-in type checking and validation
  • Modern Development: Full support for the modern development features that Sapling provides