ESLint 対 Prettier: コードベースに関する大論争-jsチュートリアル-php.cn

ESLint 対 Prettier: コードベースに関する大論争

Patricia Arquette

リリース： 2025-01-15 12:31:43

オリジナル

932 人が閲覧しました

正直に言うと、JavaScript と TypeScript の開発者はツールについて議論するのが大好きです。

タブまたはスペース?セミコロンはありますか?そして今、（JavaScript 年に）古くからある質問です: ESLint、Prettier、または両方を使用するべきですか?

これは、ユーモアを散りばめ、開発者向けの洞察をたっぷりと盛り込んだ、この狂気を理解するのに役立つフレンドリーなガイドです。

出場者を紹介

ESLint は、バグを発見するだけでなく、コードスタイルについて一方的にアドバイスをくれる、非常に優秀なチームメイトです。

これは、コードが機能することを確認する静的コード分析ツールですそしてルール (もちろん、あなたのルール) に従っていることを確認します。

ESLint vs Prettier: The Great Debate for Your Codebase

プリティアーは、あなたの好みを聞かずにあなたの乱れた髪を直してくれる友達のようなものです。

それは独断的で冷酷であり、クリーンで一貫性のあるようにコードをフォーマットすることがすべてです。

その決定のすべてに同意するわけではないかもしれませんが、少なくとも一貫性はあります!

機能 ESLint さらにきれい

Feature	ESLint	Prettier
Report code errors	Yes	No
Automatically fix code errors	Yes	No
Add custom rules/options	Yes	No
Formatting	Yes	Yes
Opinionated configurations	Optional	Yes

コードエラーを報告はいいいえコードエラーを自動的に修正しますはいいいえカスタムルール/オプションを追加しますはいいいえフォーマットはいはい独自の構成オプションはいテーブル>

ESLint vs Prettier: The Great Debate for Your Codebase

Prettier が誕生したのは、フォーマットに関する議論に貴重な時間とエネルギーが費やされていたためです。

if キーワードの後にスペースを入れる必要がありますか?行の長さは 80 にするべきですか、それとも 100 にするべきですか?プリティアは「黙って、私に任せてください。」

コードベース全体を一貫した方法で再印刷し、スペースやタブを越えたバイクシェディングを過去のものにします。

トレードオフ?構成可能性が低い - Prettier が最善と考えるものに固執することになります。 (ネタバレ: 通常は大丈夫です。)

はい、しかし問題は次のとおりです:

ESLint 開発者自身も、lint とフォーマットの組み合わせが理想的ではないことを認めています。

Prettier の登場です。ESLint の書式設定の負担を軽減する専用フォーマッタです。

書式設定には Prettier を使用します。コード品質のために ESLint を使用します。

eslint-config-prettier をインストールします。これにより、Prettier と競合する可能性のある ESLint の書式設定ルールが無効になります。
それを .eslintrc 構成に追加します。

   {
     "extends": [
       "eslint:recommended",
       "plugin:prettier/recommended"
     ]
   }

ログイン後にコピー

次の場合:

Prettier は、一貫性が重要な大規模なチームで威力を発揮します。ただし、ソロで作業している場合、またはすでに ESLint のフォーマットに満足している場合は、ESLint なしでも問題なく過ごせるかもしれません。

Aspect	ESLint	Prettier
Nature	A static code analysis tool and linter for JavaScript, focused on identifying code issues	A code formatter designed to make code more readable and consistent
Primary Purpose	Ensures code quality and detects potential bugs	Focuses purely on consistent code formatting
Configuration	Highly customizable; rules are defined in a .eslintrc config file	Minimal customization; enforces standard formatting rules with optional tweaks in .prettierrc.json
Integration	Works with popular IDEs, offering real-time feedback and auto-fixing of linting issues	Easily integrates with IDEs to format files automatically on save