Prettier in VS Code keeps breaking the line

Viewed 2327

So, I'm using VS Code with an extension called Prettier. The problem is that after I hit save my code is being "refined" but also separated into 2 lines even despite the fact it's a very short line and I still have plenty of space on the right. Could you please advice what setting is responsible for this conversion? It seems to me that I have checked all available options but unfortunately couldn't find anything which causes it.

enter image description here

2 Answers

"prettier.printWidth": "80"

in your settings.json or search for print width setting in the UI

Increase or decrease this setting. This limits the number of characters prettier limits a line to, it it exceeds this, it will try to break it into smaller ones.

Search for settings.json in visual studio. You will find a json file in this path AppData\Roaming\Code\User\settings.json if it is a windows machine.

Add the below JSON in the file, If you keep "editor.formatOnSave" as false formatting won't happen when you save the file. If you want to have this setting just make a specific property as false just the way I did for javascript and HTML in the below section.

"editor.formatOnSave": false,
  "[handlebars]": {
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[html]": {
    "editor.formatOnSave": false
  },
  "[less]": {
    "editor.formatOnSave": true
  },
Related