# Hubl prettier plugin replaces code

**URL:** <https://community.hubspot.com/t/hubl-prettier-plugin-replaces-code/138157>\
**Category:** CMS Development\
**Tags:** local-development\
**Created:** [August 18, 2025, 12:54pm UTC](https://community.hubspot.com/t/hubl-prettier-plugin-replaces-code/138157 "2025-08-18T12:54:22Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![DAlfes](https://avatars.discourse-cdn.com/v4/letter/d/d2c977/32.png) [@DAlfes](https://community.hubspot.com/u/DAlfes)\
**Post date:** [August 18, 2025, 12:54pm UTC](https://community.hubspot.com/t/hubl-prettier-plugin-replaces-code/138157/1 "2025-08-18T12:54:22Z")

</div>

The recommended way to format Hubl code locally in an IDE is to use the Prettier plugin [GitHub - HubSpot/prettier-plugin-hubl · GitHub](https://github.com/HubSpot/prettier-plugin-hubl).  
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!

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [August 18, 2025, 3:51pm UTC](https://community.hubspot.com/t/hubl-prettier-plugin-replaces-code/138157/2 "2025-08-18T15:51:53Z")

</div>

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

![153470i00CE1F4A2E036881.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/7/f7a9893b2ff6d15e2dd7c0f6cafad17c1c171f85.png)

best,

Anton

---

<div class="post-metadata">

**Author:** ![chighsmith](https://avatars.discourse-cdn.com/v4/letter/c/77aa72/32.png) [@chighsmith](https://community.hubspot.com/u/chighsmith)\
**Post date:** [August 18, 2025, 8:59pm UTC](https://community.hubspot.com/t/hubl-prettier-plugin-replaces-code/138157/3 "2025-08-18T20:59:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DAlfes](https://avatars.discourse-cdn.com/v4/letter/d/d2c977/32.png) [@DAlfes](https://community.hubspot.com/u/DAlfes)\
**Post date:** [August 19, 2025, 7:43am UTC](https://community.hubspot.com/t/hubl-prettier-plugin-replaces-code/138157/4 "2025-08-19T07:43:28Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [August 19, 2025, 8:47am UTC](https://community.hubspot.com/t/hubl-prettier-plugin-replaces-code/138157/5 "2025-08-19T08:47:38Z")

</div>

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

 ![Bildschirmfoto 2025-08-19 um 10.38.01.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/1/0169c2a6b141d397c62bda61cab0ddfb178d0136.png)

as well as something like

 ![Bildschirmfoto 2025-08-19 um 10.36.10.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/d/fdc7f0f78c924b7f9a78b7a11dc2c7c1354bcbb3.png)

 ![Bildschirmfoto 2025-08-19 um 10.39.32.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/4/4537d73807f3aaa8c49e6c924e01ad86174a04db.png)

Just read the description of the extension again and remembered that you need to add accociations manually.

> - In VSCode, press `CMD + SHIFT + P` to 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-hubl` and `*.css: css-hubl`
> - For more information about how VSCode settings work, [please read the official VS Code documentation](https://code.visualstudio.com/docs/getstarted/settings).
> 
> * * *

Here’s mine (open the user settings JSON file):

```lia-code-sample
{
 "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

```lia-code-sample
"files.associations": {
 "html-hubl": "html",
 "css-hubl": "css"
 },

```

Try pasting this into your config

best,

Anton

---

<div class="post-metadata">

**Author:** ![DAlfes](https://avatars.discourse-cdn.com/v4/letter/d/d2c977/32.png) [@DAlfes](https://community.hubspot.com/u/DAlfes)\
**Post date:** [August 20, 2025, 5:11am UTC](https://community.hubspot.com/t/hubl-prettier-plugin-replaces-code/138157/6 "2025-08-20T05:11:33Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [August 20, 2025, 7:39am UTC](https://community.hubspot.com/t/hubl-prettier-plugin-replaces-code/138157/7 "2025-08-20T07:39:25Z")

</div>

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

 ![153614iFD2B157D2846A567.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/3/937d7114d8d8a9625462434a73a45e3d17afad25.png)

 ![153615i7025ED2417BC11E7.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/7/f75034f896a11cf6d13ab063ce7300fbf8330779.png)

And my settings when I search for “formatt” (because “format” will display to many, “formatter” too few options)

 ![153616iF09F7F4EE203542B.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/6/f6d1568764b8cc911e83fe3400f630af5556866d.png)

Hope this helps

best,

Anton

---

<div class="post-metadata">

**Author:** ![DAlfes](https://avatars.discourse-cdn.com/v4/letter/d/d2c977/32.png) [@DAlfes](https://community.hubspot.com/u/DAlfes)\
**Post date:** [August 21, 2025, 6:31am UTC](https://community.hubspot.com/t/hubl-prettier-plugin-replaces-code/138157/8 "2025-08-21T06:31:45Z")

</div>

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