# VS Code Formatting Problem

**URL:** <https://community.hubspot.com/t/vs-code-formatting-problem/84886>\
**Category:** CMS Development\
**Created:** [July 7, 2023, 10:44am UTC](https://community.hubspot.com/t/vs-code-formatting-problem/84886 "2023-07-07T10:44:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![sfarikdg](https://avatars.discourse-cdn.com/v4/letter/s/b5e925/32.png) [@sfarikdg](https://community.hubspot.com/u/sfarikdg)\
**Post date:** [July 7, 2023, 10:44am UTC](https://community.hubspot.com/t/vs-code-formatting-problem/84886/1 "2023-07-07T10:44:53Z")

</div>

Hello fellow devs,  
I’d like some recommendations on how to solve my VS Code issue. My development experience so far for HTML + Hubl has been terrible. I’d like some ideas how to solve this formatting issue? As per screenshot, after formatOnSave, all HUBL becomes barely readable. Compared to development videos and resources, formatting didn’t become an issue to them.

![sfarikdg_0-1688726187253.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/d/7dd07faba8f31d4ed89bee1e0b9513a436679454.png)

Instance.

 ![sfarikdg_1-1688726506452.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/b/2b30ad87db2e6ee4adc5129454be3bb860c39033.png)

Extensions installed  
HTML CSS Support by ecmel  
Hubspot  
indent-rainbow  
Pieces for VS Code  
Prettier  
Snippet Creator  
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:** [July 7, 2023, 10:18pm UTC](https://community.hubspot.com/t/vs-code-formatting-problem/84886/2 "2023-07-07T22:18:37Z")

</div>

Hi @sfarikdg,

have you configured VS code the right way after installing the HubSpot addon?

 ![Bildschirmfoto 2023-07-08 um 00.14.10.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/70da0501b320399ca4e5f48becb4d558966744fe.png)

In the settings(search for “Files”)

 ![Bildschirmfoto 2023-07-08 um 00.15.31.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/c/2cdd48f0c56ba8c552f80eadecae9412b28cadf0.png)

also ma ke sure to switch to the correct language while working with Hubl

![Bildschirmfoto 2023-07-08 um 00.17.57.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/8/2/8266bc8ed6d47a55f0ba1d7147ff155ad26be707.png)

hope this helps,

best,

Anton

---

<div class="post-metadata">

**Author:** ![sfarikdg](https://avatars.discourse-cdn.com/v4/letter/s/b5e925/32.png) [@sfarikdg](https://community.hubspot.com/u/sfarikdg)\
**Post date:** [July 8, 2023, 3:05am UTC](https://community.hubspot.com/t/vs-code-formatting-problem/84886/3 "2023-07-08T03:05:16Z")

</div>

Thank you @Anton for your feedback.  
Sorry, I have setup those also, my fault I did not include those information. I have these on my workspace settings. I’ve followed ( i know i did, but double checking hehe ) on the plugin’s instructions before posting this, but still have the problem. I’ve added the ones in green, like on your screenshot. I’m not sure if it’s a language version thing, but it’s quite different from the plugin instructions. I tested it anyway, but no luck.

 ![sfarikdg_1-1688785279473.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/a/b/abe171176c6180c572bbb03cbaba8a9a70d2dcf3.png)

 ![sfarikdg_2-1688785407616.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/d/bdae84ea58424767829cb8542c30ba65ab4a6e7c.png)

Your time and time and help is very much appreciated

---

<div class="post-metadata">

**Author:** ![aureliocampos](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/aureliocampos/32/58551_2.png) [@aureliocampos](https://community.hubspot.com/u/aureliocampos)\
**Post date:** [September 29, 2023, 1:07am UTC](https://community.hubspot.com/t/vs-code-formatting-problem/84886/4 "2023-09-29T01:07:43Z")

</div>

Esse realmente é um problema terrível do hubl, com certeza mais gente vai passar por isso, então, vou compartilhar uma solução para mim, insira o código a seguir no settings.json do vscode e veja se ele salva sem a formatação estranha.

```lia-code-sample
 "hubspot.beta": true,
 "[hubl]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[html-hubl]": {
 "editor.formatOnSave": false,
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "editor.wordBreak": "normal",
 "editor.rulers": [
 80
 ],
 "editor.tabSize": 2
 },

```