[html] attribute on separate line formatting #2204

stephenlautier · 2016-01-23T22:59:47Z

HTML Formatting ideally should have a feature to separate attributes on new lines when using format code.

e.g.

<my-hero-list [heroes]="heroes" (selectHero)="onSelect($event)" class="nav"></my-hero-list>

When using format code should be formatted as:

<my-hero-list [heroes]="heroes" 
    (selectHero)="onSelect($event)"
    class="nav">
</my-hero-list>

The text was updated successfully, but these errors were encountered:

JVimes · 2016-04-08T19:52:26Z

From what I've read, the js-beautify project is what's used for HTML formatting in VSCode. I submitted a suggestion to them to implement this feature (feel free to up-vote it). If/when they do, VSCode will need to implement the configuration to support the feature.

mribichich · 2016-05-29T19:17:53Z

+1

Maus3rVonDutch · 2016-06-15T18:25:59Z

+1

Maus3rVonDutch · 2016-06-15T20:06:51Z

For people wanting this feature right now, read on.

Ok it seems this function is already implemented on js-beautify, see: https://github.com/beautify-web/js-beautify and look for this setting:
-A, --wrap-attributes Wrap attributes to new lines [auto|force] ["auto"]

So, I did some digging in the source code and found the setting in the beautify-html.js script. I modified the wrap-attributes settings from auto to force and voila, it works!

Here is the repro for people wanting this feature also:

locate the beautify-html.js file (mine was located here: C:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\languages\lib\common) and create a backup of the original file, just in case you mess up the file.
For people on Windows, first copy the original file to a location where you are allowed to modify the file, because you are not allowed to edit the file directly at the 'Program Files (x86)' folder.
Then look for this setting: w=void 0===i.wrap_attributes?"auto":i.wrap_a and just replace auto with force, so you get: w=void 0===i.wrap_attributes?"force":i.wrap_a
Now just copy back the modified file and restart VS Code. Now you should be able to format the html with Shift+Alt+F and get the html attribute formatted on separate lines.

stephenlautier · 2016-06-22T00:16:29Z

@Maus3rVonDutch Thanks for this temporarily solution! The only ugly way obviously is to set it up, otherwise it would be brilliant.

chief10 · 2016-07-06T13:37:09Z

+1 to wanting this

mae1st0rm · 2016-07-11T04:37:08Z

+1, MUST HAVE!

farin99 · 2016-07-11T10:08:19Z

+1

stochris · 2016-09-05T15:22:30Z

+1
IMHO, it would be nice if js-beautify could detect when I as a developer went for multiline attributes and let them as they are, and when I let all of my attributes on one line, and let them as they are.
Sometimes, I don't want a tag to have 6 lines ( an input with a lot of validation attributes ) ,and sometimes I want ( a component which has in and out attributes )

edit: it seems this might be coming to js-beautify pretty so pretty soon, via reformat_unformatted_tags

chief10 · 2016-10-06T13:15:10Z

+1

MeirionHughes · 2016-10-20T13:00:42Z

Yeah this is really needed; doing binding interpolations on things like SVG element attributes can make the elements rather long.

iamdevlinph · 2016-11-01T12:17:38Z

+1 For readability of elements and attributes, and to prevent long lines

Emidomenge · 2016-11-10T13:18:28Z

@Maus3rVonDutch
Your solution works pretty well until version 1.6.1 of VS Code

I updated to 1.7.1 and it doesn't work anymore, is there any other solution/fix ?

cristian-stoicescu · 2016-11-10T13:32:04Z

It seems a new option was added for the ---wrap-attributes flag ( force-aligned ) js-beautify library. Maybe this solves the problem?

Emidomenge · 2016-11-10T13:36:07Z

Indeed, I saw this new option too but it doesn't work also.

I tried to set wrap-attributes settings to :

'force' --> didn't work
'force-aligned' --> didn't work
'force aligned' --> didn't work

