[resolved] [HTML] allow corresponding option to jsxBracketSameLine

[bengry]

Note: Read this comment to make sure you’re up-to-speed on what this issue is and is not about: #5377 (comment)

---

For React/JSX - Prettier has an option to allow tags to close on the same line as the declaration, rather then on a new line:
jsxBracketSameLine: true:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>

jsxBracketSameLine: false:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

With Prettier 1.15.1, at least for the Angular parser, there is no corresponding option, so all HTML is formatted like this:
Input:

<my-component class="wcd-flex-1 dialog-contents wcd-scroll-vertical"
		      [foo]="bar">
</my-component>

Output:

<my-component
    class="wcd-flex-1 dialog-contents wcd-scroll-vertical"
	[foo]="bar"
>
</my-component>

Playground link

It would be nice to have a flag to set it such that the output of the above would be:

<my-component
    class="wcd-flex-1 dialog-contents wcd-scroll-vertical"
	[foo]="bar">
</my-component>

[michaeljota]

I don't think this is the same as you are requesting. JSX and HTML are two different things.

[j-f1]

Perhaps we should name it to angleBracketSameLine.

[bengry]

@michaeljota I agree they are different things, but in this regard they can be "collapsed" under the same option I think, as the behavior is largely the same. @j-f1's suggestion for the name (change?) emphasis it.

[matt328]

I don't think I've ever seen any markup language with the closing brackets on a separate line. I'd like to see angleBracketSameLine or some equivalent.

[aboyton]

The reason I personally write the closing bracket on the next line is that it makes it much simpler to work out what's an attribute and what's content.

<my-component
  foo="bar"
  moo="cow">
  Now some text
  It's really not clear where the text started
</my-component>

compared to

<my-component
  foo="bar"
  moo="cow"
>
  Now some text
  It's much clearer where the text started
</my-component>

It also matches what people do in code and so we found it pretty simple to get our company to all adopt the coding style.

[bengry]

@aboyton good point. But what about when you don't have content?

<my-component
  foo="bar"
  moo="cow">
</my-component>

Or is it still:

<my-component
  foo="bar"
  moo="cow"
>
</my-component>

Or something else entirely?

[aboyton]

<my-component
  foo="bar"
  moo="cow"
></my-component>

Is what I do to reduce vertical space (or just put it all on one line).

[SungwonKim]

It also happens on Vue template. Closing bracket on the next line or same line is not important for this issue. Prettier provides this feature as an option for JSX but not for Angular or Vue.

[stewones]

would be awesome to have that JSX option for any kind of html parser

[stephen-dahl]

my team is fine with

<div
    id="bar"
    class="foo"
><div>

but hates

<div
    id="bar"
    class="foo"
> 
    content
<div>

[matt328]

@stephen-dahl agree. The angle bracket hanging out there on its own line is never going to catch on. I've tried for the last month, but my mind still sees it as an error or a typo. IMO, js-beautify has solved the html formatting problem. Until prettier gets its stuff together, I'll be using that for my html.

[DanielHabenicht]

Until it is fixed you can just disable prettier for .html files and use the standard formatter while keeping your other files pretty:

{
"editor.formatOnPaste": true,
"prettier.singleQuote": false,
"prettier.trailingComma": "none",
"prettier.disableLanguages": ["html"],
"editor.formatOnSave": true,
"editor.rulers": [110],
"html.format.wrapAttributes": "force",
"html.format.enable": true,
"html.format.wrapLineLength": 110
}
From: prettier/prettier-vscode#182 (comment)

[karptonite]

What's now with the option bracketSameLine? Will we get it or not?
An update or a final answer would be good!

I'm not on the team, but it seems clear that they have agreed to support it, but that there has not yet been a corresponding pull request. Correct me if I'm wrong, but I think they would accept a good pull request that implements this. I spent some time on it myself, but ran into some roadblocks, then got distracted. It isn't a super-trivial feature to implement.

[adamJLev]

@karptonite my fork achieves this with a few lines of code, however I didn't get around to fixing all the tons of unit tests that this breaks since its expecting the old formatting style. I took a stab at it recently again, but the html parser has been rewritten and would need to go down the rabbit hole again to figure out a new fix.

I figure this is one of those changes that would take 10x less time for one of the regular maintainers to tackle than someone who's completely new to this codebase. Dear prettier team: can you plz take a look soon?

I've been using my own fork for over 6 months now on all my projects and it works well.

"prettier@npm:@adamjlev/prettier": "2.1.0",

Change here: adamJLev@a0cd45b

[welljsjs]

Same, something like the following where a html tag has no attributes looks very strange to us:

<p>
  <strong
    >some text some text some text some text some text
    some text some text some text</strong
  >
</p>

[karptonite]

@welljsjs the example you are showing is not really related to this issue. Rather, it is related to the html-whitespace-sensitivity setting, here: https://prettier.io/docs/en/options.html#html-whitespace-sensitivity. If you set that to ignore, it will format your example without those breaks, (but, will also add whitespace into the strong element, which may affect the rendered html).

[karptonite]

Well, I've started a pull request with a first proof of concept fix for this in #9936. Anyone interested in offering feedback on this?

[lzl124631x]

I need this. I'm using wepy and the compiler will throw error if the closing tag is formatted like

</view
>

[DW8Reaper]

I need this. I'm using wepy and the compiler will throw error if the closing tag is formatted like

</view
>

sorry @lzl124631x prettier just doesn't care about what anyone else thinks, when you see "opinionated framework/library/formatter/whatever" what you should read is "everyone else is stupider than us, they don't deserve to have an opinion". Besides it has only been 4 years since this was opened I'm sure someones opinion will start mattering soon

You also should ignore this message since I am part of the "stupider crowd" and anything I posted should just be ignored and considered as unworthy as my opinions

[jwittekind]

As this issue seems to be requested by a lot of developers, it would be great if there could be any kind of initiative to address that.
Turning off prettier for html files makes it much less valuable than it could be.

[Mikaleb]

So ?

[JakubK]

What about it? I'm facing same issue in Vue.
Look at part of blank project structure from vue-cli:

<a
    href="https://marketplace.visualstudio.com/items?itemName=octref.vetur"
    target="_blank"
>
    Vetur
</a>

Doesn't it look awful ?

[adamJLev]

Yeah, a year went by and I'm still using my own prettier fork with the 2 line change, for all my Vue projects:

yarn add --dev prettier@npm:@adamjlev/prettier

That command will install the fork as a drop in replacement under the same prettier namespace.
Code here https://github.com/adamJLev/prettier

[rooby]

I recently became aware of this https://github.com/brodybits/prettierx

Maybe you can get your change in there?
It seems to be actively maintained.

[laspinacristian]

OMG! Why maintainers don't want to implement this option?
We're only asking to rename JSX Brackets to angleBracketSameLine and make it valid in HTML

[alexander-akait]

#5377 (comment) Feel free to send a PR

[sscotth]

PR1 #9936

PR2 #9990

[karptonite]

PR1 #9936

PR2 #9990

Those are mine, and I got kind of stuck and moved on to other things. Anyone else is welcome to take over, or offer to help. I think would be a worthwhile feature, but it is not as trivial as you might think to implement, especially by someone unfamiliar with Prettier’s code.

[oom-]

Ok I will try to participate as well after 4 years of waiting.

Please ?

[Mikaleb]

Prettier seems pretty ... dead :')

[alexander-akait]

I want to lock conversation, instead of being toxic, you can send a PR and help us, both PRs above are abandoned

Resolver here: #5377 (comment),

[alexander-akait]

#11006