https://github.com/wilfison/vscode-haml-all
VS Code extension to provides syntax highlighting, linting, go to definition, and snippets for Ruby Haml files.
https://github.com/wilfison/vscode-haml-all
erb extension haml ruby vscode vscode-extension
Last synced: 3 months ago
JSON representation
VS Code extension to provides syntax highlighting, linting, go to definition, and snippets for Ruby Haml files.
- Host: GitHub
- URL: https://github.com/wilfison/vscode-haml-all
- Owner: wilfison
- License: mit
- Created: 2024-11-09T17:50:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-30T13:50:51.000Z (about 1 year ago)
- Last Synced: 2025-07-06T01:05:17.608Z (about 1 year ago)
- Topics: erb, extension, haml, ruby, vscode, vscode-extension
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=wilfison.haml-all
- Size: 2.86 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# HAML - All in One
A powerful VS Code extension providing essential tools for efficient and seamless HAML development.
[](https://marketplace.visualstudio.com/items?itemName=wilfison.haml-all) [](https://marketplace.visualstudio.com/items?itemName=wilfison.haml-all) [](https://marketplace.visualstudio.com/items?itemName=wilfison.haml-all)
## Features
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`](https://github.com/haml/html2haml) gem |
| ✅ | Snippets - HAML | |
| ✅ | Snippets - Rails | |
| ✅ | Live Preview | Use `HAML: Open Live Preview` command |
| ✅ | Wrap in Conditional | |
| ✅ | I18n Support | Rails Project |
---
## 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](https://github.com/sds/haml-lint/blob/main/config/default.yml).
**To install the gem, add this to your `Gemfile`:**
```ruby
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!
### Wrap in Conditional
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:
```haml
%div.user-info
%h2= @user.name
%p= @user.email
```
After wrapping in conditional with `@user.present?`:
```haml
- if @user.present?
%div.user-info
%h2= @user.name
%p= @user.email
```
### Partial Completion
Autocomplete for partials based on the `app/views` directory in your project.
### Data Attributes Completion
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:
```haml
%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 HTML/ERB to HAML
Convert existing HTML or ERB files to HAML using `html2haml`.
**Installation:**
```shell
gem install html2haml
```
**Usage:**
1. Open an HTML or ERB file.
2. Open the Command Palette (`CTRL + SHIFT + P`).
3. Search for `HAML: Convert HTML to HAML` and select it.
4. Watch the magic happen!
---
## Configuration
You can customize this extension by creating a `.vscode/settings.json` file in your project root:
```json
{
"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"
}
```
### I18n Configuration
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 to `false` if 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`).
---
## Recommended Extensions
Enhance your experience with these complementary extensions:
- [One Dark Dracula](https://marketplace.visualstudio.com/items?itemName=wilfison.one-dark-dracula): A vibrant dark theme that pairs beautifully with this extension's syntax highlighting.
- [Ruby LSP](https://marketplace.visualstudio.com/items?itemName=Shopify.ruby-lsp): Provides robust Ruby language support.
---
## Acknowledgments
Special thanks to these extensions for inspiration and functionality:
- [Better HAML](https://github.com/karuna/haml-vscode/) (MIT License)
- [Rails Open Partial](https://github.com/shanehofstetter/rails-open-partial-vscode) (MIT License)
- [HAML Lint](https://github.com/aki77/vscode-haml-lint) (MIT License)
- [Rails Partial](https://github.com/aki77/vscode-rails-partial) (MIT License)
- [Rails Routes](https://github.com/aki77/vscode-rails-routes) (MIT License)
---
## License
This extension is released under the [MIT License](./LICENSE).