Js-beautify: HTML: adicione uma opção para preservar o encapsulamento manual de atributos

Esta é uma ótima ideia, nenhuma das opções permite o embrulho manualmente.

Seria ótimo ter uma opção que executasse force|force-aligned|force-expand-multiline apenas se o comprimento da linha de quebra (padrão 120) fosse atingido, pois auto quebra apenas quantos atributos forem necessários. Algo como auto-expand-multiline|auto-aligned opções?

@Robula
Por favor, abra um novo problema para o que você tem em seu segundo parágrafo.

@Montago , @Andikki - o que você está descrevendo é uma opção chamada unchanged ou preserve , correto?

@bitwiseman não, apenas outra opção como "Force-Aligned" ... mas em vez disso "auto-aligned"

O que ele deve fazer é simplesmente alinhar todos os atributos que foram encapsulados manualmente.
todos os outros elementos/atributos permanecem intocados.

@Montago - Ah, então mais como align-only .

sim faz sentido :)

bata por isso!

Seria ótimo ter manualmente alguns atributos em uma nova linha e alguns na mesma linha. Então eu posso decidir qual eu quero e todo o resto é formatado automaticamente. Obrigado

@bitwiseman Eu não acho que o alinhamento seja necessário, mas se for, deve haver duas opções - uma para aplicar o indent_size usual, outra para alinhar - tudo isso mantendo as quebras de linha iniciais.

Exemplo
Fonte:

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

Forçando apenas o recuo:

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

Forçando apenas o alinhamento:

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

Não tenho certeza se este é o problema certo para solicitar isso, mas sinto que uma opção auto-align deve agir como auto ; quebrando após um determinado corte de coluna e, se uma linha quebra, trata a tag como force-align .

Exemplo
Force-align quando o comprimento da linha for maior que wrapLineLength:

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

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

Quase surfei 5 ou 6 tópicos onde as pessoas anseiam por essa funcionalidade ser implementada. Como não é, seria ótimo ter isso no vscode com if wrap requries e force-alignment para esta linha correspondente vs.

😞

@kaankucukx Não tem certeza do que você quer dizer? Está coberto nos exemplos anteriores?

+1 para isso, atualmente tenho os melhores resultados com force para guidão, mas ainda resulta em envolvimento indesejado no meu bloco de guidão:

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

e

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

Eu só preciso preservar as novas linhas de atributos de nova linha manualmente, mas obter o recuo correto.

FWIW isso não funciona em nenhum editor que encontrei, exceto no Intellij. Mas adoraria ver isso implementado!

FWIW isso não funciona em nenhum editor que encontrei, exceto no Intellij. Mas adoraria ver isso implementado!

Funciona no Netbeans também.

FWIW não pode fazer isso funcionar no VSCode
Desenvolvendo a inteligência Vue
Extensões: Prettier, Vetur
A formatação continua revertendo todas as tags e atributos html para uma linha. Eu pisei muitas soluções sugeridas.
Seria ótimo saber se as pessoas têm isso funcionando em um arquivo .vue no VSCode

@christoferd é disso que se trata este problema. Não funciona. js-beautify não é capaz de manter as quebras de linha. Ele sempre vai configurá-lo para uma linha.

Eu continuo voltando a usar o WebStorm porque eles têm seu próprio formatador e funciona com quebras de linha.

Relacionado a #1404

Obrigado por trabalhar em uma correção @MacKLess! Aguardo ansiosamente um novo lançamento, para poder experimentar 😃