You're (Probably) Using Prettier Wrong

Theo - t3․gg
5 Jun 202306:04

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

00:00

🚫 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.

05:00

🛠️ 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

ESLint is a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. It is not a formatter, but rather a tool that enforces code quality standards. In the video, the speaker emphasizes that using ESLint as a formatter is a misconception and that it should be used for its intended purpose: linting.

💡Prettier

Prettier is an opinionated code formatter that supports multiple languages and integrates with most editors. It is designed to enforce a consistent style by making all the code look the same, which is different from linting. The video discusses how Prettier should be used for code formatting and not as a substitute for ESLint.

💡Linting

Linting refers to the process of running a program that analyzes source code for potential errors, bugs, stylistic errors, and suspicious constructs. In the context of the video, linting is a critical aspect of code quality that ESLint is designed to perform, as opposed to formatting.

💡Formatting

Formatting in the context of coding involves adjusting the layout and style of the source code to make it more readable and consistent. The video script clarifies that formatting is a separate concern from linting and should be handled by tools like Prettier, not ESLint.

💡Configuration

Configuration in the video refers to the setup of rules and preferences in ESLint and Prettier to define how code should be linted or formatted. The speaker mentions that some people prefer Prettier because it requires minimal configuration, whereas ESLint offers more complex and customizable rules.

💡eslint-config-prettier

eslint-config-prettier is a plugin that integrates Prettier with ESLint by turning off all ESLint rules that conflict with Prettier. This allows developers to use ESLint for linting while still leveraging Prettier for formatting, as explained in the video.

💡Josh Goldberg

Josh Goldberg is mentioned as the source of inspiration for the video's content. He gave a talk at React Miami that the speaker found particularly insightful. Goldberg's presentation likely covered best practices for using ESLint and Prettier, which the speaker is advocating for in the video.

💡TypeScript

TypeScript is a superset of JavaScript that adds static types to the language. In the video, the speaker mentions using ESLint with TypeScript to improve code quality and catch type errors, highlighting the importance of linting in type safety.

💡Rules

Rules in the context of ESLint are the guidelines that the tool enforces on code to maintain quality and consistency. The video emphasizes the importance of configuring these rules properly to leverage ESLint's full potential.

💡Open Source Maintainers

Open source maintainers are developers who contribute to and maintain open source projects like ESLint and Prettier. The video script expresses frustration with people not following the recommendations of these maintainers, who have put in significant effort to create and improve these tools.

💡pnpm

pnpm is a package manager for Node.js that the speaker mentions using in their development workflow. It is an example of the kind of tooling that can be integrated with ESLint and Prettier to streamline the development process.

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

play00:00

I love prettier and I'm concerned with

play00:01

how many people are using pretty or

play00:03

wrong to be clear it's not actually

play00:04

prettier they're using wrong it's eslint

play00:06

because linting and formatting are very

play00:08

very different things I've seen a lot of

play00:10

misconceptions around eslint and how it

play00:13

should be used in your code base just

play00:14

because eslint can change your code

play00:16

doesn't mean it should and the big thing

play00:18

I've seen too much of is people using

play00:20

eslint as the formatter for their code

play00:22

base eslint is not a formatter eslint is

play00:24

a linter if you talk to anyone on the

play00:26

eslint core team you tell them that

play00:28

you're formatting your code with eslint

play00:29

they're going to give you a weird look

play00:30

because it is a bad bad idea formatting

play00:32

and linting are fundamentally different

play00:34

problems a lot of this rant is directly

play00:36

inspired and stolen from Josh Goldberg's

play00:39

talk he did at react Miami and I want to

play00:40

highlight this particular slide from it

play00:42

the role of a formatter is to format

play00:44

your code which means it does one really

play00:45

quick pass across your code anything

play00:47

that isn't formatted correctly it fixes

play00:49

but doesn't keep track of anything it

play00:50

doesn't check the relationships between

play00:52

things it just runs through your code

play00:53

and fixes things that are broken in your

play00:54

