Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HTML] allow corresponding option to jsxBracketSameLine #5377

Open
bengry opened this Issue Nov 7, 2018 · 41 comments

Comments

Projects
None yet
@bengry
Copy link

commented Nov 7, 2018

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>

@bengry bengry changed the title Angular parser - allow parallel option to jsxBracketSameLine Angular parser - allow corresponding option to jsxBracketSameLine Nov 7, 2018

@bengry bengry changed the title Angular parser - allow corresponding option to jsxBracketSameLine [Angular] allow corresponding option to jsxBracketSameLine Nov 7, 2018

@michaeljota

This comment has been minimized.

Copy link

commented Nov 7, 2018

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

@j-f1

This comment has been minimized.

Copy link
Member

commented Nov 7, 2018

Perhaps we should name it to angleBracketSameLine.

@bengry

This comment has been minimized.

Copy link
Author

commented Nov 7, 2018

@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

This comment has been minimized.

Copy link

commented Nov 13, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Nov 13, 2018

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

This comment has been minimized.

Copy link
Author

commented Nov 13, 2018

@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

This comment has been minimized.

Copy link
Contributor

commented Nov 13, 2018

<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

This comment has been minimized.

Copy link

commented Nov 15, 2018

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.

@stewwan

This comment has been minimized.

Copy link

commented Nov 16, 2018

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

@ikatyang ikatyang changed the title [Angular] allow corresponding option to jsxBracketSameLine [HTML] allow corresponding option to jsxBracketSameLine Dec 5, 2018

@dousybox

This comment has been minimized.

Copy link

commented Dec 7, 2018

Case 1: When I fold the tag vscode folded the start tag itself,
not include the end tag.

image
image

Case 2: When I put > back to the previous line, the fold is include the end tag.

image
image

There are two fold tag in Case 1, fist one is fold start tag itself, second one is fold the end tag.
VS Code was right, but I think the Case 2 is best for me.

It will be better, if there is a switch like TagBracketSameLine option for any kind of html parser.

@Carniatto

This comment has been minimized.

Copy link

commented Dec 17, 2018

For me this is the most annoying prettier formatting. Specially in Angular it prefers to break lin on the bracket instead of on attributes.
screenshot 2018-12-17 at 17 39 18

@stephen-dahl

This comment has been minimized.

Copy link

commented Jan 8, 2019

my team is fine with

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

but hates

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

This comment has been minimized.

Copy link

commented Jan 14, 2019

@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.

@JonathanAlumbaugh

This comment was marked as off-topic.

Copy link

commented Jan 17, 2019

I'm trying to figure out how to get things between braces/brackets on the same line while using prettier and this is the closest related issue I can find, how would I get this

            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
            { rel: 'stylsheet', type: 'text/css', href: 'https://unpkg.com/vue-plyr/dist/vue-plyr.css' },
            { rel: 'stylesheet', href: 'https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css' },
            { rel: 'stylesheet', type: 'text/css', href: 'https://use.typekit.net/rbp5ahp.css' }

instead of this (which is happening whenever I save)

            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
            {
                rel: 'stylsheet',
                type: 'text/css',
                href: 'https://unpkg.com/vue-plyr/dist/vue-plyr.css',
            },
            {
                rel: 'stylesheet',
                href:
                    'https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css',
            },
            {
                rel: 'stylesheet',
                type: 'text/css',
                href: 'https://use.typekit.net/rbp5ahp.css',
            },
@j-f1

This comment was marked as off-topic.

Copy link
Member

commented Jan 17, 2019

There’s not an option for that. If you just have that kind of thing once in your codebase, you can put a // prettier-ignore comment before the array to stop Prettier from changing it.

@DanielHabenicht

This comment has been minimized.

Copy link

commented Feb 7, 2019

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)

@vort3xxx

This comment has been minimized.

Copy link

commented Feb 8, 2019

My team won't let me adopt prettier for angular html templates because of this one.

@oswaldofreitas

This comment has been minimized.

Copy link

commented Feb 9, 2019

when you have 47 thumbs up in an issue it's a signal that it's important for the community

@oswaldofreitas

This comment has been minimized.

Copy link

commented Feb 16, 2019

This is really bothering me, I can't even work in my project with that new line just for a ">", it makes my code horrible and hurts my eyes :)

Seems like others are having the same issue:

vuejs/vue-cli#3078

