HAML Bootstrap Snippets & Class Autocomplete for VS Code

How to use Snippets

Version	Prefix
bootstrap 4.x	bs4-
bootstrap 5.x	bs5-

Example

bootstrap 5 button

-# bs5-button

%button.btn.btn-primary{type: 'button'}
  My Button

CSS Class completion

Enable/disable CSS class completion in the settings.

{
  "hamlBootstrap.enableCssClassCompletion": true
}

The current bootstrap version is determined by:

1. The version of the bootstrap package in the node_modules folder.
2. The version of the bootstrap gem in the Gemfile.lock file.
3. Latest version of the bootstrap package on CDN.

Bootstrap Icons completion

When the bootstrap-icons package is detected in your project, the bi-* icon classes are added to class completion alongside the Bootstrap classes.

Detection follows the same order as above (node_modules, then Gemfile.lock); if the package isn't found, no icon classes are suggested. Toggle it with:

{
  "hamlBootstrap.enableBootstrapIconsCompletion": true
}