How to disable prettier settings creating new line of > of html tag?

Question

I walk through the Prettier extension of Vscode and I can't find how to disable this scenario. See the > of html tag.

Here's a sample code that needed some fix, every time i run the Prettier. The output is this:

<tag-html
 [val1]="valueStr"
 [val2]="valueStr"
>
</tag-html>

I want Prettier to output:

<tag-html
 [val1]="valueStr"
 [val2]="valueStr">
</tag-html>

Robert · Accepted Answer · 2021-12-09T20:02:27.683

31

For JSX (and other file types, like HTML) this can be done setting

"bracketSameLine": true

in your .prettierrc

(or jsxBracketSameLine for versions < 4.2.0)

edited Dec 09 '21 at 20:02

answered Dec 18 '20 at 17:50

Robert

5

This is deprecated as of `4.2.0`. Replaced with `bracketSameLine` – styks Dec 08 '21 at 18:57
4

I also needed to add htmlWhitespaceSensitivity: ignore in order for it to work. – KTibow Dec 28 '21 at 15:44
1

@styks Your answer helped my project work again. I think older versions of React Native new project templates still use the old `jsxBracketSameLine` key and it therefore stopped working after I updated my Prettier. IMO they should have deprecated it but not removed it. – xji Jan 22 '22 at 17:11
1

worked for me, thanks a lot. mark it to correct answer. – Ali Hajiloo May 27 '22 at 13:28

Pandiyan Cool · Answer 2 · 2018-12-26T13:54:12.027

20

This can be done with help of VS Code itself. Place the following entry in your workspace settings in your vs code.

"html.format.wrapAttributes": "force-aligned"

You don't need any external plugins or extension to do this.

Or you can use the GUI settings page as well

UPDATE 01

you can still merge the settings I have mentioned above.

edited Dec 26 '18 at 13:54

answered Dec 26 '18 at 04:45

Pandiyan Cool

hi, thank you for the answer, I worked when not using prettier, but I need the extension as it is being used already on the project. – rosiejaneenomar Dec 26 '18 at 10:01
36

This is a poor answer as it doesn't address the question. I came here from Google looking for the prettier solution as I don't use VS Code. – Chris Aug 18 '20 at 13:41
3

@ChrisTurner It might not answer your question. But answered the real question, and question-asker accepted the answer at that time (2018). If you really have any specific questions, please raise - happy to answer if possible. – Pandiyan Cool Aug 18 '20 at 13:50
2

i take "html.format.wrapAttributes": "force-aligned" - nothing has changed, sign ">" transfer, what need check more? – Ярослав Прохоров Oct 18 '20 at 18:36
3

"you can still merge the settings" - you linked to a very, very long thread that I don't have time to read. How can you merge settings? I just tried setting that setting, and it changes nothing. Merge how? – Sean Kendle May 13 '21 at 17:35
The conclusion of that thread is to avoid using Prettier for HTML: "[We] ignored all file types other than `*.html` using the `beautify.ignore` workspace setting and added `*.html` to `.prettierignore`. So Beautify only formats HTML and Prettier formats everything else." – Merchako Dec 07 '22 at 16:49
This isn't helpful. Remember, there are teams who use prettier because it is IDE agnostic. – Rich Jun 30 '23 at 09:24

score 1 · Answer 3 · answered Mar 20 '23 at 07:22

1

Here is what worked for me for Prettier settings:

answered Mar 20 '23 at 07:22

G Dube

3 Answers3