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.
ESLint, airBnB and Prettier logos.

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

yarn add -D eslint-config-airbnb eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier
npm i eslint-config-airbnb eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier --save-dev
{
"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
}
]
}
}

Add a script to your project to lint your files.

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

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

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 😉?
{
"hooks": {
"pre-commit": "lint-staged"
}
}
{
"*.+(js|jsx)": ["eslint --fix", "git add"],
"*.+(json|css|md)": ["prettier --write", "git add"]
}
Flow Types Logo.

2. Add Flow as default static type checker

yarn add -D flow-bin flow-typed
[ignore]
<PROJECT_ROOT>/node_modules/.*
[include][libs][lints][options][strict]
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint . && flow"
},
React Testing Library Logo

3. Add React Testing Library

yarn add -D @testing-library/jest-dom @testing-library/react @testing-library/react-hooks
// react-testing-library renders your components to document.body,
// this adds jest-dom's custom assertions
import '@testing-library/jest-dom/extend-expect'
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()
})
yarn test

Front-end developer and UX/UI designer.