If you want to take linting your create-react-app code a step further, you can. If you're in the middle of writing component code, the last thing you want to have to do is switch to either the console or the browser window, just to see if what you're writing is good enough. For some people, a better development experience is to see the lint errors as they happen, in their editors.

Let's take a look at how to do this with Atom. First, you need to install the linter-eslint plugin:

Now when you open JavaScript source files in Atom, this plugin will lint them for you and display errors and warnings inline. The only challenge is that create-react-app doesn't actually create an .eslintrc.js file for you. This is because the nature of create-react-app is to hide all configuration from you by default.

However, ESLint is still configured by create-react-app. This is how your source is linted when you start the development server. The problem is that you might want to use this configuration in your editor linter. There is a package installed by create-react-app called eslint-config-react-app that contains the ESLint configuration used by the development server. You can use this in your own project so that your editor linter is configured the same as anything that is output in the browser or the console. This is really important, the last thing you want is to have your editor telling you one thing about your code while you don't see any issues in the browser.

If you open up App.js in Atom, you shouldn't see any lint errors because:

• There aren't any
• The linter-eslint Atom plugin isn't running because it didn't find any configuration

Here's what the file looks like when there are no errors:

All you have to do is add ESLint configuration that extends the eslint-config-react-app configuration. In the root of your project, create the following .eslintrc.js file:

module.exports = { 
  "extends": "eslint-config-react-app" 
}; 

Now the Atom linter-eslint plugin will attempt to lint your open source files on-the-fly. Further, it will use the exact same configuration as your create-react-app dev server. Let's try deleting the Component import again. Things look a little different in your editor now:

As you can see, the Component identifier is underlined in red so that this portion of your code stands out. Underneath your source, there is a pane that shows a list of every linter error found, along with more details about each error. If you were to run npm start, you would see the exact same error in the dev server console and in the browser because Atom is using the same ESLint configuration as create-react-app.

Now let's get rid of this error. Go to the following code line:

import React from 'react';

Change it back to:

import React, { Component } from 'react'; 

There should be no more linter errors visible in your editor.