You're (Probably) Using Prettier Wrong

Theo - t3․gg

5 Jun 202306:04

Summary

TLDRこの動画は、コードフォーマッターとリンターの役割の違いについて説明しています。プレゼンターは、プレゼンターはES lintをコードフォーマッターとして使用することは適切ではなく、代わりにPrettierやDprintなどの専用フォーマッターを使用するべきだと主張しています。ES lintはコードの品質を管理するリンターであり、フォーマッティングとは異なる役割を持っているため、両者を混同すると効率が悪くなり、メンテナンスも大変になると警告しています。適切なツールを使い分けることで、コードの一貫性と品質が向上し、開発体験も改善されると述べられています。

Takeaways

👔 Prettierはコードのフォーマッタであり、eslintはコードのリンターであり、それぞれの役割が異なることを強調している。
✂️ コードのフォーマットとリンティングは根本的に異なる問題であり、eslintでフォーマットを行うべきではない。
🔄 Prettierは高速でコードをフォーマットするためのツールであり、eslintは複雑なコード解析とルールチェックを行うためのツールである。
🔩 Prettierを使ってフォーマットを行い、その後eslintでリンティングを行うのが適切なワークフローである。
⚙️ eslint-config-prettierプラグインを使用して、prettierと競合するeslintルールを無効にすることが推奨されている。
🚫 eslint-plugin-prettierを使ってprettierのルールをeslintで実行するべきではない。
🎯 Prettierはコードのフォーマットに専念し、eslintはコードの品質とベストプラクティスに専念すべきである。
🏆 eslintとprettierはオープンソースプロジェクトであり、メンテナがベストプラクティスを提供しているため、それに従うべきである。
🌱 create-react-appなどの初期テンプレートでは適切なリンティングとフォーマッティングの設定がデフォルトで含まれている。
💡 コードのフォーマットとリンティングを適切に分離することで、開発体験が改善され、コードの一貫性が向上する。

Q & A

prettierとeslintの役割の違いは何ですか?
-prettierはコードをフォーマットするためのツールで、eslintはコードの品質とスタイルを管理するためのリンターです。prettierは単純にコードの書式を整えるのみですが、eslintはコード間の関係性やルールの適用状況をチェックします。
eslintでコードをフォーマットするのは適切ではないのはなぜですか?
-eslintはリンターであり、コードのフォーマッティングを主な目的としていません。フォーマッティングとリンティングは根本的に異なる問題であり、eslintでフォーマッティングを行うと処理が重くなり、eslintのメンテナンスも困難になります。
prettierとeslintを併用する適切な方法は何ですか?
-eslintとprettierを併用する場合は、eslint-config-prettierプラグインを使用してprettierと競合するeslintのルールを無効化し、まずprettierでコードをフォーマットしてからeslintでリンティングを行うのが適切です。
prettierの代替ツールにはどのようなものがありますか?
-prettierの代替ツールとして、Rustで書かれた高速なfprintがあげられています。fprintはprettierよりも設定がカスタマイズしやすく、フォーマッティングにかかる時間がほぼゼロです。
なぜ講演者はprettierの設定を最小限に抑えたいと言っているのですか?
-講演者はコードのスタイルを統一するためにprettierを使用していますが、デフォルトの設定で十分だと考えているため、prettierの設定をほとんど変更する必要がないと述べています。
eslintを適切に設定することでどのようなメリットがありますか?
-eslintを適切に設定することで、間違ったPromiseの使用を防止したり、TypeScriptの振る舞いを改善したり、メモリリークを減らすことができます。つまり、開発者とチームの一貫性を高め、コード品質を向上させることができます。
講演者はeslintのコアチームに対してどのようなアドバイスをしていますか?
-講演者は、eslintのコアチームに対して、eslintをコードのフォーマッターとして使用するのは避けるべきであり、フォーマッティングとリンティングを明確に分離するよう助言しています。
eslint-plugin-prettierを使うべきではない理由は何ですか?
-eslint-plugin-prettierは、eslint内でprettierのルールを実行するプラグインですが、リンターとフォーマッターの役割が異なるため、このプラグインを使うと適切にフォーマッティングできない可能性があります。
コードのフォーマッティングとリンティングを分離することで得られる利点は何ですか?
-フォーマッティングとリンティングを分離することで、それぞれの処理が単純化され、高速化されます。また、フォーマッターとリンターの役割が明確になり、メンテナンスが容易になります。
開発者がeslintを避ける理由と、それに対する講演者の見解は何ですか?
-講演者は、多くの開発者がeslintの設定や理解を避けがちですが、eslintに慣れ親しむことで開発がより簡単で一貫性が高まると述べています。eslintは実際それほど難しくはありません。