Code linter setup

March 24, 2024 · Updated on November 14, 2025 · coding

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

.eslintrc.yml


env:
  browser: true
  es2020: true
extends:
  - standard
  - eslint:recommended
  - plugin:react/recommended
  - plugin:react-hooks/recommended
  - plugin:jsx-a11y/recommended
  - prettier
  - plugin:prettier/recommended
  - "plugin:@typescript-eslint/recommended"
ignorePatterns:
  - build/**/*
  - dist/**/*
  - out/**/*
  - package-lock.json
  - yarn.lock
  - bun.lock
parserOptions:
  ecmaFeatures:
    jsx: true
  ecmaVersion: 2020
  sourceType: module
plugins:
  - react
  - prettier
  - "@typescript-eslint"
  - jsx-a11y
  - 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-standard@^17.1.0" \
  "eslint-plugin-jsx-a11y@6.10.2" \
  "eslint-plugin-react@7.11.1" \
  "eslint-plugin-react-hooks@^5.0.0" \
  "eslint-plugin-import@^2.29.1" \
  "eslint-plugin-n@^16.6.2" \
  "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@^4.3.0" \
  "prettier@^3.2.5"


pnpm add --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-standard@^17.1.0" \
  "eslint-plugin-jsx-a11y@6.10.2" \
  "eslint-plugin-react@7.11.1" \
  "eslint-plugin-react-hooks@^5.0.0" \
  "eslint-plugin-import@^2.29.1" \
  "eslint-plugin-n@^16.6.2" \
  "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@^4.3.0" \
  "prettier@^3.2.5"


yarn add --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-standard@^17.1.0" \
  "eslint-plugin-jsx-a11y@6.10.2" \
  "eslint-plugin-react@7.11.1" \
  "eslint-plugin-react-hooks@^5.0.0" \
  "eslint-plugin-import@^2.29.1" \
  "eslint-plugin-n@^16.6.2" \
  "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@^4.3.0" \
  "prettier@^3.2.5"


bun add --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-standard@^17.1.0" \
  "eslint-plugin-jsx-a11y@6.10.2" \
  "eslint-plugin-react@7.11.1" \
  "eslint-plugin-react-hooks@^5.0.0" \
  "eslint-plugin-import@^2.29.1" \
  "eslint-plugin-n@^16.6.2" \
  "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@^4.3.0" \
  "prettier@^3.2.5"

Gotchas

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

Configs

standard — Enforces the JavaScript Standard Style, zero-config and opinionated.
eslint:recommended — Core ESLint rules that catch common mistakes.
plugin:react/recommended — React-specific rules like checking for missing keys in lists.
plugin:react-hooks/recommended — Enforces the Rules of Hooks and catches missing dependencies.
plugin:jsx-a11y/recommended — Catches accessibility issues like missing alt text and invalid ARIA attributes.
prettier — Turns off all ESLint rules that would conflict with Prettier formatting.
plugin:prettier/recommended — Rules to avoid Prettier conflicts.
plugin:@typescript-eslint/recommended — Type-aware linting for TypeScript codebases.
plugin:@next/next/recommended — Catches Next.js-specific issues like missing Image optimizations.

Plugins

n — Node.js-specific linting rules, the successor to eslint-plugin-node. Catches issues like deprecated APIs and missing file extensions.
sort-keys-fix — Auto-sorts object keys alphabetically on save, keeps code tidy.
simple-import-sort — Automatically groups and sorts imports, no config needed.
unused-imports — Removes unused imports automatically, keeps your imports clean.
eslint-prettier — Runs Prettier as an ESLint rule so formatting errors show as lint warnings.

[daniel]