ESLint and Prettier configs for React

If you’re not using a linter in your editor (such as VS Code) and a code formatter, you’re missing out on catching easy-to-miss bugs (before runtime) and the enforcement of a consistent coding style for your project (and team).

The use of a linter in combination with TypeScript is a particularly powerful combination, but I have included the equivalent configs for JavaScript as well. I highly recommend ESLint (linter) and Prettier (code formatter).

Download my recommended configs here (gists):

• TypeScript
• JavaScript

Included in both are the following files (all of which should be placed at the root of your project folder, except for packages.txt):

• .eslintrc.cjs (ESLint config)
• .eslintignore (ESLint ignored files/dirs)
• prettier.config.cjs (Prettier config)
• .prettierignore (Prettier ignored files/dirs)
• packages.txt (dependencies)

New projects

For new React projects, I recommend using Vite. Start a new project using one of the commands below:

NPM + TypeScript

npm create vite@latest your-project-name -- --template react-ts

NPM + JavaScript:

npm create vite@latest your-project-name -- --template react

Yarn + TypeScript

yarn create vite your-project-name --template react-ts

Yarn + JavaScript

yarn create vite your-project-name --template react

Follow the steps in the next section for existing projects to continue.

Existing projects

Put all the files from the respective links above (TypeScript or JavaScript) at the root of your project directory. Next you need to install some packages (as development dependencies). Here are the commands for both npm and yarn:

NPM + TypeScript:

npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-config-prettier eslint-plugin-prettier prettier

NPM + JavaScript:

npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh prettier

Yarn + TypeScript:

yarn add -D typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-config-prettier eslint-plugin-prettier prettier

Yarn + JavaScript:

yarn add -D eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh prettier

Highlights

This is a modified version of some style guide I picked up years ago (possibly the Airbnb JavaScript Style Guide) that has evolved over the years with my usage in professional JavaScript and TypeScript React projects. It was recently updated and cleaned up based on the ESLint config included in the react-ts and react Vite project templates.

Here are a few of the rules:

• 2 space indents
• Double quotes instead of single quotes¹
• 80 character max line length
• Report Prettier issues as errors
• Warn on console.log usage
• Trailing commas (for cleaner git diffs)
• Various React warnings
• (a bunch of other useful rules)

If you don’t agree with some of the rules, feel free to use this as a base and modify it to your liking.

Format on Save

I recommend enabling “Format on Save” in your text editor if it’s available (with Prettier selected as your formatter). In VSCode, you can set this to be language specific:

// settings.json
{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}