You're (Probably) Using Prettier Wrong

Summary

この動画は、コードフォーマッターとリンターの役割の違いについて説明しています。プレゼンターは、プレゼンターは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

00:00

😡 あまりにも多くの人が誤ってprettierを使っている

話者はあまりにも多くの人がESLintをコードのフォーマッターとして間違って使っていることに懸念を示しています。フォーマッターとリンターは根本的に異なる問題であり、コードを変更するからといってESLintをフォーマッターとして使うべきではありません。フォーマッターは単にコードをフォーマットするだけですが、リンターはコード全体の関係性を検査し、特定のルールに従っているかどうかを確認します。これらは別々のプロセスであり、リンターにフォーマッターの機能を求めるのは間違いです。代わりに、prettierやprintといったフォーマッターを使い、その後ESLintでリンティングを行うのが適切な方法です。

05:00

😤 ESLintはリンターとしてのみ使うべき

話者はESLintをリンターとしてのみ使うべきであり、フォーマッターとして使うべきではないと主張しています。ESLintチームは、ESLintをフォーマッターとして使うことに反対しており、prettier ESlint configプラグインを使ってprettierでフォーマットし、その後ESLintでリントするよう推奨しています。ESLint Prettier pluginは避けるべきです。フォーマッターとリンターは根本的に異なる役割を持っているため、両者を混同してはいけません。開発者はリンター側に専念し、フォーマッターはprettierなどに任せるべきです。

Keywords

The video is abnormal, and we are working hard to fix it.
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