Configure VS Code for React Native Development

October 3, 2017

In this article I want to share my VS Code configuration for React Native application development. To start, we will look at the extensions to install, and then we will see how I configure each new project so it works correctly with those extensions.

Extensions to install:

React Native Tools This extension adds a development environment for React Native. By using it, you can run React Native commands from the VS Code command palette. It also adds autocompletion for React Native APIs.

Prettier JavaScript Formatter An extension for formatting JavaScript, CSS, and other code by using the Prettier code formatter.

Flow Language Support Adds Flow support to VS Code.

Babel ES6/ES7 (historical extension; its Marketplace listing is no longer available) Adds syntax highlighting for Babel ES6/ES7.

Configuring a New Project

Now we will look at the different configuration steps when creating a new project.

Start by creating the project:

react-native init VSCodeConfigurationSample

Configuring ESLint

For the ESLint configuration, I use the Airbnb configuration. The different installation methods are available on GitHub.

We will look at the most general method (macOS, Windows, and Linux).

First, list all of this library's dependencies with the following command:

npm info "eslint-config-airbnb@latest" peerDependencies

Then install eslint-config-airbnb along with all the dependencies listed by the previous command:

yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

Finally, add babel-eslint:

yarn add --dev babel-eslint

You should now have a .eslintrc file in your project (if not, create it). Add the following configuration to it:

{
  "parser":"babel-eslint",
  "extends":"airbnb",
  "plugins":[
    "react",
    "jsx-a11y",
    "import"
  ]
}

Configuring Prettier

Now we will configure Prettier so that it formats our code according to our ESLint rules. We will also configure VS Code so formatting runs automatically when we save file changes.

Add the prettier-eslint library:

yarn add --dev prettier-eslint

Then open the VS Code user settings through Preferences > Settings or CMD + ,, and add the following settings:

"editor.formatOnSave": true,
  "javascript.format.enable": false,
  "prettier.eslintIntegration": true,

Here we tell VS Code that we want the editor to format code on save. Then we disable the standard JavaScript formatter, and finally we add ESLint integration for Prettier.

Configuring Flow

First, determine which flow-bin version we need to install. To do that, open the .flowconfig file; you should find the version at the end of the file, as shown below:

[version]
^0.49.1

Then install flow-bin and babel-preset-flow:

yarn add --dev [email protected] babel-preset-flow

Next, add Flow as a preset in the .babelrc file. Your file should look like this:

{
  "presets": ["react-native", "flow"],
  "retainLines": true
}

Flow can be installed globally with the same configuration for every project, but it is better to install it per project as we did and to have a configuration per project. In our case, however, we must tell VS Code to use Flow from our project's NPM packages.

Open the user settings and add the following line:

"flow.useNPMPackagedFlow": true

Finally, there is a known bug with the Flow Language Support extension. The workaround for this bug is to disable VS Code's default syntax validation by adding this line to the user settings:

"javascript.validate.enable": false

Bonus Extensions

The extensions we covered above are, for me, basic and essential extensions for React Native application development. But I wanted to end this article with a list of additional extensions I use and appreciate:

That is the end of the VS Code configuration for React Native application development. If you use other interesting extensions, share them in the comments.