You're (Probably) Using Prettier Wrong
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は実際それほど難しくはありません。
Outlines
😡 あまりにも多くの人が誤ってprettierを使っている
話者はあまりにも多くの人がESLintをコードのフォーマッターとして間違って使っていることに懸念を示しています。フォーマッターとリンターは根本的に異なる問題であり、コードを変更するからといってESLintをフォーマッターとして使うべきではありません。フォーマッターは単にコードをフォーマットするだけですが、リンターはコード全体の関係性を検査し、特定のルールに従っているかどうかを確認します。これらは別々のプロセスであり、リンターにフォーマッターの機能を求めるのは間違いです。代わりに、prettierやprintといったフォーマッターを使い、その後ESLintでリンティングを行うのが適切な方法です。
😤 ESLintはリンターとしてのみ使うべき
話者はESLintをリンターとしてのみ使うべきであり、フォーマッターとして使うべきではないと主張しています。ESLintチームは、ESLintをフォーマッターとして使うことに反対しており、prettier ESlint configプラグインを使ってprettierでフォーマットし、その後ESLintでリントするよう推奨しています。ESLint Prettier pluginは避けるべきです。フォーマッターとリンターは根本的に異なる役割を持っているため、両者を混同してはいけません。開発者はリンター側に専念し、フォーマッターはprettierなどに任せるべきです。
Mindmap
Keywords
Please replace the link and try again.
Highlights
I love prettier and I'm concerned with, how many people are using pretty or, wrong to be clear it's not actually, prettier they're using wrong it's eslint, because linting and formatting are very, very different things
I've seen a lot of, misconceptions around eslint and how it, should be used in your code base just, because eslint can change your code, doesn't mean it should
eslint is not a formatter eslint is, a linter if you talk to anyone on the, eslint core team you tell them that, you're formatting your code with eslint, they're going to give you a weird look, because it is a bad bad idea
formatting, and linting are fundamentally different, problems
the role of a formatter is to format, your code which means it does one really, quick pass across your code anything, that isn't formatted correctly it fixes, but doesn't keep track of anything it, doesn't check the relationships between, things
a linter is trying to confirm, specific discrete rule tools are being, followed in your code base which means, the relationship between a file and, specific lines in it as well as between, different files between different rules, all of the complexity involved in that, is necessary for the linter to work
the way that eslint recommends you, run prettier is using eslint config, prettier which is a plug-in that turns, off all of the ESL and stuff that, conflicts it prettier so you can use, prettier for formatting first into then, do a lint pass after it
it lets you, use prettier for what it is a very very, fast formatter and you don't even have, to use prettier D print is a great, alternative that is insanely fast it's, written in Rust and lets you format your, files effectively instantaneously
my reason for using, prettier is I don't want to think about, the config anymore I just want my code, to always look roughly the same and, prettier does an absolutely phenomenal, job at that
the role of eslist in the role of, prettier are just so fundamentally, different prettier is a thing I don't, want to think about I don't want to, change rules and I don't want to look at, I just wanted to run and make my code, consistent
a linter is a thing I'm going, to sit there and configure and make me a, better Dev with and make my team more, consistent with yes lint makes so I, don't use promises wrong it helps me be, better with my typescript behaviors and, make sure I'm not leaking enemies all, over my code base
it's a complex, process to do that and it's even more, complex if during that like set of, passes it also has to worry about, formatting because it might do a pass, realize the formatting is off adjust the, formatting and now the lint rules are, applied differently notice to do yet, another pass
he couldn't see, how doing two passes would ever be, faster than one the way they're doing, two passes faster than one is if it's, not two versus one it's like twenty, versus one because that's what your, linter does it does some very complex, analysis of your code
these are such, fundamentally different problems I need, to make sure I link this talk in the, description because man there are so, many little gems in here around, configuring yeslet correctly around, getting better error reporting in Dev, and in like your builds
Josh helps here, with eslint and I find most people are, scared to better understand it I, personally was one of those people I, avoided digging into eslint for a while, but after listening to Josh a bit more I, realized it's not that scary it's, actually pretty important and if you get, familiar enough with it things are much, easier and consistent and some of these, rules are dope
Transcripts
I love prettier and I'm concerned with
how many people are using pretty or
wrong to be clear it's not actually
prettier they're using wrong it's eslint
because linting and formatting are very
very different things I've seen a lot of
misconceptions around eslint and how it
should be used in your code base just
because eslint can change your code
doesn't mean it should and the big thing
I've seen too much of is people using
eslint as the formatter for their code
base eslint is not a formatter eslint is
a linter if you talk to anyone on the
eslint core team you tell them that
you're formatting your code with eslint
they're going to give you a weird look
because it is a bad bad idea formatting
and linting are fundamentally different
problems a lot of this rant is directly
inspired and stolen from Josh Goldberg's
talk he did at react Miami and I want to
highlight this particular slide from it
the role of a formatter is to format
your code which means it does one really
quick pass across your code anything
that isn't formatted correctly it fixes
but doesn't keep track of anything it
doesn't check the relationships between
things it just runs through your code
and fixes things that are broken in your
formatting and then it's done and that's
it whereas a linter is trying to confirm
specific discrete rule tools are being
followed in your code base which means
the relationship between a file and
specific lines in it as well as between
different files between different rules
all of the complexity involved in that
is necessary for the linter to work and
that complexity can and almost certainly
should exist outside of your formatter
and the way that eslint recommends you
run prettier is using eslint config
prettier which is a plug-in that turns
off all of the ESL and stuff that
conflicts it prettier so you can use
prettier for formatting first into then
do a lint pass after it just runs so
much better and makes your editing
experience better too and it lets you
use prettier for what it is a very very
fast formatter and you don't even have
to use prettier D print is a great
alternative that is insanely fast it's
written in Rust and lets you format your
files effectively instantaneously it's
also a bit more configurable so if your
reason for using eslint instead of
prettier for formatting is configuration
you should use a formatter that has
better configuration my reason for using
prettier is I don't want to think about
the config anymore I just want my code
to always look roughly the same and
prettier does an absolutely phenomenal
job at that I don't usually have a
prettier config unless I having a bug
with one of the like built-in packages
like the plug-in for Tailwind in
prettier I'm using pnpm I have to
manually put that in but other than that
I almost never have a prettier config
because the defaults are fine deals are
actually pretty good I hope I'm properly
emphasizing my point here is that like
the role of eslist in the role of
prettier are just so fundamentally
different prettier is a thing I don't
want to think about I don't want to
change rules and I don't want to look at
I just wanted to run and make my code
consistent a linter is a thing I'm going
to sit there and configure and make me a
better Dev with and make my team more
consistent with yes lint makes so I
don't use promises wrong it helps me be
better with my typescript behaviors and
make sure I'm not leaking enemies all
over my code base and it's a complex
process to do that and it's even more
complex if during that like set of
passes it also has to worry about
formatting because it might do a pass
realize the formatting is off adjust the
formatting and now the lint rules are
applied differently notice to do yet
another pass I saw a pretty bad take
from Anthony Foo which sucks because
he's normally really good about these
things his words were he couldn't see
how doing two passes would ever be
faster than one the way they're doing
two passes faster than one is if it's
not two versus one it's like twenty
versus one because that's what your
linter does it does some very complex
analysis of your code to make sure
things are where they're supposed to be
in your formatter just make sure the
output's the right shape these are such
fundamentally different problems I need
to make sure I link this talk in the
description because man there are so
many little gems in here around
configuring yeslet correctly around
getting better error reporting in Dev
and in like your builds there's just so
many little things that Josh helps here
with eslint and I find most people are
scared to better understand it I
personally was one of those people I
avoided digging into eslint for a while
but after listening to Josh a bit more I
realized it's not that scary it's
actually pretty important and if you get
familiar enough with it things are much
easier and consistent and some of these
rules are dope there's a typescript set
of rules too the recommended typescript
rules are incredible and will make your
code better and more resilient that is a
different problem from formatting and we
need to stop pretending that they're the
same doing formatting in eslint is using
yes wrong it's making it slower it's
making the lives of the maintainers of
eslint harder because now they have to
deal with all these weird patterns
people are using es14 the docs are being
updated to be very specific about this
and if you go to prettier stocks too
they're pretty clear as well cool there
it is integrating with linters linters
usually contain not only code quality
rules but also stylistic rules most
stylistic rules are unnecessary when
using prettier but worse they might
conflict use prettier for code
formatting and linters for code quality
as outlined in prettier versus linters
this is a pretty well established thing
and it is frustrating to me that people
will not listen to both the eslint team
and the prettier team because they think
they know better than both when they
actually don't understand either and
that's why I felt like I had to make a
video about this because I'm so goddamn
tired of people acting like they know
better than these hard-working open
source maintainers they don't these
people work really hard to make great
software and they've finally made it
easier for us to make the software
cooperate together and when I'm taking
advantage of it or complaining about it
I don't get it it's just the formatters
are really good and fast if you let them
do one pass and do their thing just use
the formatters for formatting and use
the linters for linting don't use lender
for formatting and certainly don't use
the formatter for lenting goddamn and
thankfully in here they say you can use
these two plugins that will turn off
prettier conflicting rules in eslint and
they even have here eslin plug-in for
the year which they specify you
shouldn't use because what this does is
it runs prettier's rules in eslint
because the lender has to worry about so
many conflicting rules and so much
context that exists outside of the
specific line of code being formatted it
also doesn't necessarily do formatting
great and I don't remember the specific
examples but I know Josh gave examples
of weird tab behaviors that the linter
couldn't handle well that prettier
handles really well and those types of
things are more complex when your
processed to read the code is more
complex so if you want to do this stuff
right the way to do it right is you use
prettier ESL and config prettier and
then whatever ESL config you want to on
top of that but you should not be using
ESL plugin pretty year as you're
prettier run it just doesn't make sense
I hope this one was helpful the thing I
run into a lot and I've seen way too
much generally if you set up crazy app
or even create next app you're gonna get
good enough linting then you can just
npm install prettier and you're done it
should be that simple can be that simple
it is that simple please for the love of
God just let it be simple if you want to
hear more about things people use wrong
I'm gonna pin a video in the corner
right here where I talk all about how
people have used JavaScript wrong
because it annoys me so check that out
if you haven't already good seeing y'all
as always
5.0 / 5 (0 votes)