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

Question

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?

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: https://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, May 26 '19 at 02:42

Bilal Ahmad · Accepted Answer · 2021-06-14T11:39:16.577

61

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:

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

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.

You can visually check the setting here

edited Jun 14 '21 at 11:39

answered Jul 19 '20 at 02:30

Bilal Ahmad

874
9
13

But then the content of the html tag is also put on the same line? – GarfieldKlon Jun 22 '23 at 19:06

score 22 · Answer 2 · answered Nov 24 '21 at 12:50

22

This happens because prettier assume that you want your code width to be in 80 characters only because of their default setting.

So You should tell prettier to I have too much space.

To do this simply create .prettierrc.json file in the root folder and add

{
 "printWidth": 600
}

And Save your file. This will clear your issue.

answered Nov 24 '21 at 12:50

Aloksinghse

430
3
5

The best solution mate!!! – Lisan E Sep 28 '22 at 04:23
This helps, but it should simply do an line break after the attributes pass the print width rather than force one attribute per line format. – Lewis Nakao Nov 18 '22 at 21:08

score 12 · Answer 3 · edited May 17 '20 at 09:18

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

Disable prettier for html files and use the default formatter provided by VS code.
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.

score 12 · Answer 4 · answered Nov 09 '20 at 10:25

12

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

  "prettier.printWidth": 160,

answered Nov 09 '20 at 10:25

Kaleab7

136
1
4

score 7 · Answer 5 · edited Jul 01 '21 at 14:37

7

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

edited Jul 01 '21 at 14:37

zhulien

5,145
3
22
36

answered Jun 28 '21 at 20:25

Adil Muthukoya

89
1
4

score 7 · Answer 6 · answered Jul 21 '21 at 01:18

7

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

answered Jul 21 '21 at 01:18

Daniel

3,322
5
30
40

3

After trying everyting and being annoyed for literally months, this saved me! Thanks for posting this! :D – user230910 Aug 26 '21 at 08:10

score 5 · Answer 7 · answered Jun 25 '21 at 13:15

5

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

{
    printWidth": 160,
}

answered Jun 25 '21 at 13:15

ofir_aghai

3,017
1
37
43

score 4 · Answer 8 · edited Oct 28 '22 at 06:57

4

You need to uncheck the box for "Prettier: Single Attribute Per Line"

Prettier: Single Attribute Per Line

edited Oct 28 '22 at 06:57

Henry Woody

14,024
7
39
56

answered Oct 12 '22 at 19:07

Виталий Цыганок

59
1
2

2

I doubt this was the issue as [this feature was added in 2022](https://prettier.io/blog/2022/03/16/2.6.0.html) and this question is from 2019 and it is not enabled by default. However this is useful to know if you want the behavior that the OP does not. Note, however, that setting this value to false won't keep every attribute on one line (that's still controlled by the lineWidth property), but setting it to true will force every attribute onto a separate line. – Henry Woody Oct 28 '22 at 06:59
This totally did not work. – Lewis Nakao Nov 18 '22 at 21:05
1

@lewdev it did for me – 5idneyD Jan 08 '23 at 12:21
This won't work!!! unchecking "Single Attributes Per Line" will only let them in one line IF line length <= `printWidth`!!!! – Andre Figueiredo Aug 30 '23 at 20:28

Shaka OS · Answer 9 · 2023-02-16T23:20:58.633

2

I tried the answers posted before and had no success.

Finally I found a solution for me by adding...

"html.format.wrapLineLength": 0

...to the setting.json file.

edited Feb 16 '23 at 23:20

answered Feb 16 '23 at 23:19

Shaka OS

31
2

score 1 · Answer 10 · edited May 16 '23 at 19:34

1

Add

"singleAttributePerLine": true

edited May 16 '23 at 19:34

Arty.Simon

844
2
7
21

answered May 16 '23 at 01:20

Eugene Butkov

29
1
1

That's the opposite of what OP wants! – Andre Figueiredo Aug 30 '23 at 20:35

score -1 · Answer 11 · answered Oct 23 '22 at 20:08

-1

all the answer is incorrect including the marked correct answer. the word wrap is not the problem. the problem is this line in your .vscode/settings.json or maybe global settings.json

"prettier.singleAttributePerLine": true,

This line will only allow one attribute in one line. That is why many people put 250 length wrap still not fixing the problem. simply change it to false and your jsx html will not break.

answered Oct 23 '22 at 20:08

David Shen

1
1

There is already an answer that suggests this. – Henry Woody Oct 28 '22 at 06:47
This is so wrong!! And It's ironic suggesting this while saying everyone else is wrong. This is NOT why this option is for! Uncheck that while leaving line length <= printWidth won't solve anything! – Andre Figueiredo Aug 30 '23 at 20:34

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

11 Answers11

Linked

Related