Skip to content

No working formatter for HTML+HubL files #309

@sasha-rp

Description

@sasha-rp

Short version

I keep geting this error when trying to format an html file:

  • "There is no formatter for 'html-hubl' files installed."
Image

Long version:

Describe the bug

The HubSpot VS Code extension registers .html files as the custom language ID html-hubl, but does not provide a formatter for this language. This prevents any formatter (including HubSpot's own @hubspot/prettier-plugin-hubl) from working via keyboard shortcuts or format-on-save in the editor.

This creates a catch-22:

  • If files are set to html-hubl language → HubSpot, most features work BUT no formatter can be used
  • If files are set to html language, then Prettier formatting works BUT HubSpot extension features (syntax highlighting, HubL comments, etc.) are lost.

To Reproduce

  1. Install HubSpot VS Code extension
  2. Open any .html file containing HubL (set language mode to html-hubl)
  3. Attempt to format with Alt+Shift+F (or Format Document)
  4. See error: "There is no formatter for 'html-hubl' files installed"

Expected behavior

The extension should either:

  1. Register a formatter for the html-hubl language ID that uses @hubspot/prettier-plugin-hubl, OR
  2. Allow the Prettier extension to recognize html-hubl as a formattable language

Environment Versions:

  • HubSpot VSCode Extension version: latest
  • OS: macOS 24.6.0

Additional context

The @hubspot/prettier-plugin-hubl package works perfectly from the command line:

./node_modules/.bin/prettier --write "path/to/file.html"

However, the Prettier VS Code extension (esbenp.prettier-vscode) does not recognize html-hubl as a valid language ID, even with the plugin installed locally.

This is particularly ironic given that HubSpot's Developer Experience team actively encourages CLI-based local development workflows over using Design Manager. Yet Design Manager has a built-in format button that works, while the CLI + VS Code workflow has no functional formatter integration.

Many developers in the HubSpot community have struggled with this issue (see Slack developer forums), and current "solutions" involve either:

  • Losing HubSpot extension features by changing language to plain html
  • Manually running Prettier from terminal for every file
  • Using Design Manager for formatting (defeating the purpose of local dev)

This should be core DX functionality for anyone building HubL templates locally.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions