Here's something I've noticed: many developers, both new and experienced, confuse the roles of two essential tools - Prettier and ESLint. What baffles me is that this confusion persists even though the roles of both tools are clearly defined in their respective documentations.
The only reason why I am writing this article is to have a quick text to share with my team once someone seems to be confused. Even prettier documentation contains the following phrase:
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 with Prettier! Use Prettier for code formatting concerns, and linters for code-quality concerns, as outlined in Prettier vs. Linters.
Let's clarify things: Prettier is our quick-fix magic wand for code formatting, and ESLint is our meticulous code inspector. They're different tools for different jobs in our coding universe!
Here’s a quick comparison table to illustrate their key differences:
|
ESLint |
Prettier | |
|---|---|---|
|
Report code errors |
Yes |
No |
|
Automatically fix code errors |
Yes |
No |
|
Add custom rules/options |
Yes |
No |
|
Configuration options |
Yes |
Poor |
|
Format code |
Yes |
Yes |
That said, Prettier and ESLint do share a bit of common ground. You could say they have 1.5 things in common: firstly, they both offer some level of configuration, though Prettier's options are somewhat limited (hence the 0.5) and secondly, they can both format code. Now, you might be wondering - how is that a problem?
Let's visualize this overlap with a Venn diagram:
In an ideal world, these spheres would not overlap as much. The fact that they do leads to confusion and misuse of these tools. However, by understanding the primary purpose of each tool and sticking to it, we can avoid falling into the trap of misusing these incredibly useful development aids.
The above Venn diagram in our project should present like this:
The job of a formatter, like Prettier, is to swiftly go through your code, tidying up any messy formatting. Think of it like a housekeeper for your code – its aim is to make things look neat and orderly. Prettier is also much much faster (if you are using a lot of lint rules then it is like “much much much much much“ faster).
ESLint, on the other hand, is a whole different beast. It's like a detective, ensuring that your code follows certain rules. It looks at the relationship between different parts of your code to make sure everything is in order.
So it is important to let these tools do their work as far as each of them is dealing with a different problem.
At the end of the day, it's important to remember this: Prettier and ESLint have different jobs. Prettier keep your code neat and tidy, and ESLint helps you write better code. They're both awesome, but they're awesome at different things.
Trying to use ESLint for formatting is like using a hammer to drive in a screw—it's just not the right tool for the job. It slows things down and makes things harder for you.
I hope now with this knowledge you are not going to be the guy described in the meme below:
In a nutshell, use Prettier for formatting and ESLint for linting. If you do, you'll find that your code gets better and your life gets easier. After all, these tools were designed to help us, so let's use them properly!