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.

Create React App extended with Flow, ESLint, Prettier and React Testing Library.
Create React App extended with Flow, ESLint, Prettier and React Testing Library.

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:

or, if you prefer npm:

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

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:

Now you can lint your code running:

…or with npm:

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:

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


…and the one for Lint Staged:


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:

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

Extend your lint script in package.json to include 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:

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:

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

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


And you can check the result running:

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.

Written by

Front-end developer and UX/UI designer.

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