コンテンツへスキップ

Flowフォーマッター

このFlow FormatterでFlowの型付きJavaScriptを整形できます。型エイリアス、厳密オブジェクト型、注釈付き関数、@flowプラグマを含むコードを貼り付けると、トークンごとにレイアウトを整えます。インデントはスペース2つ、型注釈と演算子の前後にスペースを入れ、文末にセミコロンを付け、厳密オブジェクトの中かっこは詰めて配置します。レビュー、移行、ドキュメント用にコードスニペットを整えたいFlowコードベースの開発者に便利です。

リセット

よくある質問

Flow Formatterはどのように動作しますか?

中かっこ、セミコロン、演算子、文字列、コメントなどのトークンにコードを分割し、それらを基にレイアウトを再構成します。ブロックはスペース2つでインデントし、文末にはセミコロンを付け、演算子の前後には一貫した間隔を設けます。

厳密オブジェクト型はどのように整形されますか?

厳密オブジェクト型では、縦棒を中かっこのすぐ内側に置き、その内側にスペースを入れます。例: type Props = {| name: string, age: number |}。型内のコロンとカンマの後のスペースは統一されます。

@flowコメントは保持されますか?

はい。// @flowプラグマと、その他すべての行コメントおよびブロックコメントが保持されます。行コメントは必ず行末で終わるため、続くコードは次の行から始まります。

フォーマッターはコードの型チェックをしますか?

いいえ。Flowの実行も構文検証もしないため、未完成のスニペットも整形できます。型エラーを見つけるには、プロジェクトでflow checkを実行してください。

ジェネリクスと型パラメーターは保持されますか?

はい。Array<string>やMap<K, V>などの型の山かっこを追跡し、比較演算子と誤認しないようにします。かっこ内のカンマの後のスペースは統一されます。

インデント幅を変更できますか?

いいえ。出力には常にスペース2つが使われ、スタイルのオプションはありません。これにより、実行ごと、チームメンバー間で整形結果が一貫します。

文字列は変更されますか?

いいえ。文字列リテラル、テンプレートリテラル、正規表現は記述どおりにコピーされます。変更されるのはトークン間の空白だけです。

出力がjavascriptとしてコードフェンスで囲まれているのはなぜですか?

FlowはJavaScript型付きなので、結果はjavascriptと記されたMarkdownコードブロックとして返され、多くのハイライト機能で正しく表示されます。.jsまたは.flowファイルには、フェンスの間の行をコピーしてください。

整形するとコードの動作が変わりますか?

このツールは空白を並べ替え、文末にセミコロンを追加するだけです。セミコロンなしで始まり、括弧または角括弧で始まる行にコードが依存している場合は、結果を確認してください。

フォーマットできるコードの量はどれくらいですか?

1回につき最大5 MBのコードを処理できます。それを超える入力はメッセージとともに拒否されます。結果はCode FormatterのFlowオプションと同じです。

OneClick Proについて

OneClick Proは、日々の作業に役立つ150以上のウェブツールを集めた無料コレクションです。画像や単位の変換、コードの整形と検証、ドメインやSEOの確認、テキスト、日付、数値の処理などに利用できます。すべてのツールは登録やサブスクリプションなしで使えます。入力した内容は結果の計算にのみ使用され、保存されることはありません。単発の作業に使える便利なツールボックスとして、または毎日使うツールをブックマークしてご活用ください。