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 and init your project by .
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

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

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

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

  1. In project root directory create file and
  2. Edit the file:

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

That’s all!

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

Agile Web Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store