:( ...

hneuer · 2016-11-20T23:05:29Z

'force-align' is not out yet, see beautifier/js-beautify#916

Hopefully 1.6.5 of js-beautify will come out soon so this feature can find its way into vscode!

mribichich · 2016-11-21T18:05:29Z

I'm using "wrap_attributes" with jsbeautify in vscode.

I have:

vscode: 1.7.1
js-beautify for VS Code: 0.4.1
Embedded version of js-beautify: *1.6.4 *

I'm using a .jsbeautifyrc file with:

{
  "wrap_attributes": "force"
}

then calling Beautify file cmd works fine

On Sun, Nov 20, 2016 at 8:05 PM Hanno Neuer [email protected]
wrote:

'force-align' is not out yet, see beautifier/js-beautify#916
beautifier/js-beautify#916

Hopefully 1.6.5 of js-beautify will come out soon so this feature can find
its way into vscode!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#2204 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFe3SnHk4Q4tWw-TgG40m1B_qwgx9EbAks5rANJJgaJpZM4HLBso
.

charlieargue · 2017-01-11T02:27:15Z

Is anyone having this break with the latest vscode? (1.8.1)?

My jsbeautify wrap_attributes stopped working with that version.

Thanks!

mrmashal · 2017-02-06T13:35:29Z

Using VSCode 1.9.0 with the following setting works fine:

"html.format.wrapAttributes": "force"

vitaly-andriyanets · 2017-02-13T06:47:34Z

Using 1.9.1 on code:

<div>
    <div>
        <div attr1="" attr2=""></div>
    </div>
</div>

With settings:
"html.format.wrapAttributes": "force"
Result:

<div>
    <div>
        <div attr1=""
             attr2=""></div>
</div>
</div>

With js-beautify extension and .jsbeautifyrc:

{
    "wrap_attributes": "force"
}

the same result

aeschli · 2017-02-15T09:53:20Z

@vitaly-andriyanets You can file your issue directly against https://github.com/beautify-web/js-beautify which is the formatter VSCode use.

mvdenk · 2017-02-15T15:54:25Z

This issue is fixed in js-beautify 1.6.9

vigie · 2017-02-26T03:16:20Z

@mvdenk Is there any way to get vscode to "consume" this js-beatify fix? I am on VS Code 1.9.1 and experiencing this issue.

iamdevlinph · 2017-02-26T03:54:01Z

@vigie I'm also at VS Code 1.9.1 and it works for me. I just use it like this: "html.format.wrapAttributes": "force" but the problem is that the closing tags of htmls will also be broken.

aeschli · 2017-02-27T09:05:55Z

An updated version for jsbeautify went into VSCode 1.10 has the fix.

mvdenk · 2017-02-27T09:46:20Z

@vigie To temporary fix this in VSCode 1.9.1 you can replace C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\html\server\node_modules\vscode-html-languageservice\lib\beautify\beautify-html.js with beautify-hytml.js.

vigie · 2017-02-28T21:31:20Z

@mvdenk Works like a charm, thanks!

mtpultz · 2017-03-26T07:55:28Z

@mvdenk using the setting "html.format.wrapAttributes": "force", in VSCode v1.10.2 the format of the attributes are not aligned with the initial attribute anymore:

<div [ngClass]="{'has-error': formError.password}">
  <label for="password">Password<span>*</span></label>
  <input id="password"
    type="password"
    placeholder="Password"
    formControlName="password">
  <span *ngIf="formError.password">
    {{formError.password}}
  </span>
</div>

instead of:

<div [ngClass]="{'has-error': formError.password}">
  <label for="password">Password<span>*</span></label>
  <input id="password"
         type="password"
         placeholder="Password"
         formControlName="password">
  <span *ngIf="formError.password">
    {{formError.password}}
  </span>
</div>

gheoan · 2017-03-27T03:15:33Z

@mtpultz The code sample you showed is not valid html. I don't think js-beautify supports that. This is one of the reason I do not like Angular 😉.

lacroixdavid1 · 2017-04-04T16:46:02Z

@mtpultz what about "html.format.wrapAttributes": "force-aligned" ?

It works for me. It's formatting output is now :

      <button type="button"
              (click)="modalForm.hide()"
              class="close"
              data-dismiss="modal"
              aria-hidden="true">&times;
      </button>

zatchgordon · 2017-04-04T18:32:34Z

@mtpultz That seems to be working for me

mtpultz · 2017-04-04T19:25:50Z

Thanks @lacroixdavid1 and @zatchgordon you're right. I had "html.format.wrapAttributes": "force" not "html.format.wrapAttributes": "force-aligned"

jitendravyas · 2017-10-10T06:54:52Z

I added "html.format.wrapAttributes": "force-aligned" but nothing is happening

christianmalek · 2017-10-18T07:12:14Z

Here's a little hint: Maybe someone uses Vetur or other plugins and it's not working. It's possible that they use their own settings. For example Vetur uses the property vetur.format.html.wrap_attributes": "force-aligned".

EDIT This is obsolete now.
To use this option in Vetur you now have to set the following in the user/workspace settings:

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

JesseNewman19 · 2017-10-23T21:05:32Z

I really want a setting that allows me to align the attributes if they are on a new line, but not force them.

My ideal setting would be something like so:

"html.format.wrapLineLength": 50,
"html.format.wrapAttributes": "align"

That way it drops attributes to a new line if they get too long, but also aligns them properly.

As far as I can tell there is no way to do this with the current VSCode options.

weinand assigned aeschli Jan 23, 2016

aeschli added html HTML support issues feature-request Request for new features or functionality labels Jan 24, 2016

aeschli added this to the Backlog milestone Jan 24, 2016

JVimes mentioned this issue Apr 8, 2016

Option to put HTML attributes on their own lines, aligned beautifier/js-beautify#916

Closed

aeschli mentioned this issue Apr 25, 2016

[html] Prevent single line auto-formatting for html attributes #4806

Closed

aeschli modified the milestones: November 2016, Backlog Nov 10, 2016

aeschli modified the milestones: January 2017, November 2016 Dec 7, 2016

aeschli closed this as completed in be716e2 Jan 8, 2017

aeschli mentioned this issue Jan 8, 2017

Formatting HTML breaks #18133

Closed

aeschli added a commit that referenced this issue Jan 8, 2017

[html] update jsbeautify (for #2204)

c53041b

cheerypick mentioned this issue Nov 12, 2017

Wrap and align html attributes when line reaches wrap-line-length beautifier/js-beautify#1285

Closed

vscodebot bot locked and limited conversation to collaborators Nov 17, 2017

[html] attribute on separate line formatting #2204

[html] attribute on separate line formatting #2204

Comments

stephenlautier commented Jan 23, 2016

JVimes commented Apr 8, 2016

mribichich commented May 29, 2016

Maus3rVonDutch commented Jun 15, 2016

Maus3rVonDutch commented Jun 15, 2016

stephenlautier commented Jun 22, 2016

chief10 commented Jul 6, 2016

mae1st0rm commented Jul 11, 2016

farin99 commented Jul 11, 2016

stochris commented Sep 5, 2016 • edited Loading

chief10 commented Oct 6, 2016

MeirionHughes commented Oct 20, 2016

iamdevlinph commented Nov 1, 2016 • edited Loading

Emidomenge commented Nov 10, 2016

cristian-stoicescu commented Nov 10, 2016

Emidomenge commented Nov 10, 2016

hneuer commented Nov 20, 2016

mribichich commented Nov 21, 2016

charlieargue commented Jan 11, 2017

mrmashal commented Feb 6, 2017

vitaly-andriyanets commented Feb 13, 2017

aeschli commented Feb 15, 2017

mvdenk commented Feb 15, 2017 • edited Loading

vigie commented Feb 26, 2017

iamdevlinph commented Feb 26, 2017

aeschli commented Feb 27, 2017

mvdenk commented Feb 27, 2017

vigie commented Feb 28, 2017

mtpultz commented Mar 26, 2017

gheoan commented Mar 27, 2017 • edited Loading

lacroixdavid1 commented Apr 4, 2017 • edited Loading

zatchgordon commented Apr 4, 2017

mtpultz commented Apr 4, 2017 • edited Loading

jitendravyas commented Oct 10, 2017

christianmalek commented Oct 18, 2017 • edited Loading

JesseNewman19 commented Oct 23, 2017

stochris commented Sep 5, 2016 •

edited

Loading

iamdevlinph commented Nov 1, 2016 •

edited

Loading

mvdenk commented Feb 15, 2017 •

edited

Loading

gheoan commented Mar 27, 2017 •

edited

Loading

lacroixdavid1 commented Apr 4, 2017 •

edited

Loading

mtpultz commented Apr 4, 2017 •

edited

Loading

christianmalek commented Oct 18, 2017 •

edited

Loading