How to set up ESLint and Prettier for TypeScript

· Category: TypeScript

Short answer

Install eslint, @typescript-eslint/parser, @typescript-eslint/eslint-plugin, prettier, and eslint-config-prettier. Configure ESLint for TypeScript parsing and let Prettier handle formatting. For TypeScript project setup, see how to configure VS Code for TypeScript.

Installation

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

.eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn"
  }
}

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100
}

Tips

  • Add format: "prettier --write ." and lint: "eslint ." scripts to package.json
  • Configure your IDE to run ESLint and Prettier on save for automatic enforcement