The first step to automating the quality of your React source code is installing and configuring the tool used to automate it—ESLint. When ESLint is installed, it installs an eslint command on your system. Like other packages that install commands, it's better to have them installed locally as part of the project, so that you don't have to rely on the command being available globally on the system.

To install ESLint in your project, run the following npm command:

npm install eslint --save-dev

Now that you have ESLint installed, you can create a new npm script that will run ESLint for you. Add the following to the scripts section of your package.json file:

"scripts": { 
  ... 
  "lint": "eslint" 
}, 

You now have an eslint command that you can run within your project. Try it out:

npm run lint

Instead of linting any of your source files, you should see a usage message in your console:

eslint [options] file.js [file.js] [dir]
    
Basic configuration:
  -c, --config path::String      Use configuration from this file or shareable config
  --no-eslintrc                  Disable use of configuration from .eslintrc
  --env [String]                 Specify environments
  --ext [String]                 Specify JavaScript file extensions - default: .js
  --global [String]              Define global variables
  --parser String                Specify the parser to be used
  --parser-options Object        Specify parser options  
...

As you can see, you have to tell the eslint command which files or directories you want to lint. To keep things simple, let's assume that all of our code is in the same directory as package.json. You can modify your package.json file as follows so that ESLint knows where to look for files:

"scripts": { 
  ... 
  "lint": "eslint ." 
}, 

Did you notice the dot (.) added after eslint? This means the current directory on most systems. Go ahead and run npm run lint again. This time, you'll see a different output as ESLint is actually attempting to find source files to lint:

Oops! Something went wrong! :(

ESLint: 4.15.0.
ESLint couldn't find a configuration file. To set up a configuration file for this project, please run:
    eslint --init

Okay, so let's do what it's telling us to do. We'll run npm run lint -- --init to create a configuration file. When you do this, you're presented with a number of options to choose from:

? How would you like to configure ESLint? 
› Answer questions about your style 
  Use a popular style guide 
  Inspect your JavaScript file(s) 

Let's go with the first option for now and answer some basic questions about the code you plan on writing. With the option selected, pressing Enter brings you to the first question:

? Are you using ECMAScript 6 features? (y/N)  

Yes, you are.

? Are you using ES6 modules? (y/N)

Yes, you are.

? Where will your code run? (Press <space> to select, <a> to toggle all, <i> to inverse selection)
›(*) Browser
 ( ) Node

Select Browser.

? Do you use CommonJS? (y/N)  

Nope.

? Do you use JSX? (y/N)  

Nope. We'll get into JSX later in this chapter.

? What style of indentation do you use? (Use arrow keys)
› Tabs 
  Spaces

Use whatever you like here, because I'll inevitably be wrong.

? What quotes do you use for strings? (Use arrow keys)
› Double 
  Single 

Single. What are you, an animal?

? What line endings do you use? (Use arrow keys)
› Unix
  Windows

Unix is a safe bet here.

? Do you require semicolons? (Y/n)  

This is a tricky one. Semicolons aren't a requirement in JavaScript source. There are times where they can help, while other times they're just added syntax for something that the JavaScript interpreter already understands. If you're unsure, require semicolons; you can always change your ESLint configuration later on:

? What format do you want your config file to be in? (Use arrow keys)
› JavaScript 
  YAML 
  JSON   

Use whatever you're most comfortable with reading and editing. I'm going to stick with the default option of JavaScript:

Successfully created .eslintrc.js file

Hooray! Let's try running this again:

npm run lint

No output this time. This just means that ESLint didn't find any errors. Part of that has to do with the fact that there's no code in the project yet, but you now have a known working starting point. Let's take a quick look at the .eslintrc.js file that was created for you:

module.exports = { 
    "env": { 
        "browser": true, 
        "es6": true 
    }, 
    "extends": "eslint:recommended", 
    "parserOptions": { 
        "sourceType": "module"

    }, 
    "rules": { 
        "indent": [ 
            "error", 
           4 
        ], 
        "linebreak-style": [ 
            "error", 
            "unix" 
        ], 
        "quotes": [ 
            "error", 
            "single" 
        ], 
        "semi": [ 
            "error", 
            "always" 
        ] 
    } 
}; 

Since you've answered the questions required to create this file, you don't need to change anything yet. When you do, this is the file to edit. When you're just learning ESLint, typing out a configuration file like this can be off putting. In time, when you decide that your code quality standards need tweaking, the ESLint rules reference (https://eslint.org/docs/rules/) is a great resource.

As the  final step to setting up and configuring ESLint for your project, let's introduce some source code to lint. Create an index.js file if it doesn't already exist, and add the following function:

export const myFunc = () => 'myFunc';

Don't worry about running this function, linting does not serve the same purpose as testing or types. Instead, linting provides the developer with easy-to-miss hints about something they've done wrong from a code-quality perspective. Correctness is different from code quality. This means that you have a wide variable of tweakable options with ESLint that tell it how to evaluate your code.

Now, back to the function you've just added. You can verify that this function is okay by running npm run lint again. Sure enough, the function is good according to the rules that you've configured in .eslintrc.js. Now, try removing the semicolon from the function so that it looks like this:

export const myFunc = () => 'myFunc' 

This time, you get an error from ESLint:

index.js 
  1:37  error  Missing semicolon  semi 
Χ 1 problem (1 error, 0 warnings)

This is the exact kind of output you need. It gives you the name of the source file, the location of the error/warning in the file, and describes the actual problem that was found.

Let's try one more. Go ahead and restore the semicolon that you deleted. Now, delete the export statement so that your function definition looks as follows:

const myFunc = () => 'myFunc'; 

Now you get a different error when this code is linted:

index.js 
  1:7  error  'myFunc' is assigned a value but never used  no-unused-vars
Χ 1 problem (1 error, 0 warnings)

Because you've removed the export keyword, the module is just a function assigned to myFunc. It's never used, and ESLint was able to tell you about it.