formatting and then it's done and that's

play00:56

it whereas a linter is trying to confirm

play00:58

specific discrete rule tools are being

play01:00

followed in your code base which means

play01:02

the relationship between a file and

play01:04

specific lines in it as well as between

play01:05

different files between different rules

play01:07

all of the complexity involved in that

play01:09

is necessary for the linter to work and

play01:11

that complexity can and almost certainly

play01:13

should exist outside of your formatter

play01:14

and the way that eslint recommends you

play01:16

run prettier is using eslint config

play01:18

prettier which is a plug-in that turns

play01:20

off all of the ESL and stuff that

play01:22

conflicts it prettier so you can use

play01:23

prettier for formatting first into then

play01:25

do a lint pass after it just runs so

play01:28

much better and makes your editing

play01:29

experience better too and it lets you

play01:31

use prettier for what it is a very very

play01:33

fast formatter and you don't even have

play01:34

to use prettier D print is a great

play01:36

alternative that is insanely fast it's

play01:38

written in Rust and lets you format your

play01:40

files effectively instantaneously it's

play01:42

also a bit more configurable so if your

play01:43

reason for using eslint instead of

play01:45

prettier for formatting is configuration

play01:47

you should use a formatter that has

play01:48

better configuration my reason for using

play01:50

prettier is I don't want to think about

play01:51

the config anymore I just want my code

play01:53

to always look roughly the same and

play01:55

prettier does an absolutely phenomenal

play01:57

job at that I don't usually have a

play01:59

prettier config unless I having a bug

play02:00

with one of the like built-in packages

play02:02

like the plug-in for Tailwind in

play02:04

prettier I'm using pnpm I have to

play02:06

manually put that in but other than that

play02:07

I almost never have a prettier config

play02:09

because the defaults are fine deals are

play02:10

actually pretty good I hope I'm properly

play02:12

emphasizing my point here is that like

play02:14

the role of eslist in the role of

play02:15

prettier are just so fundamentally

play02:17

different prettier is a thing I don't

play02:19

want to think about I don't want to

play02:20

change rules and I don't want to look at

play02:22

I just wanted to run and make my code

play02:23

consistent a linter is a thing I'm going

play02:25

to sit there and configure and make me a

play02:27

better Dev with and make my team more

play02:29

consistent with yes lint makes so I

play02:31

don't use promises wrong it helps me be

play02:33

better with my typescript behaviors and

play02:34

make sure I'm not leaking enemies all

play02:36

over my code base and it's a complex

play02:37

process to do that and it's even more

play02:39

complex if during that like set of

play02:41

passes it also has to worry about

play02:43

formatting because it might do a pass

play02:44

realize the formatting is off adjust the

play02:46

formatting and now the lint rules are

play02:48

applied differently notice to do yet

play02:49

another pass I saw a pretty bad take

play02:51

from Anthony Foo which sucks because

play02:53

he's normally really good about these

play02:54

things his words were he couldn't see

play02:57

how doing two passes would ever be

play02:58

faster than one the way they're doing

play03:00

two passes faster than one is if it's

play03:01

not two versus one it's like twenty

play03:03

versus one because that's what your

play03:05

linter does it does some very complex

play03:06

analysis of your code to make sure

play03:09

things are where they're supposed to be

play03:10

in your formatter just make sure the

play03:12

output's the right shape these are such

play03:13

fundamentally different problems I need

play03:15

to make sure I link this talk in the

play03:16

description because man there are so

play03:18

many little gems in here around

play03:19

configuring yeslet correctly around

play03:21

getting better error reporting in Dev

play03:23

and in like your builds there's just so

play03:25

many little things that Josh helps here

play03:27

with eslint and I find most people are

play03:29

scared to better understand it I

play03:31

personally was one of those people I

play03:32

avoided digging into eslint for a while

play03:34

but after listening to Josh a bit more I

play03:35

realized it's not that scary it's

play03:37

actually pretty important and if you get

play03:39

familiar enough with it things are much

