無料 · 開発
コードフォーマッター（Prettier）.
JavaScript・TypeScript・JSX・JSON・CSS・SCSS・Less・HTML・Vue・Markdown・YAML・GraphQL をブラウザー上の Prettier で整形し、ライブプレビューで確認できます。
Formatting engine: Prettier 3 (MIT), running in your browser. Formatting changes layout only, never what the code does; comments are kept.
Prettier でコードを整形する
Your codeにコードを貼り付けるか、Open a fileを押します。Detect automaticallyのままにするか、言語を選びます：JavaScript・JSX・TypeScript・JSON・CSS・SCSS・Less・HTML・Vue・Markdown・YAML・GraphQL。- 行幅とインデントを設定し、JavaScript と TypeScript ではセミコロン・引用符・末尾のカンマも選べます。結果は入力に合わせて更新されます。
Copy result・Download・Replace my codeを押します。
例：const a={b:1,c:[1,2,3]};function f(x){return x*2} は 1 行のオブジェクトと、スペース 2 つでインデントされた関数ブロックになり、各文の末尾にセミコロンが付きます。
整形で変わるもの
Prettier は空白・改行・インデント・引用符・カンマを書き直し、コードを一貫したスタイルにそろえます。コードの動作が変わることはなく、コメントも残ります。構文エラーがあると整形せず、(1:10) のように行と列をメッセージで示します。
言語ごとの専用オプションが必要なら JSON フォーマッター や SQL フォーマッター、本番用に JavaScript を小さくするなら JavaScript 圧縮ツール を使ってください。
制限と対応形式
入力内容はお使いの端末で処理されます。
英語の技術説明
Files up to 2 MB. Code with syntax errors is not formatted; the error shows the line and column. Formatting changes layout only, never behaviour; comments are kept.
Uses Prettier 3 standalone (MIT) with only the parsers the chosen language needs, loaded on demand in your browser. Same output rules as Prettier on the command line for the options shown.
const a={b:1,c:[1,2,3]};function f(x){return x*2} becomes const a = { b: 1, c: [1, 2, 3] }; followed by a function block indented with two spaces.
よくある質問
コードはアップロードされますか？
いいえ。Prettier はブラウザー内で動き、選んだ言語に必要なパーサーだけを読み込みます。
結果は手元のパソコンの Prettier と同じですか？
ここに表示されているオプションについては同じです。プロジェクトの設定ファイルなしで Prettier 3 そのものを使っています。
コードが整形されないのはなぜですか？
パーサーが構文エラーを見つけています。メッセージに示された行と列を修正するか、正しい言語が選ばれているか確認してください。