ESLint Configuration

Introduction

ESLint is a static analysis tool that finds problematic patterns in JavaScript and TypeScript code. This page shows how to install ESLint, integrate it with TypeScript and Prettier, add useful rules, and wire it into editor and CI workflows.

TL;DR

Install ESLint with TypeScript support, enable recommended rules, and integrate with Prettier. Add `eslint` to CI and `editor.codeActionsOnSave` for automatic fixes on save. Prefer `pnpm` in this repo.

Installation

Install ESLint in your project:

1npm install --save-dev eslint

TypeScript support

1npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

Prettier integration

1npm install --save-dev eslint-config-prettier

Basic `.eslintrc.json`

Example starter config for TypeScript + Prettier:

1{
2  "root": true,
3  "parser": "@typescript-eslint/parser",
4  "plugins": ["@typescript-eslint"],
5  "extends": [
6    "eslint:recommended",
7    "plugin:@typescript-eslint/recommended",
8    "prettier"
9  ],
10  "parserOptions": {
11    "ecmaVersion": 2022,
12    "sourceType": "module"
13  },
14  "rules": {
15    "semi": ["error", "always"],
16    "@typescript-eslint/no-unused-vars": "warn",
17    "@typescript-eslint/no-explicit-any": "warn"
18  }
19}

Useful CLI Commands

1# Check all files
2npx eslint .
3
4# Fix auto-fixable problems
5npx eslint . --fix
6
7# Check specific files
8npx eslint src/**/*.ts

VSCode Integration

Install the ESLint extension and enable auto-fix on save:

1{
2  "editor.codeActionsOnSave": {
3    "source.fixAll.eslint": true
4  }
5}

CI Integration

Add a lint check to CI pipelines or package scripts:

1{
2  "scripts": {
3    "lint": "eslint .",
4    "lint:fix": "eslint . --fix"
5  }
6}

Quick verification

1# Install deps
2pnpm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier
3
4# Run lint
5pnpm exec eslint .
6
7# Auto-fix
8pnpm exec eslint . --fix

Ready For Production

• Add `"lint"` and `"lint:fix"` scripts to `package.json`
• Run `tsc --noEmit` and `eslint` in CI
• Enable `editor.codeActionsOnSave` in shared VSCode settings

Troubleshooting

• Parsing errors: ensure `parserOptions.project` points to your tsconfig when using type-aware rules.
• Plugin not found: install the missing plugin as a dev dependency.
• Conflicts with Prettier: add `prettier` to `extends` last to disable formatting rules.

Resources

• ESLint Docs
• typescript-eslint