Custom eslint config with create-react-app

TL;DR;
Use react-app-rewired with react-app-rewire-eslint.

The problem

create-react-app a.k.a CRA is a great starter for any React project, because it contains everything what you need to start coding your components.
The only thing you have to do is to npm i -g create-react-app and init your project by create-react-app your-crazy-project.
The major philosophy behind the project is “zero configuration required” which is both the main advantage (for beginners) and disadvantage (for advanced “reacters”).

Sooner or later you will need to customize Webpack configuration, or, like me, to adjust eslint rules. But you can’t do this as long as you want to use original react-scripts.

So? From official documentation you can learn that the only way to add custom configuration is to do eject your project. But eject is a one way solution.

Nobody expected react-app-rewired, ha ha!

Fortunately, after crazy searching, I found the library which allows me to override parts of the default project’s configuration without need to break create-react-app

Let me introduce you the react-app-rewired project.

There are four easy steps required to work with custom .eslintrc config:

1. npm i -D react-app-rewired react-app-rewire-eslint
2. In project root directory createconfig-overrides.js file and
3. Edit the file:

//config-overrides.js
const rewireEslint = require(‘react-app-rewire-eslint’);
module.exports = function override(config, env) {
 config = rewireEslint(config, env);
 return config;
}

4. In package.json edit “scripts” section by replacing react-scripts with react-app-rewired. It should looks like following:

“scripts”: {
 “start”: “react-app-rewired start”,
 “build”: “react-app-rewired build”,
 “test”: “react-app-rewired test — env=jsdom”,
 “eject”: “react-scripts eject”
 },

That’s all!

When you run npm start then you should see warnings/errors defined in your custom .eslintrc config.