Wrap and align html attributes when line reaches wrap-line-length

[Axel-Latour]

Description

I would like to get the combination of the power of :
"wrap-attributes": "force-aligned",
"wrap-line-length": 120
If my line reaches the wrap-line-length, it should wrap the whole line and align them with the previous line.

Input

The code looked like this before beautification:

<p-dataTable
    [value]="data"
    [(selection)]="selectedRows"
    (selectionChange)="onSelectionChange($event)"
    [editable]="editable"
    [selectionMode]="settings.selectionMode"
    [resizableColumns]="settings.resizable"
    [reorderableColumns]="settings.reorderable"
    responsive="true"
    scrollable="true"
    scrollHeight="550px"
    [lazy]="settings.lazy"
    [totalRecords]="totalRecords"
    [paginator]="settings.paginator"
    [rows]="settings.paginator?.rowsPerPage || 10">
</p-dataTable>

Expected Output

The code should look like this after beautification with that feature:

<p-dataTable [value]="data" [(selection)]="selectedRows" (selectionChange)="onSelectionChange($event)" [editable]="editable"
             [selectionMode]="settings.selectionMode" [resizableColumns]="settings.resizable" [reorderableColumns]="settings.reorderable"
             responsive="true" scrollable="true" scrollHeight="550px" [lazy]="settings.lazy" [totalRecords]="totalRecords"
             [paginator]="settings.paginator" [rows]="settings.paginator?.rowsPerPage || 10">
</p-dataTable>

[cheerypick]

+1, me and my team need the same feature, and it seems to be the same feature as requested here: #1262
I saw this exact feature requested at VSCode github too: microsoft/vscode#2204 (last comment)

I played with the source code a bit and have some implementation that seems to work: a new option for "wrap_attributes" - "aligned" which doesn't force the attrs to wrap unless the line length is reached, and aligns them properly when the line is wrapped.

Can something like this work, @bitwiseman?

If so, we could discuss the details or I can open a PR. (But to be honest, I am not exactly an open source expert and a bit confused about the tests and python version and whatnot). Well, html beautifier doesn't exist in python so maybe it's not an issue :) So guidance is appreciated!

[bitwiseman]

@cheerypick
Thanks for taking a swing at implementing this.

Yeah, you don't need to worry about the python version for HTML beautifier changes - there is no python implementation for that module yet.

For testing, make sure you can run the build and it works locally. Then update test/data/html/tests.js. When you run the build again, it will regenerate the runnable tests from that data file. You can see an example of this in #1158 . If you want to try some simple tests first, cool. If you can make sense of the way that the matrix test generation works, add your new value to the attribute wrap tests at test/data/html/tests.js#L323.

Whatever the case feel free to start a PR whenever you like and we can discuss there.

Thanks again.

(If you would be willing to update CONTRIBUTING.md with any additional instructions you feel are needed, that would also be appreciated but not required.)

[bitwiseman]

@cheerypick - Also, thanks for noting the duplicate. Please continue this discussion in #1262.

[dietergeerts]

A side note on this: I was actually looking for the combination of those two settings, but now like the proposed example. What I need is that VSCode leaves attributes alone, and when the element becomes longer than 120, it will allign the attributes on new lines, so what I would want is the following:

<div class="form-check form-group row">
  <label class="custom-control custom-checkbox" id="referral-filter-checkbox-label">
    <input type="checkbox" class="custom-control-input" id="referral-filter-checkbox" ng-checked="$ctrl.filterReferralsRx | async : this" ng-click="$ctrl.toggleFilterReferrals()">
    <input type="checkbox" class="custom-control-input"
           id="referral-filter-checkbox" 
           ng-checked="$ctrl.filterReferralsRx | async : this" 
           ng-click="$ctrl.toggleFilterReferrals()">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description text-nowrap">{{ 'MODEL.INBOX.ACTION.FILTER' | translate }}</span>
  </label>
</div>

to:

<div class="form-check form-group row">
  <label class="custom-control custom-checkbox" id="referral-filter-checkbox-label">
    <input type="checkbox"
           class="custom-control-input"
           id="referral-filter-checkbox"
           ng-checked="$ctrl.filterReferralsRx | async : this"
           ng-click="$ctrl.toggleFilterReferrals()">
    <input type="checkbox" class="custom-control-input"
           id="referral-filter-checkbox" 
           ng-checked="$ctrl.filterReferralsRx | async : this" 
           ng-click="$ctrl.toggleFilterReferrals()">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description text-nowrap">{{ 'MODEL.INBOX.ACTION.FILTER' | translate }}</span>
  </label>
</div>

Notice the second input, where it should leave the attributes alone, because they are not longer than 120 characters + they are already aligned.

So what I would like to see is instead of a force, make sure they are aligned when on multiline, and put them multiline when the line goes over 120 characters.

[kspearrin]

Visual Studio (not Code) formats HTML this way (aligned, but not forced) by default. Would be nice if Code could too.

[Piping]

Please add the feature so that my html template code wont become extremely long.

[NEO97online]

This is highly desired. @cheerypick are you still planning on making a PR for this?

[christoferd]

Not working for me in VSCode.
In .vue file
Extensions: Prettier, Vetur
:-(

[bitwiseman]

@christoferd
Don't know what you're saying, please come chat on the gitter channel rather than adding comments to a closed issue.

[aybhalala]

I saw this issue again after I updated the VScode to latest version. Version 1.30.2 on Mac OS High Sierra. It was set to auto and suddenly my code starts wrapping. Tried force aligning and it does not work too.

[bitwiseman]

@aybhalala @christoferd Please be specific about what you are seeing. Come chat on gitter or open a new issue.

[aybhalala]

@bitwiseman Sorry. Just figured out that it was a problem with the Prettier plugin. Thanks for responding.