Js-beautify: HTML：属性の手動ラッピングを保持するオプションを追加します

これは素晴らしいアイデアです。どのオプションも手動でラップすることはできません。

autoは必要な数の属性のみをラップするため、折り返し行の長さ（デフォルトは120）がヒットした場合にのみforce|force-aligned|force-expand-multilineを実行するオプションがあると便利です。 auto-expand-multiline|auto-alignedオプションのようなものですか？

@Robula
2番目の段落にあるものについては新しい問題を開いてください。

@ Montago 、 @ Andikki-あなたが説明しているのは、 unchangedやpreserveような名前のオプションですよね？

@bitwisemanいいえ、「Force-Aligned」のような別のオプションです...代わりに「auto-aligned」

それがすべきことは、手動でラップされたすべての属性を単純に整列させることです。
他のすべての要素/属性は変更されません。

@ Montago-ああ、 align-only 。

ええ、それは理にかなっています:)

このためのバンプ！

新しい行にいくつかの属性を手動で設定し、同じ行にいくつかの属性を設定するのは素晴らしいことです。 次に、どれが欲しいかを決めることができ、他のすべては自動的にフォーマットされます。 ありがとう

@bitwiseman整列は必要ないと思いますが、必要な場合は、通常のインデントサイズを適用するオプションと整列するオプションの2つのオプションが必要です。すべて、最初の改行を保持します。

例
ソース：

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

インデントのみを強制する：

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

強制アライメントのみ：

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

これがこれを要求する正しい問題であるかどうかはわかりませんが、 auto-alignオプションはautoように機能するはずです。 特定の列のカットオフの後に折り返し、行が折り返されると、タグはforce-alignように扱われます。

例
行の長さがwrapLineLengthより大きい場合は、強制的に整列します。

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

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

この機能の実装を楽しみにしている人々が5つか6つのトピックをほぼサーフィンしました。 そうではないので、この対応する行とのラップ要件と強制調整を使用して、vscodeでこれを実行すると便利です。

😞

@kaankucukxどういう意味か

+1の場合、現在、ハンドルバーのforceで最良の結果が得られますが、それでもハンドルバーブロック内で不要な折り返しが発生します。

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

と

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

手動で改行された属性の改行を保持する必要がありますが、正しいインデントを取得します。

FWIWこれは、Intellijを除いて、私が見つけたどのエディターでも機能しません。 しかし、これが実装されるのを見たいです！

FWIWこれは、Intellijを除いて、私が見つけたどのエディターでも機能しません。 しかし、これが実装されるのを見たいです！

Netbeansでも動作します。

FWIWはこれをVSCodeで機能させることができません
ウィットVueの開発
拡張機能：Prettier、Vetur
フォーマットすると、すべてのhtmlタグと属性が1行に戻され続けます。 私は提案された解決策をたくさん踏みました。
VSCodeの.vueファイル内でこれが機能しているかどうかを知るのは素晴らしいことです

@christoferdそれがこの問題の内容です。 それは動作しません。 js-beautifyは改行を維持することができません。 常に1行に設定します。

WebStormには独自のフォーマッターがあり、改行で機能するため、WebStormの使用に戻ります。

＃1404に関連

@MacKLessの修正に取り組んでいただきありがとうございます。 新しいリリースを待ち望んでいるので、試してみることができます😃