A powerful VS Code extension providing essential tools for efficient and seamless HAML development.
The following features are supported to make your HAML development effortless:
| Status | Feature | Requirement/Infos |
|---|---|---|
| ✅ | Syntax Highlighting | |
| ✅ | Linter | Require haml_lint gem |
| ✅ | HAML Formatter | Requires haml_lint and rubocop gems |
| ✅ | Partial: Go to Definition | |
| ✅ | Partial: Autocompletion | |
| ✅ | Data Attributes Completion | HTML, Rails UJS, Turbo Rails & Stimulus |
| ✅ | 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 |
| ✅ | Wrap in Conditional | |
| ✅ | I18n Support | Rails Project |
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
endNavigate to a partial file by using CTRL + Click on the partial name or right-click and select Go to Definition.
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!
Quickly wrap selected HAML content in a conditional statement. Select any content, access the Code Actions menu (lightbulb icon), and choose Wrap in conditional. You'll be prompted to enter the condition (e.g., user.present?, @items.any?, etc.).
Example: Before:
%div.user-info
%h2= @user.name
%p= @user.emailAfter wrapping in conditional with @user.present?:
- if @user.present?
%div.user-info
%h2= @user.name
%p= @user.emailAutocomplete for partials based on the app/views directory in your project.
Smart autocompletion for HTML data attributes, with specific support for:
- HTML Common Attributes:
data-toggle,data-target,data-dismiss, etc. - Rails UJS:
data-confirm,data-method,data-remote,data-disable-with, etc. - Turbo Rails:
data-turbo,data-turbo-action,data-turbo-frame,data-turbo-stream, etc. - Stimulus:
data-controller,data-action,data-target, etc.
Works with all HAML attribute syntaxes:
%div{data_confirm: "Are you sure?"}
%form(data_remote: true, data_turbo_action: "replace")
%button{:data_disable_with => "Processing..."}Simply start typing data- in any attribute context and get intelligent suggestions with descriptions.
Convert existing HTML or ERB files to HAML using html2haml.
Installation:
gem install html2hamlUsage:
- Open an HTML or ERB file.
- Open the Command Palette (
CTRL + SHIFT + P). - Search for
HAML: Convert HTML to HAMLand select it. - Watch the magic happen!
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",
// I18n validation settings
"hamlAll.i18nValidation.enabled": true,
"hamlAll.i18nValidation.defaultLocale": "en"
}The extension provides I18n validation and completion features for Rails projects. You can configure these settings:
-
hamlAll.i18nValidation.enabled(boolean, default:true): Enable/disable I18n validation diagnostics. Set tofalseif you have dynamic I18n keys or prefer other validation tools. -
hamlAll.i18nValidation.defaultLocale(string, default: auto-detect): Set the default locale for I18n operations. If empty, the extension will auto-detect from Rails configuration or use common fallbacks (en,pt,pt-BR,es,fr).
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.
Special thanks to these extensions for inspiration and functionality:
- Better HAML (MIT License)
- Rails Open Partial (MIT License)
- HAML Lint (MIT License)
- Rails Partial (MIT License)
- Rails Routes (MIT License)
This extension is released under the MIT License.