Setting Up VS Code for React Development

In this blog post, we will discuss the simple steps to set up a nice VS Code development environment for React, including linting hints and automatic formatting on save.

ESLint

The first step is to install ESLint, a powerful tool that helps keep your code clean and maintainable. You can install ESLint using the ESLint extension available on the VS Code Extensions Store. Additionally, run the following Yarn commands in the terminal (if you don’t have Yarn installed, refer to my tutorial for a quick guide):

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

Create a .eslintrc.json file in the root of your project and add the following configuration for React development with JSX support:

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

Prettier

Next, let’s install Prettier, a JavaScript opinionated formatter that helps standardize your codebase. It is especially useful when working with a team to maintain consistent code styling. You can install the Prettier VS Code extension using npm:

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

To integrate Prettier with ESLint and enable automatic formatting on save, add the following rules to the VS Code configuration by pressing cmd+, on Mac and entering the following:

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

By following these simple steps, you can set up an efficient and productive development environment for React using VS Code.