JavaScriptフォーマッター

PrettierはこのツールのフォーマットHの出力にとって単なるインスピレーションではありません — Prettierパッケージ自体であり、サーバー上のNode経由ではなくあなたのブラウザにダウンロードされて実行されるため、結果は同じ設定でローカルに`npx prettier`を実行するのとバイト単位で同一です。この区別が重要なのは、JavaScriptの整形が本当に近似が難しいためです: 正しく行うには、パターンと照合するのではなく言語を完全に解析する必要があり、Prettierの挙動を近似するだけのフォーマッターは、まさに重要なエッジケース — デコレータの中、複雑なジェネリック型、珍しいJSX式 — でプロジェクトの実際のPrettier設定と食い違うことになります。

JavaScriptには、波括弧とセミコロンを数えるだけの単純なアプローチを直接破綻させるいくつかの構造が含まれています。テンプレートリテラルはバッククォートの間に任意のテキストを含むことができ、まさにコードのように見える文字を含むこともあります — `` `function() { return "not real code"; }` ``は3つの文ではなく単一の文字列値であり、テンプレートリテラルの境界を追跡しないフォーマッターはこれを誤解します。正規表現リテラルはさらに悪く、`/{}/`は波括弧のように見えるが正規表現パターン自体の一部であり構造的構文ではない文字を含みます。自動セミコロン挿入は3つ目の難しさの層を加えます。JavaScriptは多くの文脈でセミコロンの省略を許可し、ナイーブな行ベースのフォーマッターが正しく再現する方法のないルールに従って文がどこで終わるかを推論するためです。Prettierがするように言語を本当に適切な構文木に解析することが、この3つすべての失敗モードを回避する方法です — この3つのうちどれか1つでも間違える手抜きフォーマッターは、本番コードにとって利便性ではなくリスクです。

Prettierはコードを整形します — 空白、改行、引用符スタイル、そして同様の表現上の選択を標準化します — そして、コードが正しいか、型安全か、エラーがないかを明示的にチェックしません。型エラー、未定義の変数参照、あるいはロジックエラーを持つファイルは、構文的に有効である限り文句を言わずに整形されます。整形と型チェックは別々のツールが扱う別々の関心事だからです。正しさをチェックするのはTypeScriptコンパイラ自体、あるいはESLintのようなリンターであり、このツールの仕事はコードに一貫した読みやすいスタイルを持たせることで終わります。

タブかスペースか、シングルクォートかダブルクォートか、セミコロンをつけるかどうか — これらの選択のどれもコードの実行方法に大きく影響しませんが、これらについての意見の相違は、正しさとは何の関係もないコードレビューの議論で本当の時間を消費していました。Prettierの本当の価値提案は、その議論をテーブルから完全に取り除くことです: 自動的にどこでも同一に適用される、小さく主張の強い整形ルールの集合は、その議論が繰り返しあらゆるプルリクエストで起こるのではなく、設定の中で一度だけ解決されることを意味します。

ここで公開されている各オプション — インデント幅、セミコロン、引用符スタイル — は実際のPrettier設定に対応しているため、既知の`.prettierrc`を持つプロジェクトのコードを貼り付けて、ここで同じ設定に合わせることで、そのプロジェクト自身のツールが生成するものを正確に再現できます。断片が実際どう整形されるかを確認するためだけにローカルに何かをインストールする必要はありません。