ESLint - Quick Reference

When to Use This Skill

• Configure linting for JavaScript/TypeScript projects

• Create custom rules

• Integrate with Prettier and other tools

When NOT to Use This Skill

• ESLint 9 flat config + Biome - Use eslint-biome skill for modern setup

• TypeScript-specific rules - Use typescript-eslint skill

• Code quality principles - Use quality-common for SOLID/Clean Code

• SonarQube integration - Use sonarqube skill

Deep Knowledge: Use mcp__documentation__fetch_docs with technology: eslint for comprehensive documentation.

Basic Setup

npm install -D eslint @eslint/js npx eslint --init

Flat Config (ESLint 9+)

eslint.config.js

import js from '@eslint/js'; import tseslint from 'typescript-eslint';

export default [ js.configs.recommended, ...tseslint.configs.recommended, { files: ['/*.ts', '/.tsx'], rules: { '@typescript-eslint/no-unused-vars': 'error', '@typescript-eslint/explicit-function-return-type': 'warn', }, }, { ignores: ['dist/', 'node_modules/', '.config.js'], }, ];

With Prettier

import eslintConfigPrettier from 'eslint-config-prettier';

export default [ js.configs.recommended, ...tseslint.configs.recommended, eslintConfigPrettier, // Must be last ];

Legacy Config (.eslintrc)

{ "root": true, "env": { "browser": true, "es2021": true, "node": true }, "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended" ], "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], "rules": { "no-console": "warn", "@typescript-eslint/no-explicit-any": "error" } }

CLI Usage

Lint files

npx eslint src/

Fix auto-fixable issues

npx eslint src/ --fix

Check specific files

npx eslint "src/**/*.{ts,tsx}"

Anti-Patterns

Anti-Pattern Why It's Bad Correct Approach

Using legacy .eslintrc in new projects Deprecated in ESLint 9 Use flat config (eslint.config.mjs)

No TypeScript type checking Misses type-aware issues Use recommendedTypeChecked preset

Disabling rules with comments everywhere Code smell, defeats purpose Fix the issue or adjust rule config

Not caching in CI Slow linting Use --cache flag

Conflicting Prettier rules Formatting wars Use eslint-config-prettier

Ignoring warnings Accumulate tech debt Treat warnings as errors in CI

Quick Troubleshooting

Issue Likely Cause Solution

"Failed to load config" error Wrong config format Check eslint.config.mjs syntax

Type-aware rules not working Missing parserOptions Add projectService: true to config

Linting very slow No caching, type checking all files Enable cache, limit type checking to TS files

Rules from plugin not found Plugin not in flat config format Check plugin compatibility with ESLint 9

Prettier conflicts Both formatting same code Add eslint-config-prettier last

File not being linted In ignores array Check ignores in config