vscodeフォーマットvueコード

HTMLのフォーマット:vue(template)
1.Vetur拡張のインストール
2.settingを構成する.json

[ファイル]-[プリファレンス]-[設定]-[拡張]-[Vetur]

を開く

vsCodeは、新たに設定とともにプルダウン選択となるように配置するが、右上の···ボタンをクリックして選択するsettingを開くことができる.json、ユーザー設定

を追加できます.

構成templateフォーマット

"vetur.format.defaultFormatter.html": "js-beautify-html",

ラベル内のプロパティの改行が好きではありません.

に設定できます.

"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        "wrap_attributes": "auto"
    },
    "prettyhtml": {
        "wrapAttributes": false,
        "printWidth": 100,
        "singleQuote": false,
        "sortAttributes": false
    }
},

ラベル内の属性を改行し、整列するには、

に設定できます.

"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        "wrap_attributes": "force-aligned"
        // #vue   html       
    }
},