+1, eu e minha equipe precisamos do mesmo recurso e parece ser o mesmo recurso solicitado aqui: https://github.com/beautify-web/js-beautify/issues/1262
Também vi esse recurso exato solicitado no VSCode github: https://github.com/Microsoft/vscode/issues/2204 (último comentário)

Brinquei um pouco com o código-fonte e tenho alguma implementação que parece funcionar: uma nova opção para "wrap_attributes" - "aligned" que não força os attrs a quebrar a menos que o comprimento da linha seja atingido e os alinha corretamente quando o linha é enrolada.

Algo assim pode funcionar, @bitwiseman?

Se sim, podemos discutir os detalhes ou posso abrir um PR. (Mas, para ser honesto, não sou exatamente um especialista em código aberto e um pouco confuso sobre os testes e a versão python e outros enfeites). Bem, html beautifier não existe em python, então talvez não seja um problema :) Portanto, a orientação é apreciada!

@cheerypick
Obrigado por tentar implementar isso.

Sim, você não precisa se preocupar com a versão python para alterações no embelezador HTML - ainda não há implementação python para esse módulo.

Para testar, verifique se você pode executar a compilação e se ela funciona localmente. Em seguida, atualize test/data/html/tests.js . Quando você executar a compilação novamente, ela gerará novamente os testes executáveis ​​desse arquivo de dados. Você pode ver um exemplo disso em #1158 . Se você quiser tentar alguns testes simples primeiro, legal. Se você puder entender como a geração de teste matrix funciona, adicione seu novo valor ao atributo wrap tests em test/data/html/tests.js#L323 .

Seja qual for o caso, sinta-se à vontade para iniciar um PR sempre que quiser e podemos discutir lá.

Obrigado novamente.

(Se você estiver disposto a atualizar o CONTRIBUTING.md com quaisquer instruções adicionais que achar necessárias, isso também seria apreciado, mas não obrigatório.)

@cheerypick - Além disso, obrigado por observar a duplicata. Por favor, continue esta discussão em #1262.

Uma nota lateral sobre isso: eu estava realmente procurando a combinação dessas duas configurações, mas agora como o exemplo proposto. O que eu preciso é que o VSCode deixe os atributos sozinhos, e quando o elemento ficar maior que 120, ele irá alinhar os atributos em novas linhas, então o que eu gostaria é o seguinte:

<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>

para:

<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>

Observe a segunda entrada, onde deve-se deixar os atributos sozinhos, pois não passam de 120 caracteres + já estão alinhados.

Então, o que eu gostaria de ver é em vez de uma força, certifique-se de que eles estejam alinhados quando em multilinhas e coloque-os em multilinhas quando a linha ultrapassar 120 caracteres.

O Visual Studio (não o Code) formata o HTML dessa maneira (alinhado, mas não forçado) por padrão. Seria bom se o Code pudesse também.

Por favor, adicione o recurso para que meu código de modelo html não fique extremamente longo.

Isso é altamente desejado. @cheerypick você ainda está planejando fazer um PR para isso?

Não está funcionando para mim no VSCode.
No arquivo .vue
Extensões: Prettier, Vetur
:-(

@christoferd
Não sei o que você está dizendo, por favor, venha conversar no canal do gitter em vez de adicionar comentários a um problema encerrado.

Eu vi esse problema novamente depois que atualizei o VScode para a versão mais recente. Versão 1.30.2 no Mac OS High Sierra. Ele foi definido como automático e, de repente, meu código começa a ser encapsulado. Tentei forçar o alinhamento e também não funciona.

@aybhalala @christoferd Por favor, seja específico sobre o que você está vendo. Venha conversar no gitter ou abra um novo problema.

@bitwiseman Desculpe. Acabei de descobrir que era um problema com o plugin Prettier. Obrigado por responder.