In this article, you'll learn how to set up an excellent linting solution with ESLint and Prettier in your project.
Issue
Using Prettier as an ESLint rule has its downsides:
- You end up with many red squiggly lines in your editor, which gets annoying. Prettier is supposed to make you forget about formatting — and not be in your face about it!
https://stackoverflow.com/questions/63419399/red-squiggly-lines-in-vs-code
They are slower than running Prettier directly.
They're yet one layer of indirection where things may break.
https://prettier.io/docs/en/integrating-with-linters.html#notes
Prettier takes care of your styling for you.
How should I use it then?
Setting up ESLint
First, install ESLint
npm install eslint --save-dev
Then run the configuration script:
npm init @eslint/config
Now let's configure it:
How would you like to use ESLint?
> To check syntax and find problems
What type of modules does your project use?
> Choose what is best for you (i.e. `esm`)
Which framework does your project use?
> Choose your framework (i.e. `react`)
Does your project use TypeScript?
> If it does not, you probably should.
Where does your code run?
> Choose `Browser` if you are using Client-Side, `Node` for Server-Side, or both if you are using something like Next.js or Remix
What format do you want your config file to be in?
> Choose what is best for you. I prefer JSON as it gives you IntelliSense.
Would you like to install them now?
> Yes
Which package manager do you want to use?
> Choose your package manager (i.e. `yarn`)
Setting up Prettier
First, install Prettier
npm install --save-dev --save-exact prettier
Then, create your Prettier configuration file
echo {}> .prettierrc.json
You can configure it however you like using the available options here.
Integrating Prettier with ESLint
To integrate Prettier with ESLint, we need to install the eslint-config-prettier
dependency:
npm install --save-dev eslint-config-prettier
Then you need to add "prettier"
to your .eslintrc.*
file.
{
"extends": [
"eslint:recommended",
+ "prettier"
]
}
Editor Integration
I'm just going to cover the VSCode integration, but you can find more about editor integrations for both tools
Visual Studio Code extensions
React Integration with ESLint
If you followed the ESLint configuration script and chose React
as your framework, this is already set up.
But, if you are using the new JSX transform from React 17, this is very useful:
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
+ "plugin:react/jsx-runtime",
"prettier"
]
}
Nice-to-have ESLint plugins
Installation,
npm install eslint-plugin-react-hooks --save-dev
Configuration,
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
+ "plugin:react-hooks/recommended"
"prettier"
]
}
Installation,
npm install eslint-plugin-jsx-a11y --save-dev
Configuration,
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
+ "plugin:jsx-a11y/recommended"
"prettier"
]
}
Conclusion
And there you have it. An excellent and clean ESLint + Prettier integration!
Cover image by [James Harrison](https://unsplash.com/photos/vpOeXr5wmR4)
Top comments (0)