VSCodeの設定【自動整形による要素内の折返し】

Question

開発環境

VSCode - latest version
beautify (保存時に自動整形するためにいれました)

問題

タグ内で要素ごとに折り返しされることで逆に読みにくいが、設定の変更項目がわからないため読みにくい

理想

<span v-for="id in task.labelIds" v-bind:key="id">
  {{ getLabelText(id) }}
</span>

現在

<span
   v-for="id in task.labelIds"
   v-bind:key="id"
 >{{ getLabelText(id) }}</span>

Answer 1

BeautifyのSettingsを見る限りwrap_attributesの値を適当にセットすればいいのではないかと思います(試していません)。

[String] Wrap attributes to new lines. "auto", "force", "force-aligned", "force-expand-multiline", "align-multiple", "preserve", or "preserve-aligned"

preserveなら書いたままになると思いますが、他の値も試してみてください。

プロジェクトのルートフォルダーに.jsbeautifyrcを作ってそこにjson形式で上記のリンクの設定を書くと反映されるはずです。

Comments

[susiyaki]

設定ファイルを編集してpreserveにしてみたのですが、一定の要素数（もしくは文字数）以上のものは開業されたままでした。
一行あたりの最大文字数を設定するWrap Line Lengthも変更してみたのですが動作しなかったため諦めることにします。

[karamarimo]

先に確認しておくべきでしたが、.vueファイルか.htmlファイルのどちらでしょうか。

[susiyaki]

.vueファイルです。
記入漏れしていましたすみません。

[karamarimo]

こちらでBeautifyをインストールした状態で .jsbeautifyrc なしでコマンドパレットから"Beautify file">"HTML"をしてみましたが、改行はされませんでした。
VSCodeのSettingsあるいは他の拡張機能が影響している可能性が考えられます。

[susiyaki]

確認のためわざわざ実施して頂きありがとうございます！
ほかを当たってみたのですがなかなか難しいのでbeautify以外で対応したいと思います。