如何在 VS 代码中阻止 Prettier 将属性拆分为多行？

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?

Answer 1

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

Answer 2

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.

Answer 3

将此行添加到设置 JSON 以增加最大线宽，

  "prettier.printWidth": 160,

Answer 4

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

{
    printWidth": 160,
}

Answer 5

{"printWidth": 100}在prettierrc.json是不够好。

Answer 6

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

Answer 7

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.