Using Herb with Visual Studio Code

A Visual Studio Code extension that provides HTML+ERB language support with linting, formatting, and intelligent code analysis using the Herb HTML-aware ERB parser.

---

Installation

Visual Studio Code

Install the Herb extension from the Visual Studio Marketplace, or click here to open it directly in VS Code.

Other editors

If you are looking to use Herb in another editor, check out the instructions on the editor integrations page.

Configuration

The extension can be configured through VS Code settings or a .herb.yml file in your project root. Project configuration in .herb.yml takes precedence over VS Code settings.

See the Configuration documentation for full details.

VS Code Settings

• languageServerHerb.linter.enabled (boolean, default: true) - Enable/disable the linter
• languageServerHerb.formatter.enabled (boolean, default: false) - Enable/disable the formatter

Example configuration in settings.json:

{
  "languageServerHerb.linter.enabled": true,
  "languageServerHerb.formatter.enabled": true
}

Functionality

Diagnostics

• Missing HTML opening tags (MissingOpeningTagError)
• Missing HTML closing tags (MissingClosingTagError)
• Mismatched HTML attribute quotes (QuotesMismatchError)
• Ruby syntax errors (Ruby Syntax Error) (via Prism) (RubyParseError)
• Mismatched HTML tag names (TagNamesMismatchError)
• Unclosed elements at the end of the document (UnclosedElementError)
• (UnexpectedTokenError)
• (VoidElementClosingTagError)

Formatting (coming soon)

Formatting and Auto-formatting are underway. We are planning to integrate the Herb Formatter directly and conveniently into the Visual Studio Code extension.

Roadmap/Ideas

Check-out the roadmap/issues on GitHub or suggest a new featured that you would like to see integrated into the Visual Studio Code extension.