Linting & Formatting – ESLint, Prettier, and `eslint-plugin-typescript`

Install ESLint & Prettier

npm i -D eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin

Init ESLint

npx eslint --init

Select TypeScript, React (if applicable), and Prettier integration.

Sample .eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "prettier/prettier": "error"
  }
}

Prettier config (.prettierrc)

{ "singleQuote": true, "trailingComma": "all" }

Add scripts to package.json:

"scripts": {
  "lint": "eslint 'src/**/*.{ts,tsx}'",
  "format": "prettier --write 'src/**/*.{ts,tsx,js,jsx,json,md}'"
}

Run npm run lint and npm run format.