コードビューティファイアー

定評あるフォーマッターで、14 言語のコードを統一された書式に整形します。JavaScript、TypeScript、HTML、CSS、SQL、PHP、Python などに対応し、ブラウザ内で動作します。

出力

すべてブラウザ内で実行されます。データがアップロードされることはありません。

関連ツール

すべて表示

コードビューティファイアーとは?

コードビューティファイアーは、1 つのページで多くの言語のソースコードを整形します。言語とインデントを選ぶと、定評あるフォーマッター(Prettier、Ruff、sql-formatter、xml-formatter)により、統一された形式のコードが得られます。

コードビューティファイアーの使い方

  1. 言語 を選びます。
  2. インデント を選びます。
  3. コードを貼り付けて 整形 をクリックします(ほとんどの言語では入力中にも更新されます)。
  4. 結果をコピーまたはダウンロードします。

例

入力
const a={b:1,c:[1,2]}
出力
const a = { b: 1, c: [1, 2] };

言語:JavaScript、スペース 2 つ。

コードビューティファイアーを使うべき場面

ツールを持っていない言語のコードを手早く整形したり、ドキュメント用にスニペットを整形したりするときに使います。プロジェクトでは、出力が一貫するよう、エディターや CI で同じフォーマッターを設定してください。整形でロジックのエラーが直ることはありません。

コードビューティファイアーの仕組み

選択した言語によってエンジンが決まります。JavaScript(Babel パーサー)、TypeScript、HTML、CSS、SCSS、Less、YAML、GraphQL、Markdown、PHP(@prettier/plugin-php)には Prettier 3、JSON には厳密な JSON プリンター、XML には xml-formatter、SQL には sql-formatter(標準 SQL、大文字のキーワード)、Python には WebAssembly にコンパイルされた Ruff を使います。エンジンは初めて使うときにだけダウンロードされます。構文エラーは、エンジンが提供する場合は行と列付きで報告されます。

一般的な使用例

  • Prettier をインストールせずに TypeScript のスニペットを整形する
  • チャットや PDF からコピーしたコードを整える
  • Markdown の表やリストを整形する
  • コードのインデントをスペース 2 つと 4 つの間で切り替える

セキュリティ注意事項

すべてブラウザ内でローカルに処理され、貼り付けたコードがアップロードされることはありません。

よくある質問

JavaScript の整形にはどのスタイルが使われますか?

Prettier の既定値で、ダブルクォート、セミコロン、80 文字の行です。

Python が初回に遅いのはなぜですか?

Ruff の WebAssembly エンジンが初回の使用時にダウンロードされるためです。

SQL の方言を選べますか?

方言やキーワードの大文字・小文字のオプションは、SQL フォーマッターのページを使ってください。

おすすめの次のステップ

エスケープ/アンエスケープ
JSON、JavaScript、HTML、XML、URL コンポーネント、正規表現、SQL リテラル、CSS 文字列、シェル引数向けに、文字列をエスケープ・アンエスケープできる 1 つのツールです。
CSSセレクターテスター
貼り付けたHTMLに対してCSSセレクターをテストし、一致するすべての要素をマークアップとテキストとともに表示します。querySelectorAllを使うため、結果はブラウザと完全に一致します。
CSS box-shadowジェネレーター
CSSのbox-shadowを視覚的に作成します。複数レイヤーの重ね、オフセット、ぼかし、広がり、inset、RGBAの不透明度に対応し、ライブプレビューで見ながらコードをコピーできます。
CSSグラデーションジェネレーター
ドラッグできるカラーストップ、角度、繰り返しモード、OKLCH補間に対応した、線形・放射・円錐のCSSグラデーションを設計します。ライブプレビューで確認し、コードをコピーできます。
CSS Flexboxジェネレーター
flex-direction、wrap、justify-content、align-items、gapと、アイテムごとのflex、order、align-selfを視覚的に設定します。子要素のライブプレビューとコピー可能なCSS付きです。
CSS Gridジェネレーター
CSS Gridレイアウトを視覚的に作成します。grid-template-columns/rows、検証付きの名前付きエリア、gap、揃え、アイテムごとの配置に対応し、きれいなCSSをコピーできます。

他のカテゴリを見る