Js-beautify: HTML: add an option to preserve manual wrapping of attributes

[Andikki]

--wrap-attributes option has these possible values: auto|force|force-aligned|force-expand-multiline
This allows to whether condense all attributes into one line or auto-wrap each of them.

Would it be possible to just maintain the initial wrapping?

[Robula]

This is a great idea, none of the options allow for wrapping manually.

It would be great to have an option that would perform force|force-aligned|force-expand-multiline only if the wrap line length (default 120) has been hit as auto wraps only as many attributes as it needs to. Something like auto-expand-multiline|auto-aligned options?

[bitwiseman]

@Robula
Please open a new issue for what you have in your second paragraph.

[bitwiseman]

@Montago, @Andikki - what you are describing is an option named something like unchanged or preserve, correct?

[Montago]

@bitwiseman no, just another option like "Force-Aligned" ... but instead "auto-aligned"

What it should do, is simply to align all attributes that have been manually wrapped.
all other elements / attributes are untouched.

[bitwiseman]

@Montago - Ah, so more like align-only.

[Montago]

yeah that makes sense :)

[roderickfung]

bump for this!

[neilshah2000]

Would be great to manually have some attributes on a new line and some on the same line. Then i can decide which one i want and everything else is automatically formatted. Thanks

[Andikki]

@bitwiseman I don't think aligning is necessary, but if it is, there have to be two options - one to apply the usual indent_size, another to align — all while keeping the initial line breaks.

Example
Source:

<input type="text"     class="form-control"  autocomplete="off" 
      [(ngModel)]="myValue"          [disabled]="isDisabled" [placeholder]="placeholder" 
  [typeahead]="suggestionsSource" [typeaheadOptionField]="suggestionValueField" [typeaheadItemTemplate]="suggestionTemplate"   [typeaheadWaitMs]="300"
                        (typeaheadOnSelect)="onSuggestionSelected($event)" />

Forcing indentation only:

<input type="text" class="form-control" autocomplete="off" 
  [(ngModel)]="myValue" [disabled]="isDisabled" [placeholder]="placeholder" 
  [typeahead]="suggestionsSource" [typeaheadOptionField]="suggestionValueField" [typeaheadItemTemplate]="suggestionTemplate" [typeaheadWaitMs]="300"
  (typeaheadOnSelect)="onSuggestionSelected($event)" />

Forcing alignment only:

<input type="text" class="form-control" autocomplete="off" 
       [(ngModel)]="myValue" [disabled]="isDisabled" [placeholder]="placeholder" 
       [typeahead]="suggestionsSource" [typeaheadOptionField]="suggestionValueField" [typeaheadItemTemplate]="suggestionTemplate" [typeaheadWaitMs]="300"
       (typeaheadOnSelect)="onSuggestionSelected($event)" />

[waldnercharles]

Not sure if this is the right issue to request this, but I feel like an auto-align option should act like auto; wrapping after a certain column cutoff, and if a line wraps, it treats the tag like force-align.

Example
Force-align when line length is greater than wrapLineLength:

<div [isWrapped]="false" [attributesAligned]="false"></div>

<really-long-angular-component-that-would-force-wrapping class="wrapped"
                                                         [isWrapped]="true"
                                                         [attributesAligned]="true">

[kaankucukx]

Almost surfed 5 or 6 topics where people looking forward to this feature to be implemented. Since its not, it would be great to have this on vscode with if wrap requries and force-alignment for this corresponding row vs.

😞

[bitwiseman]

@kaankucukx Not sure what you mean? Is it covered in previous examples?

[brokenalarms]

+1 for this, I currently have the best results with force for handlebars, but it still results in unwanted wrapping within my handlebars block:

   </label>
     {{#artdeco-hoverable-trigger placement="right"
      as
      |card|}}

and

  <ul class="text-ad-edit-panel__dropdown-list">
    {{#each yourCompanyPageTypes
      as
      |companyPageType
      index|}}

I just need to preserve the newlines of manually newlined attributes, but get the correct indentation.

[rwwagner90]

FWIW this does not work in any editor, that I have found, except for Intellij. Would love to see this implemented though!

[aimitservicesdev]

FWIW this does not work in any editor, that I have found, except for Intellij. Would love to see this implemented though!

Works in Netbeans as well.

[christoferd]

FWIW cannot get this working in VSCode
Developing wit Vue
Extensions: Prettier, Vetur
Formatting keeps reverting all html tags and attributes to one line. I've tread plenty of suggested solutions.
Would be great to know if people have this working within a .vue file in VSCode

[rwwagner90]

@christoferd that's what this issue is about. It does not work. js-beautify is not capable of keeping the line breaks. It's going to always set it to one line.

I keep going back to using WebStorm because they have their own formatter and it works with line breaks.

[MacKLess]

Related to #1404

[rwwagner90]

Thanks for working on a fix @MacKLess! I'm anxiously awaiting a new release, so I can try it out 😃