JSXフォーマッター
このJSXフォーマッターで、Reactコンポーネントやその他のJSXを整形できます。コードを貼り付けると、JSXを使ってJavaScriptモジュールとして解析し、JavaScriptを2スペースのインデントとセミコロン付きで出力します。複数行のJSX要素は、入れ子のタグが括弧内の独立した行に配置されます。構文エラーも報告されるため、React開発者はレビュー、デバッグ、ドキュメント作成に使える読みやすいコンポーネントをすぐに得られます。
よくある質問
JSXフォーマッターの仕組みは？
まずJSXを有効にして、JavaScriptモジュールとしてコードを解析し、一貫したスタイルで出力します。JSX要素はHTMLフォーマッターと同じルールで配置されるため、入れ子になったブロックタグはそれぞれ独立したインデント付きの行になります。
複数行のJSX要素はどのように記述されますか？
要素にdiv、section、p、ul、h1などのブロックレベルの子要素が含まれる場合、各子要素は独立した行に配置され、要素全体が括弧で囲まれます。単一のコンポーネントタグなど、1行に収まる要素はインラインのままです。
フラグメントと自己終了コンポーネントに対応していますか？
はい、<>と</>で記述するフラグメントや、<Item key={1}/>のような自己終了コンポーネントも解析され、そのまま保持されます。属性や波括弧内の式も記述どおりにコピーされます。
構文エラーがあるとどうなりますか？
解析は停止し、予期しないトークンなどのエラーメッセージが表示されます。不完全な整形済みコードが返されることはありません。報告された箇所を修正して、もう一度整形してください。
JavaScript部分にはどのようなスタイルが使われますか？
ブロックは2スペースでインデントされ、文ごとに1行を使い、演算子の前後にスペースを入れ、文末にセミコロンを付けます。スタイルを変更するオプションはありません。
コメントは保持されますか？
はい、JavaScript内の行コメントとブロックコメントは保持されます。JSX式内のコメントは波括弧の中に残ります。
TSXファイル内のTypeScriptに対応していますか？
いいえ。このツールが解析するJSXの文法には型注釈が含まれないため、型付きのTSXは構文エラーとして拒否されます。型付きコードにはTypeScriptフォーマッターを使用してください。
整形するとコンポーネントの表示は変わりますか？
JavaScriptは再出力されるだけです。JSXの配置ではブロック要素間の空白が変わりますが、別々の行にある場合、Reactはその空白を無視します。正確な間隔が重要な場合は、タグの隣にあるインラインテキストを確認してください。
出力がjavascriptとしてコードフェンスで囲まれているのはなぜですか？
JSXはJavaScriptの拡張なので、結果はjavascriptと記されたMarkdownコードブロックとして返されます。.jsxファイルには、フェンスの間の行をコピーしてください。
コンポーネントのサイズ上限はどれくらいですか？
1回につき最大5 MBのコードを処理できます。それを超える入力はメッセージとともに拒否されます。出力はCode FormatterのJSXオプションと同じです。