Chapter 6. Enforcing Code Quality to Improve Maintainability

Wouldn't it be nice if a project's code were consistent and easy to read? The reason that this isn't often the case is because enforcing such a level of code quality is burdensome. When something is a burden when done manually, you introduce a tool.

The focus of this chapter is on using tools that assist with making sure that your React code quality is up to standards. Here's what you'll learn in this chapter:

• Installing and configuring ESLint
• Running ESLint on React source code
• Getting configuration help from Airbnb
• Linting JSX and React components
• Integrating ESLint with your code editor
• Customizing ESLint errors and warnings
• Formatting code automatically with Prettier

Installing and configuring ESLint

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

Building on Airbnb standards

Organizations that have large JavaScript code bases have invested heavily in code quality tools. This includes investments in configuring tools like ESLint. The great part about using a standard set of configuration values for enforcing code quality is that you don't have any discrepancies between developers due to a slight configuration difference.

ESLint allows you to install and use npm packages as configuration settings to use and extend. A popular choice is the Airbnb standard. Let's use the ESLint init tool again to get started with Airbnb JavaScript code quality standards. First, run the init tool again:

npm run lint -- --init

The first question asks you how you want to configure ESLint. Instead of answering questions, you can choose a guide:

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

The next question lets you choose which guide to follow. You want Airbnb...

Adding React plugins to ESLint

Let's assume that you want to use the Airbnb set of ESLint rules after having tried it out and liking it. Let's also assume that you want to lint your React component code as well. During the ESLint init process, you've answered No to the question that asks whether or not your project uses React. This time, let's say Yes. So, once again, run the ESLint init process:

npm run lint -- --init

And once again, you want to use the Airbnb lint rules:

? Which style guide do you want to follow? 
  Google 
›Airbnb 
  Standard  

When it asks if you use React, say Yes:

? Do you use React? (y/N) y

You'll notice that a couple of extra packages are installed:

+ eslint-plugin-react@7.5.1+ eslint-plugin-jsx-a11y@6.0.3

Now let's write some React code so that we can lint it. Add the following component to MyComponent.js:

import React, { Component } from 'react'; 
 
class MyComponent extends Component { 
  render() { 
    return ( 
      <section> 
        <h1>My Component<...

Using ESLint with create-react-app

Everything you've seen so far in this chapter, you've had to set up and configure yourself. Not that getting ESLint up and running is particularly difficult or anything, but create-react-app abstracts this away completely. Remember, the idea with create-react-app is start writing component code as soon as possible, without having to think about configuring things like linters.

To see this in action, let's create a new app using create-react-app:

create-react-app my-new-app

Then, start the app as soon as it's created:

npm start

Now let's get ESLint to complain about something. Open up App.js in your editor—it should look something like this:

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
 
class App extends Component { 
  render() { 
    return ( 
      <div className="App"> 
        <header className="App-header"> 
          <img src={logo} className="App-logo" alt="logo" /> 
          <h1...

Using ESLint in a code editor

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

Automating code formatting with Prettier

ESLint can be used to improve any aspect of your code, including how it's formatted. The problem with using something like ESLint for this job is that it only tells you about the formatting issues that it finds. You still have to go fix them.

This is why the ESLint configuration from create-react-app doesn't specify any code formatting rules. This is where a tool like Prettier comes in. It's an opinionated code formatter for your JavaScript code. It understands JSX out of the box, so it's ideally suited to format your React components.

The create-react-app user guide has a whole section on setting up Git commit hooks that trigger Prettier to format any code before it's committed: https://github.com/facebookincubator/create-react-app#user-guide.

I won't repeat this guide here, but the basic idea is that having Git hooks in place that invoke Prettier on any JavaScript source that's committed will ensure that everything is formatted, well, pretty. The downside...

Summary

This chapter was all about enforcing the code quality level of your React projects using tools. The first tool you learned about was ESLint. You learned how to install and configure it. Rarely should you have to manually configure ESLint. You learned how to use the ESLint initialization tool that walks you through the various options available for configuring your ESLint rules.

Next, you learned about the different standard ESLint configurations that you can utilize in your React applications. Airbnb is a popular standard you can use with ESLint, and you can customize it rule by rule to fit your team's particular style. You can also tell the ESLint initialization tool that you're planning on using React and have it install the appropriate packages for you.

Finally, you learned how ESLint is used by create-react-app. It uses a Webpack plugin to lint your code when the development server is run. You learned how create-react-app configures ESLint for this, and how you can use this configuration...