+1, moi et mon équipe avons besoin de la même fonctionnalité, et il semble que ce soit la même fonctionnalité que celle demandée ici : https://github.com/beautify-web/js-beautify/issues/1262
J'ai également vu cette fonctionnalité exacte demandée sur VSCode github : https://github.com/Microsoft/vscode/issues/2204 (dernier commentaire)

J'ai joué un peu avec le code source et j'ai une implémentation qui semble fonctionner : une nouvelle option pour "wrap_attributes" - "aligned" qui ne force pas les attrs à s'enrouler à moins que la longueur de la ligne ne soit atteinte, et les aligne correctement lorsque le la ligne est bouclée.

Quelque chose comme ça peut-il fonctionner, @bitwiseman ?

Si oui, nous pourrions discuter des détails ou je peux ouvrir un PR. (Mais pour être honnête, je ne suis pas exactement un expert open source et un peu confus au sujet des tests et de la version python et ainsi de suite). Eh bien, l'embellisseur html n'existe pas en python, alors ce n'est peut-être pas un problème :) Donc, les conseils sont appréciés !

@cheerypick
Merci d'avoir pris le temps de mettre cela en œuvre.

Oui, vous n'avez pas à vous soucier de la version python pour les changements d'embellisseur HTML - il n'y a pas encore d'implémentation python pour ce module.

Pour les tests, assurez-vous que vous pouvez exécuter la construction et qu'elle fonctionne localement. Ensuite, mettez à jour test/data/html/tests.js . Lorsque vous exécutez à nouveau la génération, elle régénère les tests exécutables à partir de ce fichier de données. Vous pouvez en voir un exemple dans #1158 . Si vous voulez d'abord essayer quelques tests simples, cool. Si vous pouvez comprendre le fonctionnement de la génération de test matrix , ajoutez votre nouvelle valeur à l'attribut wrap tests à test/data/html/tests.js#L323 .

Quoi qu'il en soit, n'hésitez pas à démarrer un PR quand vous le souhaitez et nous pourrons en discuter là-bas.

Merci encore.

(Si vous souhaitez mettre à jour CONTRIBUTING.md avec des instructions supplémentaires que vous jugez nécessaires, cela serait également apprécié mais pas obligatoire.)

@cheerypick - Merci également d'avoir noté le doublon. Veuillez poursuivre cette discussion au #1262.

Une remarque à ce sujet : je cherchais en fait la combinaison de ces deux paramètres, mais maintenant, comme l'exemple proposé. Ce dont j'ai besoin, c'est que VSCode laisse les attributs seuls, et lorsque l'élément devient plus long que 120, il alignera les attributs sur de nouvelles lignes, donc ce que je voudrais est le suivant :

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

à:

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

Remarquez la deuxième entrée, où il faut laisser les attributs seuls, car ils ne dépassent pas 120 caractères + ils sont déjà alignés.

Donc, ce que je voudrais voir, c'est au lieu d'une force, assurez-vous qu'ils sont alignés lorsqu'ils sont sur plusieurs lignes et mettez-les sur plusieurs lignes lorsque la ligne dépasse 120 caractères.

Visual Studio (pas Code) formate HTML de cette façon (aligné, mais pas forcé) par défaut. Ce serait bien si Code le pouvait aussi.

Veuillez ajouter la fonctionnalité afin que mon code de modèle html ne devienne pas extrêmement long.

Ceci est fortement souhaité. @cheerypick envisagez -vous toujours de faire un PR pour cela ?

Ne fonctionne pas pour moi dans VSCode.
Dans le fichier .vue
Extensions : Prettier, Vetur
:-(

@christoferd
Je ne sais pas ce que vous dites, s'il vous plaît venez discuter sur le canal gitter plutôt que d'ajouter des commentaires à un problème fermé.

J'ai revu ce problème après avoir mis à jour le VScode vers la dernière version. Version 1.30.2 sur Mac OS High Sierra. Il était réglé sur automatique et tout à coup, mon code commence à s'enrouler. Essayé d'aligner la force et cela ne fonctionne pas non plus.

@aybhalala @christoferd Veuillez être précis sur ce que vous voyez. Venez discuter sur gitter ou ouvrir un nouveau sujet.

@bitwiseman Désolé. Je viens de comprendre que c'était un problème avec le plugin Prettier. Merci d'avoir répondu.