Js-beautify: Wrap and align html attributes when line reaches wrap-line-length
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>
Helayxa
All 12 comments
+1, me and my team need the same feature, and it seems to be the same feature as requested here: https://github.com/beautify-web/js-beautify/issues/1262
I saw this exact feature requested at VSCode github too: https://github.com/Microsoft/vscode/issues/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!
cheerypick
on 13 Nov 2017
@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
on 13 Nov 2017
@cheerypick - Also, thanks for noting the duplicate. Please continue this discussion in #1262.
bitwiseman
on 13 Nov 2017
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.
dietergeerts
on 14 Feb 2018
Visual Studio (not Code) formats HTML this way (aligned, but not forced) by default. Would be nice if Code could too.
kspearrin
on 27 Apr 2018
Please add the feature so that my html template code wont become extremely long.
Piping
on 7 May 2018
This is highly desired. @cheerypick are you still planning on making a PR for this?
auderer
on 28 May 2018
Not working for me in VSCode.
In .vue file
Extensions: Prettier, Vetur
:-(
christoferd
on 29 Sep 2018
@christoferd
Don't know what you're saying, please come chat on the gitter channel rather than adding comments to a closed issue.
bitwiseman
on 29 Sep 2018
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.
aybhalala
on 9 Jan 2019
@aybhalala @christoferd Please be specific about what you are seeing. Come chat on gitter or open a new issue.
bitwiseman
on 9 Jan 2019
@bitwiseman Sorry. Just figured out that it was a problem with the Prettier plugin. Thanks for responding.
aybhalala
on 9 Jan 2019
Related issues
avigoldman
·
4Comments
gabrielmaldi
·
3Comments
JVimes
·
6Comments
CaitlinWeb
·
3Comments
garretwilson
·
6Comments
Most helpful comment
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:
to:
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.