VS Code Formatting Problem

[sfarikdg]

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.

Instance.

Extensions installed
HTML CSS Support by ecmel
Hubspot
indent-rainbow
Pieces for VS Code
Prettier
Snippet Creator
Thanks in advance

[Anton]

Hi @sfarikdg,

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

In the settings(search for “Files”)

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

hope this helps,

best,

Anton

[sfarikdg]

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.

Your time and time and help is very much appreciated

[aureliocampos]

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.

 "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
 },