Configure ESLint, Prettier, and Flow in VS Code for React Development

This short guide will provide you a consistent and reusable development workflow for all React Native projects. The more effort you put into writing quality code, the less time you spend on debugging. You can increase your code quality and reduce the time spent on debugging with a consistent development workflow. In this guide I will show you how to configure your editor to handle your code formatting, linting, and type checking.

Test Driven Development and a preconfigured build configuration are recommended. I won’t go into much detail on either of these. I recommend create-react-app for the web and using the React Native CLI for mobile development. Both require zero build configuration. Jestis fantastic for testing React.

Installation

To get started download and install VS Code. You can launch VS Code from the terminal, here’s how.

I use VS Code for my editor of choice. If you use Sublime Text or Atom this article still applies but you’ll need to use the relevant text editor extensions for your text editor.

Let’s generate our app without any configuration! For this article we’ll use the React Native CLI, but you can follow along with create-react-app as well.

$ react-native init SweetApp && cd SweetApp

Open the SweetApp project with VS Code.

$ code .

Once you have VS Code open, click the Extensions button in the Activity Bar. Install the following extensions:

• ESLint
• Prettier JavaScript Formatter
• Flow Language Support
• Babel ES6/ES7

ESLint Setup

We will install ESLint using Airbnb’s linter rules. Refer to Airbnb’s JavaScript Github Repo for the installation instructions.

Then install babel-eslint
$ npm install babel-eslint --save-dev

You should now see an .eslintrc file in your project. Open the eslintrc file and configure it like so:

Prettier Setup

We will configure Prettier to format our code based on our ESLint rules.

First we need to install prettier-eslint.

$ npm install prettier-eslint --save-dev

We want VS Code to format our code using Prettier after saving a file.

Press CMD + , if you’re on a Mac to open your VS Code Workspace Settings then add the following:

Flow Setup

Flow is a static type checker for JavaScript and is included in your project if you use the React Native CLI or create-react-app build configurations.

From your terminal install Flow using Homebrew.

Prettier Code Formatter

Prettier will auto-format your code based on it’s rules whenever you save a file.

Flow Type Checking

To ensure Flow is working run the flow start npm script to start the Flow server that runs in the background.

Now let’s add the WRONG types (string) to the add function parameters and return type.

Notice after saving the file red squiggly lines appear under the number parameters of the add function invocation. Hover your mouse cursor over the red squiggly lines and Flow informs you