Closing > in new line

Question

I have problem with '>' in tags. I got:

<label
    class="custom-control-label"
    for="building{{building.Id}}"
>
 {{ building.City }}, {{ building.Name }}
</label>

How to make label starting tag '>' in the same line as last attribute? I use Prettier, but I neither couldn't find solution in their config nor in code settings.

<label
   class="custom-control-label"
   for="building{{building.Id}}">
     {{ building.City }}, {{ building.Name }}
</label>

Solution: I've used built-in VS Code formatter.

score 36 · Answer 1 · edited Sep 22 '21 at 14:26

36

In Prettier < 2.4.0:

Add jsxBracketSameLine: true in your Prettier settings.

In Prettier >= 2.4., jsxBracketSameLine is deprecated, so:

Add bracketSameLine: true in your Prettier settings.

You can refer to the official documentation for more information.

edited Sep 22 '21 at 14:26

Adrian Mole

49,934
160
51
83

answered Sep 22 '21 at 12:19

Junip Dewan

759
8
8

2

so I have the same issue, and this doesn't work. This only work for opening tags, but not for closing tags. – Felipe Centeno Dec 12 '22 at 21:13

score 22 · Answer 2 · answered Aug 25 '22 at 11:52

22

In prettier config use both options, both are important to make it work:

"htmlWhitespaceSensitivity": "ignore",
"bracketSameLine": true

answered Aug 25 '22 at 11:52

Bartek

810
7
9

2

This is the **correct answer** in 2023 – Eric Hepperle - CodeSlayer2010 Mar 08 '23 at 16:22
1

**#GOTCHA:** Without htmlWhitespaceSensitivity set to "ignore", bracketSameLine doesn't work as expected. – Eric Hepperle - CodeSlayer2010 Mar 08 '23 at 16:23
This worked! Does adding```htmlWhitespaceSensitivity ``` have any side effects? – MikhailRatner May 17 '23 at 10:52

score 7 · Answer 3 · answered Nov 19 '18 at 00:48

7

That setting in prettier is called jsxBracketSameLine and needs to be set to true

Documentation

https://prettier.io/docs/en/options.html#jsx-brackets

answered Nov 19 '18 at 00:48

AnonymousSB

3,516
10
28

How are you setting your configuration? Are other rules working in the same configuration? – AnonymousSB Nov 19 '18 at 07:58
Yes, I also have: Jsx Single Quote as true and it is working. I use VS Code so in settings I tick proper option. :) – Mieszczańczyk S. Nov 19 '18 at 08:01
Have you looked at this documentation on setting configs? https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode. – AnonymousSB Nov 19 '18 at 08:02
1

Yes, I made even file .prettierrc with "jsxBracketSameLine": true and it's not working. I got this file in folder .vscode – Mieszczańczyk S. Nov 19 '18 at 11:01
does it work if you run the CLI command? `prettier --jsx-bracket-same-line fileName` – AnonymousSB Nov 19 '18 at 11:09
everything is working but not jsx property - when I disable prettier, everything works good and VSC style my document in good way, I think it may be bug – Mieszczańczyk S. Nov 20 '18 at 11:53
I'm looking a solution as well. I believe this rule applies to the entire tag/bracket block `content`, not specifically the `>` and how it should be formatted – DerpyNerd Nov 21 '20 at 11:25

score 6 · Answer 4 · answered Apr 02 '19 at 13:49

6

You can follow this thread.

This a feature request for Prettier.

answered Apr 02 '19 at 13:49

Oswaldo

3,296
4
25
35

score 1 · Answer 5 · answered Jan 23 '23 at 11:15

1

Go to VSCode Settings and search prettier as shown in the screenshot. Bracket Same Line

Click on this checkbox

answered Jan 23 '23 at 11:15

Rohit Kumar

983
9
11

score 0 · Answer 6 · answered Oct 29 '20 at 02:25

0

In my situtation, With using Angular I updated prettier from ^1.19.1 to ^2.1.2

npm i prettier@2.1.2 -D

Without any property touch, Closing html tag on the same line.

answered Oct 29 '20 at 02:25

YOSEPH NOH

87
4

Felipe Centeno · Answer 7 · 2022-12-12T21:30:06.350

I found out that the prettier property: bracketSameLine only works for opening tags <, but not for closing tags > which does not answer the original question (See this feature request for reference). For me, I had to change the default formatter from prettier to the VS code default.

I used the command Format Document With: and the last option is to change the default formatter which only affects html files (or current type of file being changed). I then selected HTML Language Features from the drop down.

Closing > in new line

7 Answers7

Documentation

Linked