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

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

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

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

出場者を紹介

ESLint: 探偵

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

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

より美しく: 美容師

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

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

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

彼らがやっていること

機能 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 はシャーロック ホームズです。ESLint は、卑劣な未使用変数や偶発的なグローバル スコープ宣言を検出します。
• より魅力的なのは近藤麻理恵です。コードを整理しますが、バグがあるかどうかは気にしません。

Prettier が存在する理由

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

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

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

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

でも、ESLint もフォーマットします…そうですよね?

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

• ESLint の書式設定ルールは Prettier と競合する可能性があります。
• コード品質ルールと書式設定ルールの両方を 1 つのツールで維持するのは…面倒です。

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

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

両方を使用する必要がありますか?

黄金律

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

上手に遊ばせる方法

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

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

1. Prettier がコードをフォーマットし、ESLint が本当のバグをキャッチできるようにします。

さらに美しくする必要がありますか?

次の場合:

• 書式設定ルールについての長い議論を嫌います ✓
• チーム全体で一貫したコードが必要です ✓
• 非常に独自の ESLint 設定 (Airbnb など) を使用し、そのフォーマットに満足していますが、そうではないかもしれません。

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

比較表: ESLint と Prettier

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

最終的な感想

• ESLint はコードのセーフティ ネットです。バグを捕捉し、ベスト プラクティスを適用し、品質を保証します。
• プリティターはあなたの平和維持者です。書式設定をめぐる引数を停止し、コードをすっきりとした見た目に保ちます。

TL;DR

Prettier を使用してフォーマットします。 ESLint を使用して分析します。迷った場合は、ツールはあなたの生活を難しくするのではなく、楽にするためにあるということを思い出してください。

チームとあなたの健全性にとって最も効果的なものを選択してください。

コーディングを楽しんでください。リントと書式設定が調和しますように!

---

私は LiveAPI というとても便利なツールに取り組んでいます。

開発者にとって API ドキュメントを簡単に作成できるように設計されています。

LiveAPI を使用すると、ユーザーがブラウザーから直接 API を実行できるインタラクティブな API ドキュメントを迅速に生成できます。

API のドキュメントを手動で作成するのにうんざりしている場合は、このツールを使用すると作業が楽になるかもしれません。

Lama2 から LiveAPI へ: 超便利な API ドキュメントの構築 (パート II)

Athreya aka Maneshwar for Hexmos ・ 2024 年 12 月 14 日

#webdev #javascript ＃プログラミング #初心者

以上がESLint 対 Prettier: コードベースに関する大論争の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。