Custom eslint config with create-react-app

Adam Dziendziel
Oct 2, 2017 · 2 min read

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.jsconst 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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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