Js-beautify: HTML: agregue una opción para conservar el ajuste manual de atributos

Esta es una gran idea, ninguna de las opciones permite envolver manualmente.

Sería genial tener una opción que realizara force|force-aligned|force-expand-multiline solo si la longitud de la línea de ajuste (120 por defecto) se ha alcanzado ya que auto envuelve solo tantos atributos como sea necesario. ¿Algo así como auto-expand-multiline|auto-aligned opciones?

@Robula
Por favor, abra un nuevo problema para lo que tiene en su segundo párrafo.

@Montago , @Andikki : lo que está describiendo es una opción llamada algo así como unchanged o preserve , ¿correcto?

@bitwiseman no, solo otra opción como "

Lo que debería hacer es simplemente alinear todos los atributos que se han envuelto manualmente.
todos los demás elementos/atributos están intactos.

@Montago - Ah, entonces más como align-only .

sí, eso tiene sentido :)

golpe por esto!

Sería genial tener manualmente algunos atributos en una nueva línea y algunos en la misma línea. Entonces puedo decidir cuál quiero y todo lo demás se formatea automáticamente. Gracias

@bitwiseman No creo que la alineación sea necesaria, pero si lo es, debe haber dos opciones: una para aplicar el tamaño de sangría habitual y otra para alinear, todo mientras se mantienen los saltos de línea iniciales.

Ejemplo
Fuente:

<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)" />

Sangría forzada solamente:

<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)" />

Alineación forzada solamente:

<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)" />

No estoy seguro de si este es el problema correcto para solicitar esto, pero siento que una opción auto-align debería actuar como auto ; envolviendo después de un cierto corte de columna, y si una línea se ajusta, trata la etiqueta como force-align .

Ejemplo
Forzar la alineación cuando la longitud de la línea es mayor que wrapLineLength:

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

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

Casi navegué 5 o 6 temas donde la gente esperaba con ansias que se implementara esta función. Dado que no lo es, sería genial tener esto en vscode con requisitos de envoltura y alineación forzada para esta fila correspondiente vs.

😞

@kaankucukx ¿ No

+1 para esto, actualmente tengo los mejores resultados con force para el manillar, pero aún resulta en un envoltorio no deseado dentro de mi bloque de manillar:

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

y

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

Solo necesito conservar las líneas nuevas de los atributos con líneas nuevas manualmente, pero obtener la sangría correcta.

FWIW esto no funciona en ningún editor que haya encontrado, excepto Intellij. ¡Sin embargo, me encantaría ver esto implementado!

FWIW esto no funciona en ningún editor que haya encontrado, excepto Intellij. ¡Sin embargo, me encantaría ver esto implementado!

Funciona en Netbeans también.

FWIW no puede hacer que esto funcione en VSCode
Desarrollo con Vue
Extensiones: Prettier, Vetur
El formateo sigue revirtiendo todas las etiquetas y atributos html a una sola línea. He pisado un montón de soluciones sugeridas.
Sería genial saber si las personas tienen esto funcionando dentro de un archivo .vue en VSCode

@christoferd, de eso se trata este problema. No funciona. js-beautify no es capaz de mantener los saltos de línea. Siempre lo establecerá en una línea.

Sigo volviendo a usar WebStorm porque tienen su propio formateador y funciona con saltos de línea.

Relacionado con #1404

¡Gracias por trabajar en una solución @MacKLess! Estoy esperando ansiosamente un nuevo lanzamiento, así que puedo probarlo 😃