+1, mi equipo y yo necesitamos la misma función, y parece ser la misma función que se solicita aquí: https://github.com/beautify-web/js-beautify/issues/1262
También vi esta característica exacta solicitada en VSCode github: https://github.com/Microsoft/vscode/issues/2204 (último comentario)

Jugué un poco con el código fuente y tengo una implementación que parece funcionar: una nueva opción para "wrap_attributes" - "alineado" que no obliga a los atributos a ajustarse a menos que se alcance la longitud de la línea, y los alinea correctamente cuando el la línea está envuelta.

¿Puede algo como esto funcionar, @bitwiseman?

Si es así, podríamos discutir los detalles o puedo abrir un PR. (Pero para ser honesto, no soy exactamente un experto en código abierto y estoy un poco confundido acerca de las pruebas y la versión de python y todo eso). Bueno, el embellecedor html no existe en python, así que tal vez no sea un problema :) ¡Así que se agradece la orientación!

@cheerypick
Gracias por tomar un giro en la implementación de esto.

Sí, no necesita preocuparse por la versión de python para los cambios en el embellecedor de HTML; todavía no hay una implementación de python para ese módulo.

Para realizar pruebas, asegúrese de que puede ejecutar la compilación y que funciona localmente. Luego actualice test/data/html/tests.js . Cuando vuelva a ejecutar la compilación, volverá a generar las pruebas ejecutables de ese archivo de datos. Puedes ver un ejemplo de esto en #1158 . Si quieres probar algunas pruebas simples primero, genial. Si puede comprender la forma en que funciona la generación de pruebas matrix , agregue su nuevo valor a las pruebas de ajuste de atributos en test/data/html/tests.js#L323 .

Cualquiera que sea el caso, siéntase libre de iniciar una RP cuando lo desee y podemos discutir allí.

Gracias de nuevo.

(Si desea actualizar CONTRIBUTING.md con cualquier instrucción adicional que considere necesaria, también sería apreciada pero no obligatoria).

@cheerypick - Además, gracias por notar el duplicado. Continúe esta discusión en el n.º 1262.

Una nota al margen sobre esto: en realidad estaba buscando la combinación de esas dos configuraciones, pero ahora me gusta el ejemplo propuesto. Lo que necesito es que VSCode deje los atributos solos, y cuando el elemento tenga más de 120, alineará los atributos en nuevas líneas, entonces lo que querría es lo siguiente:

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

a:

<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 la segunda entrada, donde debe dejar los atributos solos, porque no tienen más de 120 caracteres y ya están alineados.

Entonces, lo que me gustaría ver es que, en lugar de una fuerza, asegúrese de que estén alineados cuando estén en varias líneas y colóquelos en varias líneas cuando la línea supere los 120 caracteres.

Visual Studio (no Code) formatea HTML de esta manera (alineado, pero no forzado) de forma predeterminada. Sería bueno si Code también pudiera.

Agregue la función para que el código de mi plantilla html no sea extremadamente largo.

Esto es muy deseado. @cheerypick , ¿todavía estás planeando hacer relaciones públicas para esto?

No me funciona en VSCode.
En archivo .vue
Extensiones: Prettier, Vetur
:-(

@cristoferd
No sé lo que está diciendo, por favor venga a chatear en el canal gitter en lugar de agregar comentarios a un problema cerrado.

Volví a ver este problema después de actualizar VScode a la última versión. Versión 1.30.2 en Mac OS High Sierra. Se configuró en automático y, de repente, mi código comienza a ajustarse. Intenté forzar la alineación y tampoco funciona.

@aybhalala @christoferd Sea específico sobre lo que está viendo. Ven a chatear en gitter o abre un nuevo número.

@bitwiseman Lo siento. Acabo de darme cuenta de que era un problema con el complemento Prettier. Gracias por responder.