How do you stop Prettier in VS code splitting attributes onto multiple lines?

28
votes

I am using prettier to format my code in VS Code but I really dislike how it does it.

My main beef is it splitting attributes over multiple lines.

<input
    type="checkbox"
    name="asiaNews"
    id="asiaNews"
    value="asiaNews"
/>

I'd much prefer it to look like this 

<input type="checkbox" name="asiaNews" id="asiaNews" value="asiaNews" />

I can't find anything in the docs or on SO

How to prevent VS Code from breaking up long HTML lines into multiple lines?

Is there a way to do it or a different tool that I can use so I can have my own custom formatting rules that suits my sensibilities?

6
htmlvisual-studio-codeformattingprettier
I think it must have to do with your printWidth settings since it will only break your attributes into multiple lines if you're over the printWidth limit. You can test things out in the prettier playground: prettier.io/playground If you're over the printWidth I don't think there is anything you can do to prevent the attributes from going over multiple lines while using prettier. – Robert Cooper

6 Answers

12
votes

A quick fix is to go to Prettier Extension Settings (ctrl + shift + X) and in Prettier Extension Settings search for "Print Width" set it to 250 or anything that works for you.

1: Go to Extention Settings:

Prettier Extension Settings

2: Change the value of Print Width to your liking.

Changing the value of Print Width

To disable format code on save. Turn off the "Format On Save" and use Alt+Shift+F to format the code when ever you want.

Disable or enable Format On Save

You can visually check the setting here

8
votes

After Trying A lot, I came up with below solution.

  1. Disable prettier for html files and use the default formatter provided by VS code.
  2. Set the line length as per the requirements. (I set it to 100)

Here is my settings.json looks like after above changes.

{
  "editor.formatOnSave": true,
  "html.format.wrapLineLength": 100,
  "prettier.disableLanguages": ["html"]
}

This will try to wrap the HTML attributes only if the length is greater than 100. The good thing is that even if the length exceeds 100, it won't wrap each attribute to new line.

2
votes

Add this line to setting JSON to increase the maximuim line width,

  "prettier.printWidth": 160,
0
votes

add new rule in .prettierrc.json that located in your project:

{
    printWidth": 160,
}
0
votes

{"printWidth": 100} in prettierrc.json is good enough.

0
votes

my solution was to uninstall prettier !! and install ESLint & typeScript extension. it comes with a basic formatter which does exactly what I wanted. you can disable and enable them by search for formatter in settings

enter image description here