Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>HAML - All in OneNew to Visual Studio Code? Get it now.
HAML - All in One

HAML - All in One

Wilfison

|
341 installs
| (2) | Free
Including syntax highlighting, linting, formatting, and additional features.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

HAML - All in One

A powerful VS Code extension providing essential tools for efficient and seamless HAML development.

VSCode Marketplace Total Installs Average Rating

Linting Preview

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.

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!

Split to Partial

Partial Completion

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

Partial Completion

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.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft