[html] attribute on separate line formatting

[stephenlautier]

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>

[JVimes]

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]

+1

[Maus3rVonDutch]

+1

[Maus3rVonDutch]

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]

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

[chief10]

+1 to wanting this

[mae1st0rm]

+1, MUST HAVE!

[farin99]

+1

[stochris]

+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]

+1

[MeirionHughes]

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

[iamdevlinph]

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

[Emidomenge]

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

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

[Emidomenge]

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]

'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]

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 notifications@github.com
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]

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

My jsbeautify wrap_attributes stopped working with that version.

Thanks!

[mrmashal]

Using VSCode 1.9.0 with the following setting works fine:

"html.format.wrapAttributes": "force"

[vitaly-andriyanets]

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]

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

[mvdenk]

This issue is fixed in js-beautify 1.6.9

[vigie]

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

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

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

[mvdenk]

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

@mvdenk Works like a charm, thanks!

[mtpultz]

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

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

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

@mtpultz That seems to be working for me

[mtpultz]

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

[jitendravyas]

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

[christianmalek]

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]

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.