The recommended way to format Hubl code locally in an IDE is to use the Prettier plugin GitHub - HubSpot/prettier-plugin-hubl · GitHub.
Basically, the tool works quite well.
However, the plugin also makes critical changes to the code.
For example…
BEFORE:
{% set slug = row.values[6] %}
AFTER:
{% set slug = row.values. %}
The index and the brackets gets replaced by a dot!
Does anyone know this problem and possibly have a workaround?
I use the recommended plugin version 0.2.5 in combination with prettier 2.8.8.
This problem has been fixed in newer versions, but instead i encountered several other critical code-replacements.
There must be a way to format Hubl code cleanly and reliably.
Thanks in advance!
Hey @DAlfes,
I got prettier installed, but I think I’m not using it (for some other formatting issues).
What’s your default formatter set in the settings?
Mine is set to HubSpot and it does a great job
best,
Anton
Hi @DAlfes,
Thank you for posting to the Community! I’d like to tag in some of our Top Contributors to see if they have any workarounds on this -- @alyssamwilie @Indra and @jonchim Do any of you all have any tips for @DAlfes?
Cassie, Community Manager
Hi @Anton ,
and auto formatting works with this setting?
Mine was set to prettier and i changed it now to Hubspot as well.
But now, if i want to format the code, i got an alert saying “There is no formatter for ‘html-hubl’ files installed.” I already had the Hubspot VSC Extension installed before.
As i started using hubspot i first also used only the VSCode Extension and it offers Syntax-Highlighting and other things but what i really missed was a proper code formatting regarding indentation, line-breaks, etc. which is why i moved to the prettier approach with the appropriate hubspot-plugin mentioned before.
And there i got also a lot of strange behaviours when it comes to code-formatting.
But i think there must be a reliable way for auto-formatting hubl-code or do i just missed an important setting?
Hey @DAlfes,
the HubSpot VSCode/Cursor extension is highly recommended (and I think required) as this will make your life way more easy by providing functions like this
as well as something like
Just read the description of the extension again and remembered that you need to add accociations manually.
- In VSCode, press
CMD + SHIFT + Pto open the command prompt- Search for and select the command
Preferences: Open User Settings- Choose either the “User” or “Workspace” tab to apply these settings
- In “Search settings” look up
files.associations- Select “Add Item” and add these file associations:
*.html: html-hubland*.css: css-hubl- For more information about how VSCode settings work, please read the official VS Code documentation.
Here’s mine (open the user settings JSON file):
{
"files.associations": {
"html-hubl": "html",
"css-hubl": "css"
},
"prettier.useTabs": true,
"editor.defaultFormatter": "HubSpot.hubl",
"html.format.templating": true,
"editor.formatOnSave": true,
"prettier.printWidth": 200,
"prettier.singleQuote": true,
"prettier.requirePragma": true,
"prettier.vueIndentScriptAndStyle": true,
"git.enableSmartCommit": true,
"git.confirmSync": false,
"git.autofetch": true,
"tabnine.experimentalAutoImports": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.jsxSingleQuote": true,
"prettier.quoteProps": "preserve",
"workbench.iconTheme": "material-icon-theme",
"security.workspace.trust.untrustedFiles": "open",
"prettier.tabWidth": 4,
"prettier.ignorePath": "",
"window.zoomLevel": 1,
"editor.stickyScroll.enabled": true,
"workbench.colorTheme": "Canvas",
"debug.javascript.autoAttachFilter": "smart",
"workbench.startupEditor": "none",
"javascript.updateImportsOnFileMove.enabled": "always",
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"editor.defaultFoldingRangeProvider": "HubSpot.hubl",
"notebook.defaultFormatter": "HubSpot.hubl",
"hubspot.hublLinting": true
}
you might need to edit it as I got the material-icon-theme as well as the Canvas theme (both are free extensions), GitHub extension and a few other things.
Most important part in this file is
"files.associations": {
"html-hubl": "html",
"css-hubl": "css"
},
Try pasting this into your config
best,
Anton
Thanks @Anton for your feedback.
If i remember correctly, that’s quite the same setup, as i started working with hubspot.
But with no correct indentation of hubl-code.
Could you please confirm, that especially the indentation of hubl code works with this setup?
Then i would give it another try.
We have a bunch of unformatted code and we need to ensure, that it gets more readable by having correctly indented code.
Thanks 
Hey @DAlfes,
I can’t guarantee it, because it’s been a few days since I’ve set it up and I remember changing other stuff in VSCode/Cursor, but here’s a list of all extensions I got installed:
- Canvas Theme (optional)
- Container tools (not required; comes with the Docker extension)
- Cursor Pyright (not required; comes with Cursor)
- Docker(not required)
- Figma for VSCode (not required)
- German language pack (not required)
- HubSpot (imo required)
- markdownlint (optional; helps formating JSON files)
- Material Icon Theme (optional)
- Multiple cursor case preserver (optional)
- Prettier (required)
- Pylance (not required; comes with Python extension)
- Python (not required)
- Python Debugger (not required; comes with Python extension)
- Smart Multi-cursor (optional)
- Stream Deck for VSCode (not required unless you got an Elgato Streamdeck and want to use it for code)
Also, here’s a screen of my prettier settings
And my settings when I search for “formatt” (because “format” will display to many, “formatter” too few options)
Hope this helps
best,
Anton
Hi @Anton ,
i took over all your settings, but unfortunately the code still doesn’t gets properly formatted.
Nested if/else structures or multiple variable declarations with {% set …} are displayed in one line, no matter what settings i change.
And also the documentation does not say anything about code formatting.
What it supports is syntax highlighting, autocompletion, code-snippets and other stuff which is great.
But no formatting.
Our team tooks over a hubspot project, where all the modules were developed in hubspot’s design manager and it’s quite unreadable because it’s not properly formatted.
And after spending hours on research, i now come to the conclusion that there is no way to auto-format a bunch of files with hubl- code which is quite frustrating.
The hubspot prettier-extension does format the code quite well, but on the other hand it’s quite buggy because it does some real strange code-replacements wherefore it is too dangerous to use it.
Regards,
Daniel