HAML - All in One
A powerful VS Code extension providing essential tools for efficient and seamless HAML development.


Features
The following features are supported to make your HAML development effortless:
Status |
Feature |
Requirement/Infos |
✅ |
Syntax Highlighting |
|
✅ |
Linter |
Rquire haml_lint gem |
✅ |
HAML Formatter |
Rquires haml_lint e rubocop gems |
✅ |
Partial: Go to Definition |
|
✅ |
Partial: Autocompletion |
|
✅ |
Routes: Autocompletion |
Rails Project |
✅ |
Routes: Go to Definition |
Rails Project |
✅ |
Split to Partial |
|
✅ |
Convert HTML/ERB to HAML |
html2haml gem |
✅ |
Snippets - HAML |
|
✅ |
Snippets - Rails |
|
✅ |
Live Preview |
Use HAML: Open Live Preview command |
Linting
This extension utilizes the haml-lint
and rubocop
gems for linting HAML files.
To configure, create a .haml-lint.yml
and .rubocop
files in your project root. Check the default configuration.
To install the gem, add this to your Gemfile
:
group :development, :test do
gem 'rubocop'
gem 'haml-lint', require: false
end
Features in Depth
Partials - Go to Definition
Navigate to a partial file by using CTRL + Click
on the partial name or right-click and select Go to Definition
.

Partials - Split to Partial
Easily extract content into a new partial. Select the content, click the Create a partial from selection
option in the Code Actions menu (lightbulb icon), and you're done!

Partial Completion
Autocomplete for partials based on the app/views
directory in your project.

Convert HTML/ERB to HAML
Convert existing HTML or ERB files to HAML using html2haml
.
Installation:
gem install html2haml
Usage:
- Open an HTML or ERB file.
- Open the Command Palette (
CTRL + SHIFT + P
).
- Search for
HAML: Convert HTML to HAML
and select it.
- Watch the magic happen!
Configuration
You can customize this extension by creating a .vscode/settings.json
file in your project root:
{
"hamlAll.lintEnabled": true,
// Use 'bundle exec' to run haml-lint.
// (If true, the 'linterExecutablePath' setting is ignored.)
"hamlAll.useBundler": false,
// Specify the path to the haml-lint executable.
"hamlAll.linterExecutablePath": "haml-lint"
}
Recommended Extensions
Enhance your experience with these complementary extensions:
- One Dark Dracula: A vibrant dark theme that pairs beautifully with this extension's syntax highlighting.
- Ruby LSP: Provides robust Ruby language support.
Acknowledgments
Special thanks to these extensions for inspiration and functionality:
License
This extension is released under the MIT License.