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:

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!

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:

%div.user-info
  %h2= @user.name
  %p= @user.email

After wrapping in conditional with @user.present?:

- 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:

%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:

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:

{
  "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:

• Better HAML (MIT License)
• Rails Open Partial (MIT License)
• HAML Lint (MIT License)
• Rails Partial (MIT License)
• Rails Routes (MIT License)

License

This extension is released under the MIT License.