# VS Code setup for React development

> Learn how to set up VS Code for React development, adding ESLint with the Airbnb config and Prettier so you get linting hints and automatic format on save.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2017-08-19 | Updated: 2018-05-10 | Topics: [Tools](https://flaviocopes.com/tags/tools/) | Canonical: https://flaviocopes.com/vscode-react-setup/

This post explains the simple steps to get **a nice VS Code setup for [React](https://flaviocopes.com/react/) development**, with **linting hints** and **format on save**.

## ESLint

First, we're going to install ESLint. ESLint is an amazing tool that helps you keep your code tiny and clean.

Install [ESLint](https://flaviocopes.com/eslint/) using the [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) available on the VS Code Extensions Store.

Then from the Terminal run those [Yarn](https://flaviocopes.com/yarn/) commands (if you don't have Yarn installed yet, follow the link to my tutorial to find a short guide):

```
yarn add babel-eslint
yarn add eslint-config-airbnb
yarn add eslint-plugin-jsx-a11y
yarn add eslint-plugin-react
```

Now, create a `.eslintrc.json` file in the root of your project, and add the following lines to have a basis ESLint configuration that works for React development, with [JSX](https://flaviocopes.com/jsx/) support:

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

## Prettier

The next step I suggest is to install Prettier. [Prettier](https://flaviocopes.com/prettier/) is a [JavaScript](https://flaviocopes.com/javascript/) opinionated formatter. It's a great tool because it helps you standardize your codebase, and it's useful even if you code alone. In a team, it's super useful as it avoids differences in code styling. Use what Prettier suggests.

You can install [the Prettier VS Code extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) with [npm](https://flaviocopes.com/npm/):

```
npm install -g prettier-eslint --save-dev
```

Next we're going to add a few rules to the VS Code configuration, to apply Prettier on every save, and integrate it with ESLint. Press `cmd+,` (on Mac) and the VS Code configuration should show up. Enter this at the end:

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