使い方
- コードを貼り付けるか、「サンプルを読み込む」をクリックして試します。
- JavaScript、TypeScript、JSON のいずれかを選び、インデント、行の幅、セミコロン、クォートのスタイルを設定します。
- 「整形」をクリックするか、Ctrl+Enter（Mac では ⌘+Enter）を押します。
- 整形されたコードをコピーします。
オプションの説明
- インデント
- スペース 2 個は Prettier のデフォルトで、JavaScript プロジェクトで最も一般的なスタイルです。「タブ」を選ぶとタブ文字でインデントします。
- 行の幅
- この文字数を超える式を Prettier が折り返します。デフォルトは 80 です。
- セミコロン
- オフにすると文末のセミコロンを省略します。省略すると意味が変わってしまう箇所には、Prettier が引き続きセミコロンを付けます。
- シングルクォート
- 文字列に "ダブル" ではなく 'シングル' のクォートを使います。ただし、そのほうがエスケープが増える場合は除きます。
例
圧縮されたバンドル。 1 行に圧縮されたコード片を貼り付ければ、何をしているのか読めるようになります。整形するとインデントと改行が戻りますが、短い変数名は短いままです。
チームのスタイル。 プロジェクトの Prettier 設定に合わせられます。たとえば、スペース 4 個のインデント、セミコロンなし、シングルクォートなどです。
よくある質問
JSX や新しい構文にも対応していますか？
はい。JavaScript モードでは Babel のパーサーを使用しており、JSX、オプショナルチェーン、クラスフィールド、トップレベル await などの最新の構文を解釈できます。
構文エラーと表示されるのはなぜですか？
Prettier は整形の前にコードを解析する必要があるため、JavaScript として正しくないコードでは処理が止まります。メッセージに確認すべき行と列が表示されます。
整形後のコードの動作は変わりませんか？
変わりません。Prettier が変更するのは空白、改行、クォート、括弧、セミコロンだけで、いずれもコードの意味を保つ形で行われます。
コードはアップロードされますか？
いいえ。Prettier はブラウザ内で動作するため、コードが端末の外に出ることはありません。
プライバシー
このツールはすべてブラウザ内で動作します。ファイルやテキストはお使いの端末上で処理され、当サイトのサーバーにアップロードされることはありません。