Skip to content

VS Code extension to provides syntax highlighting, linting, go to definition, and snippets for Ruby Haml files.

License

Notifications You must be signed in to change notification settings

wilfison/vscode-haml-all

Repository files navigation

HAML - All in One

A comprehensive VS Code extension that equips you with essential tools for 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",

  // Enable HAML formatting on save.
  "hamlAll.formatOnSave": true
}

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.

About

VS Code extension to provides syntax highlighting, linting, go to definition, and snippets for Ruby Haml files.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published