How to setup ESLint, Prettier, and Babel for your React project

Building high-quality apps these days is hard.

That’s why nowadays, there are many tools that allow us to write quality code and make sure our apps don’t break. You may think of testing tools like Jest at first, but before even writing a test, you can prevent many head-scratching situations.

In this article, we will overview the process, how I set up these tools for a React project. First of all, you need to install Prettier.

Prettier

For using this tool you need to install Prettier:

npm install -D prettier

Now you have Prettier installed and from now with a little config, your code will be always consistent. I’m sure many of you were work on projects where some files have tabs, some spaces, or have a trailing comma and others don’t…

Prettier is a project which takes all the conversation out of context and it standardizes to a predefined style. So everyone will be on the same format.

I actually, really don’t care about how is my code looks like as long as it’s well-formatted and consistent. The great thing Prettier does this for us.

Configurate Prettier

You can run from the command line as an npm script:

"scripts": {
    "format": "prettier \"src/**/*.{js,html}\" --write",clicks'))
}

Or install the plugin and just add to your vscode config this two lines (without my comments):

“editor.formatOnSave”: true, // enable a formatter to format on save
“prettier.requireConfig”: true,    // prettier only run if installed

And create a file in the project root directory named .prettierrc with an empty object {} in it (it means you will use the default settings).

And that’s it Prettier is installed in your project. And now if you press ctr+s Prettier will run so you can focus more on your code.

Now we need another tool called linter. It is different from Prettier because Prettier is very mechanical, like how is this file formatted, or where should I put return, etc. but it doesn’t care about what the code actually does. This is the linter’s task.

Bare minimum ESLint config

Now install ESLint which is a code linter:

npm install -D eslint eslint-config-prettier

We need the eslint-config-prettier package too, because there is an overlap between Prettier and ESLint, and we need to tell ESLint to leave the mechanical part to Prettier.

Create .eslintrc.json config file in the project root:

The bare minimum ESLint config

(I leave a comment every line ends where I think need some guidance.)

The most important part is the eslint:recommended which is the bare minimum. Everything in eslint:recommended what is recommended for everyone to run all the time. We can use other rule sets such as airbnb, but it will force us to write code in a specific way, so that is more opinionated.

If you want to see ESLint hints on hover, just install this vscode eslint plugin.

ESLint, Babel config for almost every React project

The previous was the basic standard setup for ESLint, but we need to go further to make sure ESLint understands React correctly. For that, we need to install a few other tools:

npm i -D babel-eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

babel-eslint: the babel compiler out the box doesn’t understand React super well, that’s why we install this plugin

eslint-plugin-import: give new rules for importing, and exporting things, just to have a good habit about that kind of stuff

eslint-plugin-jsx-a11y: this will help with no brainer things for accessibility (like don’t make div clickable, etc.)

eslint-plugin-react: help us some additional React rules we need

And change the .eslintrc.json to the following:

ESLint, Babel config for almost every React project

At this point, we could tell this is the ESLint config for almost every React project needs. And don’t forget, the most important you don’t question anything what is in eslint:recommended because everything it said pretty standard rules in JS community.

nkapolcs/eslint-config-for-react