Back in April, I introduced Herb, a new HTML-aware ERB parser. Herb was designed from the ground up to deeply understand .html.erb files, preserving both HTML and embedded Ruby structure without losing any details.
It laid the technical foundation for a modern, robust developer experience around HTML+ERB. But at the time, Herb was mostly “infrastructure”, useful for tool builders, but not something most developers could immediately plug into their daily workflow and make use of.
Today, that changes.
I’m excited to announce the release of the Herb Language Server and the Visual Studio Code Extension.
Bringing Herb to Your Editor
With the new Herb Language Server and Visual Studio Code Extension, Herb is now directly usable in your everyday development environment.
- Diagnostics: Catch unclosed tags, mismatched elements, invalid nesting, and ERB syntax issues
- Instant Feedback: See errors and warnings as you type, not after you reload your app or run a linter
- Whitespace-Aware Formatting (soon): Because Herb preserves exact structure and can fully understand every detail about your view files, it will be able to quickly auto-format HTML+ERB files on save.
Unlike many existing tools, Herb tries to treat HTML+ERB templates as they are: a mix of markup and Ruby code. This makes it possible to provide feedback that’s a bit more aware of how HTML+ERB views are usually written.
Right now, we only provide a pre-packaged Visual Studio Code extension. But since the language server follows the standard Language Server Protocol (LSP), it can be integrated into any editor that supports LSP, including Vim, Neovim, Zed, RubyMine, and many others.
If you’re interested in helping build or improve integrations for other editors, I’d be happy to collaborate.
Why This Matters
Ruby and Rails developers write a lot of HTML+ERB. Especially now with all the popularity around Hotwire, Turbo, Stimulus, HTMX and similar tools.
And yet, for years, ERB tooling has lagged behind nearly every other part of the modern development stack. No great formatter. Limited linting. Barely any language-server support. And definitely no structural understanding of how HTML and Ruby interleave.
Herb changes that. With this release, we’re one step closer to giving Ruby developers the kind of real-time, context-aware feedback that frontend developers have come to expect from their TypeScript, JSX, React or Vue tooling.
Easy to Install, Easy to Use
The Visual Studio Code Extension is available now on the Visual Studio Code Marketplace.
- Search for “Herb LSP - HTML+ERB Language Tools” in VS Code extensions
- Install and open any
.html.erbfile - The extension activates automatically
The language server is fully open source, built directly on top of Herb’s C-powered parser with the JavaScript/Node.js and WebAssembly bindings.
A Foundation for More
This is just the beginning. With Herb’s parser and language server in place, future additions are already on the roadmap:
- Auto-formatting with safe whitespace-preserving transformations
- Better inline go-to-definition and symbol navigation for embedded Ruby
- Cross-file component and partial analysis
- Turbo and Stimulus LSP integration
- Rails-aware template diagnostics
- and a lot more!
The long-term goal remains the same: make .html.erb files as productive, reliable, and enjoyable to work with as any modern frontend framework.
A Step Toward Broader Integration
This release is just the first step in making Herb more widely available. The goal is to get it into the hands of developers so it can be tested, battle-hardened, and refined against real-world HTML+ERB code.
Long-term, I hope Herb won’t stay as a standalone language server forever. My goal is to collaborate with other tool developers and see Herb’s parser integrated wherever it makes sense, inside formatters, linters, Rails developer tools, and ideally directly into existing tools like the Ruby LSP.
In the best case, one day this standalone Herb Language Server won’t even need to exist because its capabilities will have been folded into the standard Ruby tooling experience, no extra installs, no configuration, just better HTML+ERB support by default.
Help Improve the Herb Parser
In the meantime, while Herb already handles a wide range of real-world ERB templates, there’s always room to improve. You can help make Herb even better by running it on your own projects and reporting any issues it finds.
Simply run these commands in your project:
cd your_project/ gem install herb herb analyze . # analyze all *.html.erb in the current directoryherb analyze app/views # or just inside a specific directoryThis will analyze your HTML+ERB files and highlight any edge cases or parser errors. If it breaks on your files, that’s great! Every edge case helps improve the parser and strengthen Herb for everyone.
If you have any failing files it’s either because you actually have a legit error in your view file or because the parser timed out while trying to parse your file. You will see that it generates a .log file which will have more details.
If you are able to, I would appreciate if you could open an issue with the template content. If you can’t share the content of the view files directly, it would mean a lot if you could try to isolate/replicate the error.
Try It Today
If you write HTML+ERB views, I encourage you to try it out.
- Visual Studio Code Extension: Herb LSP - HTML+ERB Language Tools
- Herb Language Server: GitHub repo
As always, feedback is welcome and appreciated. This is a community effort, and the more real-world projects Herb sees, the better the tools will become.
Podcast Appearance: Talking about Herb
If you’re curious to hear a bit more of the background story behind Herb, I recently joined Jared Norman on his podcast Dead Code to talk about the project, developer tooling, and parsing in general.
You can listen to the episode here: Herbicide with Marco Roth.
Thanks to everyone who supported the initial Herb parser launch. With the Language Server and Visual Studio Code extension, we’re finally turning that low-level parser into something you can see and feel, every day, inside your editor.
Marco
Code blocks highlighted by Torchlight.