You're (Probably) Using Prettier Wrong
Summary
TLDRThe video script emphasizes the distinction between code linting and formatting, highlighting the misuse of ESLint as a formatter instead of its intended purpose as a linter. The speaker, inspired by Josh Goldberg's talk, clarifies that ESLint is designed to enforce coding rules and maintain code quality, not to format code. They advocate for the use of Prettier or other formatters for code formatting due to their speed and simplicity. The speaker also discusses the recommended integration of Prettier with ESLint through the 'eslint-config-prettier' plugin, which disables conflicting ESLint rules, allowing for a more efficient and consistent development process. They caution against using ESLint for formatting and formatters for linting, as it leads to performance issues and increased complexity. The summary calls for respecting the expertise of open-source maintainers and adhering to best practices for using these tools.
Takeaways
- 🚫 **Do Not Use ESLint for Formatting**: ESLint is not designed to be a formatter; it's a linter, which performs a different function.
- ⚙️ **Separation of Concerns**: Linting and formatting are distinct processes; each should be handled by tools designed for their specific purpose.
- 🛠️ **Use Prettier for Fast Formatting**: Prettier is a fast formatter that can quickly format code without the need for complex configuration.
- 📝 **ESLint for Linting**: ESLint should be used for enforcing coding standards and identifying potential issues in the codebase.
- 🔄 **Two-Pass Workflow**: The recommended workflow is to format code with Prettier first, then lint with ESLint to avoid conflicts and improve efficiency.
- 🤔 **Avoiding Configuration Overhead**: Prettier's defaults are often sufficient, reducing the need for extensive configuration.
- 🚀 **Performance Considerations**: Using ESLint for formatting can slow down the process and create unnecessary complexity.
- 📚 **Educational Resources**: Listening to talks from experts like Josh Goldberg can provide insights into best practices for using these tools.
- 🤝 **Cooperation Between Tools**: Modern tooling allows for ESLint and Prettier to work together effectively when configured correctly.
- ❌ **Avoid Conflicting Rules**: Some ESLint rules may conflict with Prettier's formatting, so it's important to configure ESLint to play nicely with Prettier.
- 📈 **Improved Code Quality**: Using the right tool for the right job (Prettier for formatting, ESLint for linting) leads to better code quality and consistency.
Q & A
What is the main concern of the speaker regarding the use of ESLint and Prettier?
-The speaker is concerned about the misconception that ESLint and Prettier serve the same purpose. They emphasize that ESLint is a linter and should not be used as a formatter, while Prettier is designed for formatting code and is not a linter.
What is the primary role of a formatter in the context of code?
-The primary role of a formatter is to quickly pass through the code and fix any formatting issues without tracking any relationships between different parts of the code. It focuses solely on the formatting aspect.
What is the primary role of a linter like ESLint?
-A linter like ESLint is used to enforce specific coding rules and styles within a codebase. It checks for the adherence to these rules across files and lines of code, considering the relationships and context within the code.
Why is it not recommended to use ESLint as a formatter?
-Using ESLint as a formatter is not recommended because it is not designed for this purpose. It can lead to performance issues and conflicts with its primary function as a linter. It also makes the lives of maintainers harder as they have to deal with unexpected usage patterns.
What is the recommended way to integrate Prettier with ESLint?
-The recommended way to integrate Prettier with ESLint is by using the 'eslint-config-prettier' plugin, which turns off all ESLint rules that conflict with Prettier, allowing Prettier to handle the formatting first.
Why is using a separate formatter like Prettier or Dprint beneficial?
-Using a separate formatter like Prettier or Dprint is beneficial because they are optimized for formatting and can do so very quickly. They also offer better configuration options for formatting, allowing developers to focus on code quality and consistency without worrying about formatting rules.
What is the speaker's personal preference for code formatting?
-The speaker prefers using Prettier for code formatting because they find its default settings to be sufficient for keeping their code consistent and they do not want to spend time configuring formatting rules.
What does the speaker suggest regarding the use of ESLint for improving development practices?
-The speaker suggests that ESLint can be configured to enforce rules that make developers better at their craft and lead to more consistent code within a team. It helps in areas like better TypeScript behavior and preventing memory leaks.
What is the speaker's opinion on Anthony Foo's take on the two-pass approach?
-The speaker disagrees with Anthony Foo's take, arguing that the two-pass approach can be faster because it allows each tool (the formatter and the linter) to focus on its specific task without the overhead of handling the other's responsibilities.
Why does the speaker advocate for not mixing the roles of formatters and linters?
-The speaker advocates for not mixing the roles because formatters and linters are designed to solve fundamentally different problems. Mixing their roles can lead to performance issues, increased complexity, and conflicts in rules, which can negatively impact code quality and maintainability.
What does the speaker suggest for those who want a simple setup for linting and formatting?
-The speaker suggests that for a simple setup, one can use the default linting provided by a framework like Create React App and then install Prettier for formatting. This approach should be straightforward and effective for most use cases.
Outlines
🚫 Misusing ESLint as a Formatter
The first paragraph emphasizes the distinction between code linting and formatting. It clarifies that ESLint is not meant to be used as a formatter, despite some developers' misconceptions. The speaker advocates for using ESLint as a linter to enforce coding standards and maintain code quality, while using Prettier or other formatters for code formatting. The importance of understanding the roles of these tools and their proper integration is highlighted, with a recommendation to use the `eslint-config-prettier` plugin to avoid conflicts between ESLint and Prettier. The paragraph also references Josh Goldberg's talk at React Miami for further insights.
🛠️ Correct Usage of ESLint and Prettier
The second paragraph discusses the proper way to use ESLint and Prettier together. It advises against using the ESLint plugin for Prettier, as it can lead to conflicts and complexity. Instead, the recommended approach is to use `eslint-config-prettier` to ensure that ESLint does not enforce rules that Prettier will handle. The paragraph also touches on the ease of setting up linting and formatting with tools like `create-react-app` and emphasizes the simplicity and effectiveness of using Prettier for code formatting. The speaker encourages developers to keep the setup straightforward and to avoid overcomplicating the process.
Mindmap
Keywords
💡ESLint
💡Prettier
💡Linting
💡Formatting
💡Configuration
💡eslint-config-prettier
💡Josh Goldberg
💡TypeScript
💡Rules
💡Open Source Maintainers
💡pnpm
Highlights
Linting and formatting are fundamentally different, and it's a misconception to use ESLint as a formatter.
ESLint is a linter, not a formatter, and is meant to enforce specific coding rules.
Using ESLint for formatting is a bad idea and can lead to a complex and inefficient process.
A formatter like Prettier makes a quick pass to fix formatting without tracking relationships between code elements.
The role of a linter is to analyze code for rule conformance, which is a more complex process than formatting.
ESLint recommends using the 'eslint-config-prettier' plugin to avoid conflicts between ESLint and Prettier.
Prettier is a fast formatter that can be used first, followed by a lint pass with ESLint.
Print is an alternative formatter that is very fast and highly configurable.
Prettier's defaults are often sufficient for code formatting, reducing the need for extensive configuration.
Linters can improve a developer's practices and team consistency, while formatters ensure code consistency.
Combining formatting and linting in the same tool can lead to slower processes and more complex maintenance.
Anthony Foo's perspective that two passes couldn't be faster than one is debunked by the efficiency of separate processes.
Josh Goldberg's talk at React Miami inspired the transcript and emphasized the importance of proper tool usage.
ESLint's complexity is necessary for its function, and adding formatting responsibilities can hinder its performance.
The eslint-plugin-prettier is not recommended because it runs Prettier's rules within ESLint, leading to unnecessary complexity.
Using Prettier for formatting and ESLint for linting is the correct approach for efficient and effective code management.
The speaker emphasizes the importance of listening to the maintainers of ESLint and Prettier, rather than assuming one knows better.
The speaker advocates for simplicity in tool usage, suggesting that setting up a new app should involve minimal configuration for both linting and formatting.
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
浏览更多相关视频
![](https://i.ytimg.com/vi/3BHXuZvI4FI/hq720.jpg?v=62093e02)
CÓMO configurar ESLINT y PRETTIER en REACT 🤒 sin romperte la cabeza! 😎 Curso de React desde cero #4
![](https://i.ytimg.com/vi/NuYY-VCcnkI/hq720.jpg)
My Top 5 VSCode Extensions for React and NextJS!
![](https://i.ytimg.com/vi/1UyQaR8pvjk/hq720.jpg)
12 VS Code Extensions to INCREASE Productivity 2024
![](https://i.ytimg.com/vi/D4_s3q038I0/hq720.jpg)
Write Python Code Properly!
![](https://i.ytimg.com/vi/uoqhrFRuRF4/hq720.jpg)
My Minimal and Beautiful VSCode Setup
![](https://i.ytimg.com/vi/ccrmlHTUB2Q/hq720.jpg)
If Your Code Looks Like This... You're A GOOD Programmer
5.0 / 5 (0 votes)