I think when there is an impasse of how should be the correct looking, an option to configure that would be great to attend everyone.

btw, I LOVE what Prettier does to my javascript!

@krokofant

This comment has been minimized.

Copy link

commented Feb 17, 2019

It's a bit hard to enforce using prettier when issues like this exists.

@michaeljota

This comment has been minimized.

Copy link

commented Feb 18, 2019

It's a bit hard to enforce using prettier when issues like this exists.

It's actually not hard at all. You just need to focus coding, and leave Prettier alone with the formatting. Is easier than you think.

@vort3xxx

This comment has been minimized.

Copy link

commented Feb 18, 2019

It's actually not hard at all. You just need to focus coding, and leave Prettier alone with the formatting. Is easier than you think.

I'm sure that mentality works great for small, authoritarian teams, but when you have to convince 80 other engineers to adopt a new tool and it doesn't pass their sniff test because the code it produces looks way different than the code they've been writing forever, then the conversation goes nowhere.

Tool selection is often a social tug of war on larger teams where the toolmaster gets stuck respecting some accidents of history in order to gain adoption.

@oswaldofreitas

This comment has been minimized.

Copy link

commented Feb 19, 2019

a new option similar to jsxBracketSameLine would save us so much time on waiting and discussing.

Also, code style is pretty like when you get a new keyboard, you need some time to adapt your eyes to it and I personally don't want to waste time with this since I've been working for a long time with the same code style, unless it's something really necessary or worth to change

@gjbianco

This comment has been minimized.

Copy link

commented Feb 19, 2019

While I agree with the mentality of "let the formatter handle formatting", this particular configuration is already an option. This request is to extend it to other similar markup.

@lysla

This comment has been minimized.

Copy link

commented Mar 10, 2019

Please do add this option for .vue files, I really wanted to give Prettier a try and this lonely brackets all around my code are really giving me a hard time!

@michaelsogos

This comment has been minimized.

Copy link

commented Mar 14, 2019

Hi, any news about it?

Also my team hate > on a new line. Also we are working with VUE and VETUR extension but JSX options doesn't apply.

@oswaldofreitas

This comment has been minimized.

Copy link

commented Mar 14, 2019

when you have 47 thumbs up in an issue it's a signal that it's important for the community

wow, it's now 67 and counting! Unfortunately no responses from the prettier team?

@alphabt

This comment has been minimized.

Copy link

commented Mar 14, 2019

This thread is just full of thumb ups

@krokofant

This comment has been minimized.

Copy link

commented Mar 16, 2019

Anyone dare to provide a pull request? 🍰

@kodmis

This comment has been minimized.

Copy link

commented Mar 20, 2019

Please, add this option for .vue files

@y4n6

This comment has been minimized.

Copy link

commented Mar 25, 2019

How many people choose js-beautify-html?

"vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" } },

@goat67

This comment has been minimized.

Copy link

commented Apr 8, 2019

Please add this for html files this is a deal breaker for our team we will not be implementing to bad liked it otherwise.

@marekrewers

This comment has been minimized.

Copy link

commented Apr 9, 2019

I'm also looking forward to this. Current behavior stops me from using it.

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Apr 9, 2019

/cc @vjeux what do you think?

@stephen-dahl

This comment has been minimized.

Copy link

commented Apr 9, 2019

maybe deprecate old option renaming to have 1 option apply to all the html like languages (html, xhtml, jsx, ect)

@vjeux

This comment has been minimized.

Copy link
Collaborator

commented Apr 9, 2019

@evilebottnawi Sounds reasonable to add an option for it since we're already doing it for JSX.

@phifa

This comment has been minimized.

Copy link

commented Apr 11, 2019

Will this work for .html and for .vue files? Currently I have to disable prettier whenever I work on vue files.

@krokofant

This comment has been minimized.

@mkapiczy

This comment has been minimized.

Copy link

commented Apr 22, 2019

+1

I just can't be convinced that's a desirable way of formatting the code:

Input:
<template><p></p></template>

Output:

<template
  ><p></p
></template>
@michaeljota

This comment has been minimized.

Copy link

commented Apr 22, 2019

@mkapiczy You can configure the html spacing to ignore. This is not about that, but about the closing tag when you have multiple properties in the element.

@phifa

This comment has been minimized.

Copy link

commented Apr 22, 2019

@krokofant no that will not work since I want my script and style tags to be formatted by prettier.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.