I recently had to update the ESLint and Prettier configuration for one of my projects, which is a React app written in TypeScript. I figured it's time to document the setup and any gotchas it comes with.

Overview

This setup leverages ESLint for code analysis and Prettier for automatic formatting. My aim here is to not think about linting when writing code.

Configuration

env:
  browser: true
  es2020: true
extends:
  - standard
  - react-app
  - react-app/jest
  - eslint:recommended
  - plugin:react/recommended
  - prettier
  - plugin:prettier/recommended
  - "plugin:@typescript-eslint/recommended"
ignorePatterns:
  - build/**/*
  - package-lock.json
parserOptions:
  ecmaFeatures:
    jsx: true
  ecmaVersion: 2020
  sourceType: module
plugins:
  - react
  - prettier
  - "@typescript-eslint"
  - sort-keys-fix
  - simple-import-sort
  - unused-imports
settings:
  react:
    version: detect
parser: "@typescript-eslint/parser"
rules:
  prettier/prettier: warn
  sort-vars: warn
  "@typescript-eslint/member-ordering":
    [warn, { default: { order: alphabetically } }]
  sort-keys-fix/sort-keys-fix: warn
  simple-import-sort/imports: warn
  simple-import-sort/exports: warn
  "@typescript-eslint/no-unused-vars": off
  unused-imports/no-unused-imports: warn
  unused-imports/no-unused-vars:
    [
      warn,
      {
        "vars": "all",
        "varsIgnorePattern": "^_",
        "args": "after-used",
        "argsIgnorePattern": "^_",
      },
    ]

Installation

Run the following command in your project directory:

npm install --save-dev "@typescript-eslint/eslint-plugin@^5.62.0" \
"@typescript-eslint/parser@^5.62.0" \
"eslint@^8.57.0" \
"eslint-config-prettier@^9.1.0" \
"eslint-config-react-app@^7.0.1" \
"eslint-config-standard@^17.0.0-1" \
"eslint-plugin-import@^2.29.1" \
"eslint-plugin-node@^11.1.0" \
"eslint-plugin-prettier@^5.1.3" \
"eslint-plugin-promise@^6.1.1" \
"eslint-plugin-simple-import-sort@^12.0.0" \
"eslint-plugin-sort-keys-fix@^1.1.2" \
"eslint-plugin-unused-imports@^2.0.0" \
"prettier@^3.2.5"

Gotchas

1. eslint-plugin-unused-imports need to be upgraded.
2. @typescript-eslint/parser and @typescript-eslint/eslint-plugin need to be upgraded.