play03:40

easier and consistent and some of these

play03:42

rules are dope there's a typescript set

play03:44

of rules too the recommended typescript

play03:45

rules are incredible and will make your

play03:47

code better and more resilient that is a

play03:49

different problem from formatting and we

play03:50

need to stop pretending that they're the

play03:51

same doing formatting in eslint is using

play03:53

yes wrong it's making it slower it's

play03:55

making the lives of the maintainers of

play03:56

eslint harder because now they have to

play03:57

deal with all these weird patterns

play03:59

people are using es14 the docs are being

play04:01

updated to be very specific about this

play04:02

and if you go to prettier stocks too

play04:03

they're pretty clear as well cool there

play04:05

it is integrating with linters linters

play04:07

usually contain not only code quality

play04:08

rules but also stylistic rules most

play04:10

stylistic rules are unnecessary when

play04:12

using prettier but worse they might

play04:13

conflict use prettier for code

play04:15

formatting and linters for code quality

play04:16

as outlined in prettier versus linters

play04:19

this is a pretty well established thing

play04:21

and it is frustrating to me that people

play04:24

will not listen to both the eslint team

play04:26

and the prettier team because they think

play04:27

they know better than both when they

play04:29

actually don't understand either and

play04:30

that's why I felt like I had to make a

play04:31

video about this because I'm so goddamn

play04:33

tired of people acting like they know

play04:35

better than these hard-working open

play04:36

source maintainers they don't these

play04:38

people work really hard to make great

play04:39

software and they've finally made it

play04:41

easier for us to make the software

play04:42

cooperate together and when I'm taking

play04:44

advantage of it or complaining about it

play04:45

I don't get it it's just the formatters

play04:47

are really good and fast if you let them

play04:49

do one pass and do their thing just use

play04:50

the formatters for formatting and use

play04:52

the linters for linting don't use lender

play04:53

for formatting and certainly don't use

play04:55

the formatter for lenting goddamn and

play04:56

thankfully in here they say you can use

play04:58

these two plugins that will turn off

play05:00

prettier conflicting rules in eslint and

play05:02

they even have here eslin plug-in for

play05:04

the year which they specify you

play05:05

shouldn't use because what this does is

play05:06

it runs prettier's rules in eslint

play05:08

because the lender has to worry about so

play05:10

many conflicting rules and so much

play05:11

context that exists outside of the

play05:13

specific line of code being formatted it

play05:15

also doesn't necessarily do formatting

play05:16

great and I don't remember the specific

play05:18

examples but I know Josh gave examples

play05:20

of weird tab behaviors that the linter

play05:22

couldn't handle well that prettier

play05:23

handles really well and those types of

play05:24

things are more complex when your

play05:26

processed to read the code is more

play05:28

complex so if you want to do this stuff

play05:29

right the way to do it right is you use

play05:31

prettier ESL and config prettier and

play05:33

then whatever ESL config you want to on

play05:34

top of that but you should not be using

play05:36

ESL plugin pretty year as you're

play05:38

prettier run it just doesn't make sense

play05:39

I hope this one was helpful the thing I

play05:41

run into a lot and I've seen way too

play05:43

much generally if you set up crazy app

play05:44

or even create next app you're gonna get

play05:46

good enough linting then you can just

play05:47

npm install prettier and you're done it

play05:48

should be that simple can be that simple

play05:49

it is that simple please for the love of

play05:52

God just let it be simple if you want to

play05:54

hear more about things people use wrong

play05:55

I'm gonna pin a video in the corner

play05:57

right here where I talk all about how

play05:58

people have used JavaScript wrong

play05:59

because it annoys me so check that out

play06:01

if you haven't already good seeing y'all

play06:02

as always

Rate This
★
★
★
★
★

5.0 / 5 (0 votes)

Related Tags
Code LintingCode FormattingESLintPrettierDeveloper ToolsSoftware DevelopmentBest PracticesOpen SourceConfiguration TipsWeb DevelopmentJavaScript