Extend “Create React App” with AirBnB’s ESLint config, Prettier, Flow and React Testing Library.

If you want a ready to go React boilerplate, Create React App is great, but it lacks of some useful features. Let’s see how to add them.

Note: this guide assumes that you are familiar with Create React App, so it’s supposed you already have a local project ready to go and you know all the basics.

1. Extend ESLint configuration with AirBnB’s linting rules and Prettier

AirBnB created a real popular Javascript Style Guide. Using it in your projects will ensure your code has a level of clarity that makes reading and maintaining easier for anyone who has to work on it.
In addition to this, using Prettier will ensure the ability to automatically fix and beautify your code following ESLint configuration.

Create React App already comes with ESLint, so we need only to extend its configuration. In your project, run the following:

yarn add -D eslint-config-airbnb eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier

or, if you prefer npm:

npm i eslint-config-airbnb eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier --save-dev

Now create a .eslintrc file in your project root folder, adding the following configuration:

{
  "extends": [
    "react-app",
    "airbnb",
    "plugin:jsx-a11y/recommended",
    "prettier",
    "prettier/react"
  ],
  "plugins": [
    "jsx-a11y",
    "prettier"
  ],
  "rules": {
    "semi": 0,
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "prettier/prettier": [
      "error", {
        "semi": false
      }
    ]
  }
}

This file basically tells to esLint tu use airbnb rules and generally how to lint the code.

I added some simple custom rules on top of AirBnB configuration, you can see them inrules key:

1. semi set to 0: don’t use the semicolon at the end of the every statement (IMHO really annoying);
2. react/jsx-filename-extension allow both .jsx and .js as extension for files (instead of .jsx only).

Feel free to entirely remove them if you don’t like it.

Add a script to your project to lint your files.

To lint your codebase, in your package.json you need to add the lint command, in this way:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "lint": "eslint ."
},

Now you can lint your code running:

yarn lint

…or with npm:

npm run lint

Note: if you are using VSCode or other similar popular editors, you can install the proper plugins for both ESLint and Prettier. This allow you to run code linting and fixes directly in your code editor using the above configuration.

A step further (optional but recommended): automatize the running of eslint and prettify before every GIT COMMIT command

If you are running GIT in your project (and I can’t figure why you don’t), you can run linting and prettify checks and fixes before every commit.

Install Husky and Lint Staged:

yarn add -D husky lint-staged
# At this point of the tutorial, I think
# it should be clear how to use npm instead of yarn,
# isn’t it 😉?

In your project root folder, add the configuration for Husky:

.huskyrc.json

{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

…and the one for Lint Staged:

.lintstagedrc.json

{
  "*.+(js|jsx)": ["eslint --fix", "git add"],
  "*.+(json|css|md)": ["prettier --write", "git add"]
}

I think these are quite self-explanatory: in short, before every commit, Husky calls Lint Staged, that runs eslint and prettier command only on staged files. That’s all, really simple, and you don’t have to take care of linting anymore 🙂.

2. Add Flow as default static type checker

Quoting the Create React App official docs:

Flow is a static type checker that helps you write code with fewer bugs.

In my opinion you can’t start a new Javascript project without feeling the need to use a static type checker. You can use Typescript as well, but if you prefer the old good ES6 syntax, Flow is your choice.

Check out this introduction to using static types in JavaScript if you are new to this concept.

Once you are ready, install Flow running:

yarn add -D flow-bin flow-typed

And add its config file .flowconfig in the project root:

[ignore]
<PROJECT_ROOT>/node_modules/.*
[include]
[libs]
[lints]
[options]
[strict]

Extend your lint script in package.json to include Flow:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "lint": "eslint . && flow"
},

Now you can start using Flow adding // @flow on top of any files you want to type check.

To learn more about Flow and Flow Typed, check out the official docs:
https://flow.org/
https://github.com/flow-typed/flow-typed

3. Add React Testing Library

Form React Testing Library official docs:

React Testing Library is a simple and complete React DOM testing utilities that encourage good testing practices. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices.

I highly suggest you to use this Library instead of Enzyme, if you are developing React based projects, but I don’t need to convince who reads this article, the web is really full of pieces that explain why, google it to get through the content 😉.

Install it with the usual command:

yarn add -D @testing-library/jest-dom @testing-library/react @testing-library/react-hooks

If you want to avoid to import React Testing Library jest-dom custom matchers in any test file, you can create src/setupTests.js:

// react-testing-library renders your components to document.body,
// this adds jest-dom's custom assertions
import '@testing-library/jest-dom/extend-expect'

Now you are ready to change React Create App’s default App.js test, with a new one based on React Testing Library:

src/App.test.js

import React from 'react'
import { render } from '@testing-library/react'
import App from './App'
it('renders without crashing', () => {
  const { getByText } = render(<App />)
  expect(getByText('Learn React')).toBeInTheDocument()
})

And you can check the result running:

yarn test

That’s all, now you are ready to build your next React App, using a robust base configuration, coding with style, doing the right thing with static type checking and testing all with the latest standards.

If you like this post please give it some claps and follow me to stay tuned for more stories and tutorials.