Vueフォーマッター
このVue単一ファイルコンポーネントをVueフォーマッターで整形します。コンポーネントを貼り付けると、スクリプトブロックをJavaScriptとして、langがtsの場合はTypeScriptとして整形します。また、styleブロックはlang属性に応じてCSS、SCSS、またはLessとして整形し、どちらの内容もタグの下にインデントします。templateブロックは1行のまま保持し、空白をまとめます。Vue開発者がレビューやドキュメント作成に向けてコンポーネントを整理するのに便利です。
よくある質問
Vueフォーマッターはコンポーネントの何を変更しますか？
scriptブロックとstyleブロックの内容を整形し、各トップレベルブロックをそれぞれ別の行に配置します。各ブロック内のコードは、開始タグの下に2つのスペースでインデントします。
templateブロックはどのように処理されますか？
templateブロックは1行のまま保持され、連続する空白は1つのスペースにまとめられます。v-if、v-for、:prop、@event、mustache式などのディレクティブは、記述どおりにコピーされます。
scriptブロックはどのように整形されますか？
通常のscriptブロックは解析され、2つのスペースでインデントし、セミコロンを付けてJavaScriptとして出力されます。lang="ts"の場合はTypeScriptとして整形され、型注釈にも対応します。
styleブロックはどのように整形されますか？
styleブロックは既定でCSSとして整形され、宣言ごとに1行で表示されます。lang="scss"またはlang="less"の場合は、SCSSまたはLessのルールで整形され、scoped属性はそのまま保持されます。
scriptに構文エラーがあるとどうなりますか？
JavaScriptブロックとCSSブロックは解析されるため、構文エラーがあるとツールは停止し、エラーメッセージが表示されます。報告された問題を修正して、もう一度整形してください。
script setupに対応していますか？
はい。setup属性はタグに保持され、内容はほかのscriptブロックと同様に整形されます。definePropsなどのコンパイラマクロは、フォーマッターでは通常の関数呼び出しとして扱われます。
インデントを変更できますか？
いいえ。フォーマッターは常に2つのスペースを使い、オプションはありません。同じコンポーネントからは常に同じ出力が得られます。
コメントは保持されますか？
はい。ブロック間のHTMLコメントと、scriptおよびstyleブロック内のコメントは保持されます。template内のコメントは、1行のtemplate内で元の位置に残ります。
結果がhtmlとしてコードフェンスで囲まれるのはなぜですか？
単一ファイルコンポーネントはHTMLとして読み込まれるため、結果はhtmlと指定されたMarkdownコードブロックとして返されます。コードフェンスの間の行をコピーして、.vueファイルに貼り付けてください。
コンポーネントのサイズ上限はどれくらいですか？
1回につき最大5 MBです。これを超える入力はメッセージとともに拒否されます。出力はCode FormatterのVueオプションと同じです。