VS Code setup for React development

Simple steps to get a good VS Code setting, with lint prompt and save format

This article explains the simple stepsA nice VS Code setup for React development, withCotton batting tipswithFormat when saving.

ESLint

First, we will install ESLint. ESLint is an amazing tool that can help you keep your code small and tidy.

installationESLintuseESLint extensionAvailable in the VS Code Extensions store.

Then run those from the terminalyarnCommand (if Yarn is not installed yet, find a short guide through the link to my tutorial):

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

  

  
Download my free React Handbook

  




More react tutorials:

Online technical encyclopedia!