Js-beautify: Wrap align html attributes only when line reaches certain length

Created on 27 Sep 2017 · 8Comments · Source: beautify-web/js-beautify

Is it possible to only wrap html attributes when line reaches certain length of characters. The way it works in Phpstorm for example is that If I have something like this.

<div v-for="item in items" class="items">
    <p>{{item.name}}</p>
</div>

Phpstorm formatter does not wrap the attributes but if my code looks something like this

<div v-for="item in items" class="items" v-if="items.notEmpty()" :class="{active: isActive} :key="item.id">
    <p>{{item.name}}</p>
</div>

and line contains more then 100 characters then it will wrap the attributes and align them like so

<div v-for="item in items" 
     class="items" 
     v-if="items.notEmpty()" 
     :class="{active: isActive} 
     :key="item.id">
    <p>{{item.name}}</p>
</div>

html enhancement

Source

asolopovas

👍17

Most helpful comment

I was thinking an option for something like a "number of attributes before wrapping" would be nice, so I could say, anything with < 4 attributes won't be wrapped, while anything >= 4 attributes would be wrapped, and that would be configurable per user, of course.

Adondriel on 13 Jun 2018

👍5

All 8 comments

See #1125 for related discussion. Not exactly the same feature, but related.

bitwiseman on 13 Nov 2017

Is this getting implemented? It's very annoying when the following:
<meta content="IE=edge" http-equiv="X-UA-Compatible">

becomes:

<meta content="IE=edge"
      http-equiv="X-UA-Compatible">

Even though there's plenty of space to keep it in one line

RenaldasK on 17 Apr 2018

👍1

@RenaldasK
This issue is unassigned. It needs someone to implement a fix and tests, submit a PR, and drive it to completion. Perhaps you?

bitwiseman on 18 Apr 2018

+1, this is exactly how we would expect the behavior to work

auderer on 28 May 2018

I might take a look it this weekend. Should this be implemented under --wrap-attributes auto or some new option?

RenaldasK on 30 May 2018

👍1

Actually I had a look at #1285 issue and the behaviour described there suits my needs as well, so I think I might fork this PR #1297 instead and try to get it merged and closed.

RenaldasK on 30 May 2018

👍3

Adondriel on 13 Jun 2018

👍5

@Adondriel This is tricky. One attribute could be just 3-5 characters long, another one can be 50 chars. Wrapping by default should deal with lengths, not with number of attributes, but it is an interesting additional option to consider...