Skip to content

VS Code setup for React development

Simple steps to get a nice VS Code setup with linting hints and format on save

This post explains the simple steps to get a nice VS Code setup for 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 using the ESLint extension available on the VS Code Extensions Store.

Then from the Terminal run those 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 support:

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

Prettier

The next step I suggest is to install Prettier. Prettier is a 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 with 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:

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

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about tools: