ESLint Checker & Auto-Fix

What Is ESLint?

ESLint is the most widely used static analysis tool for JavaScript and TypeScript. Created by Nicholas C. Zakas in 2013, it analyzes your code without executing it, finding problems that range from syntax errors to style inconsistencies and potential bugs.

Unlike Prettier (which only handles formatting), ESLint checks code quality — unused variables, incorrect equality checks, security issues, and much more. When combined with its auto-fix feature, it can also rewrite many problems automatically.

ESLint vs Prettier — Key Difference

Most Important ESLint Rules

Error Prevention

• no-unused-vars — Flags variables that are declared but never used
• no-undef — Catches references to undeclared variables
• no-unreachable — Finds code after return/throw that will never run
• no-duplicate-case — Detects duplicate case labels in switch statements
• use-before-define — Prevents use of variables before their declaration

Best Practices

• eqeqeq — Requires === instead of == (avoids type coercion bugs)
• no-var — Disallows var; use let or const instead
• prefer-const — Suggests const when a variable is never reassigned
• no-eval — Disallows dangerous eval() calls
• no-implicit-globals — Prevents accidentally creating global variables
• no-console — Warns about console.log() left in production code
• no-debugger — Prevents debugger statements in production

Code Style (Auto-fixable)

• semi — Enforce or disallow semicolons
• quotes — Enforce single, double, or backtick quotes
• indent — Consistent indentation (2 or 4 spaces, or tabs)
• comma-dangle — Trailing commas in multiline expressions
• no-trailing-spaces — Remove trailing whitespace from lines
• no-multiple-empty-lines — Limit consecutive blank lines
• arrow-spacing — Spaces around fat-arrow =>
• object-curly-spacing — Spaces inside { } object literals

Setting Up ESLint in Your Project

# Install
npm install --save-dev eslint

# Initialise config (interactive)
npx eslint --init

# Lint a file
npx eslint src/index.js

# Lint and auto-fix
npx eslint src/index.js --fix

# Lint entire project
npx eslint . --ext .js,.jsx,.ts,.tsx

Example .eslintrc.json

{
  "env": { "browser": true, "es2022": true, "node": true },
  "extends": ["eslint:recommended"],
  "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
  "rules": {
    "no-unused-vars": "error",
    "no-console": "warn",
    "eqeqeq": ["error", "always"],
    "semi": ["error", "always"],
    "quotes": ["warn", "single"],
    "no-var": "error",
    "prefer-const": "warn"
  }
}

ESLint with TypeScript

For TypeScript projects, install @typescript-eslint/parser and @typescript-eslint/eslint-plugin:

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

# .eslintrc.json for TypeScript
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"]
}

Integrating ESLint in Your Workflow

• VS Code: Install the ESLint extension — errors appear inline as you type
• Pre-commit hooks: Use lint-staged + husky to lint before every commit
• CI/CD: Run npx eslint . --max-warnings 0 to fail builds with any warnings
• Vite/Webpack: Use vite-plugin-eslint or eslint-webpack-plugin for build-time linting