VS Code setup for React development

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, install ESLint using the ESLint extension (dbaeumer.vscode-eslint) from the VS Code Extensions Store.

In your project, add ESLint locally (ESLint 9 defaults to flat config). For a React app without TypeScript, @babel/eslint-parser replaces the old deprecated babel-eslint package. If you use TypeScript, prefer typescript-eslint instead.

npm install -D eslint @babel/eslint-parser eslint-plugin-react eslint-config-prettier

Create an eslint.config.js file in the root of your project:

import babelParser from '@babel/eslint-parser'
import react from 'eslint-plugin-react'
import prettier from 'eslint-config-prettier'

export default [
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      parser: babelParser,
      parserOptions: {
        requireConfigFile: false,
        ecmaFeatures: { jsx: true },
      },
    },
    plugins: { react },
    settings: {
      react: { version: 'detect' },
    },
    rules: {
      ...react.configs.recommended.rules,
    },
  },
  prettier,
]

eslint-config-prettier turns off ESLint rules that fight Prettier. Put it last.

Prettier

Next, install Prettier. It’s a JavaScript opinionated formatter. 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.

Install the Prettier VS Code extension (esbenp.prettier-vscode), and add Prettier as a local dev dependency (no global prettier-eslint):

npm install -D prettier

Then add a few rules to the VS Code settings so Prettier runs on save. Press cmd+, (on Mac), open the JSON settings, and add:

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"javascript.format.enable": false,
"eslint.format.enable": false

That’s it. ESLint gives you the hints. Prettier formats on save. They stay out of each other’s way through eslint-config-prettier.

Want me to talk about your product? You can sponsor this site.