# 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オプションと同じです。

ここに広告を掲載しませんか？

[メールでお問い合わせ](mailto:hi@dennn.is?subject=OneClick%20Pro%E3%81%A7%E3%81%AE%E5%BA%83%E5%91%8A%E6%8E%B2%E8%BC%89)

[広告 WordPress向けのエージェント対応プラグインスイート。](https://sleekwp.com/?ref=oneclickpro)