ESLint Core Concepts

What is ESLint?

ESLint is a static code analysis tool for identifying problematic patterns in JavaScript/TypeScript code. It helps enforce coding standards, catch bugs early, and maintain consistent code style across a team.

Configuration File Formats

Flat Config (ESLint 9+, Recommended)

// eslint.config.js
import js from '@eslint/js';
import typescript from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';

export default [
  js.configs.recommended,
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        project: './tsconfig.json',
      },
    },
    plugins: {
      '@typescript-eslint': typescript,
    },
    rules: {
      // Your rules here
    },
  },
];

Legacy Config (.eslintrc)

// .eslintrc.json
{
  "root": true,
  "env": {
    "browser": true,
    "es2024": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    // Your rules here
  }
}

Rule Severity Levels

rules: {
  'no-unused-vars': 'off',        // Disabled
  'no-console': 'warn',           // Warning
  'no-debugger': 'error',         // Error
  'semi': ['error', 'always'],    // Error with options
}

Essential Configuration

Installation

# ESLint 9+ (Flat Config)
npm install -D eslint @eslint/js

# TypeScript support
npm install -D typescript-eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

# React support
npm install -D eslint-plugin-react eslint-plugin-react-hooks

# Import sorting
npm install -D eslint-plugin-import

Basic Setup Script

# Initialize ESLint
npm init @eslint/config@latest

Package.json Scripts

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "lint:strict": "eslint . --max-warnings 0",
    "lint:cache": "eslint . --cache",
    "lint:report": "eslint . --format html --output-file eslint-report.html"
  }
}

Ignoring Files

Using .eslintignore

# .eslintignore
node_modules/
dist/
build/
coverage/
*.min.js
*.d.ts

Inline Ignoring

// eslint-disable-next-line no-console
console.log('Debug info');

/* eslint-disable no-unused-vars */
const unusedVar = 'test';
/* eslint-enable no-unused-vars */

// Disable for entire file (must be first line)
/* eslint-disable */

Flat Config Ignores

// eslint.config.js
export default [
  {
    ignores: [
      'dist/**',
      'node_modules/**',
      '**/*.min.js',
      '*.config.js',
    ],
  },
  // ... other configs
];

Running ESLint

CLI Options

# Basic lint
eslint src/

# Fix auto-fixable issues
eslint src/ --fix

# Fail on warnings (CI)
eslint src/ --max-warnings 0

# Use cache for faster runs
eslint src/ --cache

# Specific file extensions
eslint src/ --ext .js,.jsx,.ts,.tsx

# Output formats
eslint src/ --format stylish      # Default, colored terminal
eslint src/ --format compact      # Single line per issue
eslint src/ --format json         # JSON output
eslint src/ --format html         # HTML report

# Debug configuration
eslint src/file.ts --print-config
eslint --debug src/

VS Code Integration

// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.useFlatConfig": true
}

Common Rule Categories

Possible Problems

Rules that detect likely bugs:

• no-unused-vars - Disallow unused variables
• no-undef - Disallow undeclared variables
• no-dupe-keys - Disallow duplicate object keys
• no-unreachable - Disallow unreachable code

Suggestions

Rules that suggest better ways:

• prefer-const - Suggest const over let when possible
• prefer-arrow-callback - Suggest arrow functions for callbacks
• no-var - Disallow var, use let/const

Layout & Formatting

Style-related rules (often delegated to Prettier):

• semi - Require semicolons
• quotes - Enforce quote style
• indent - Enforce indentation

Pre-commit Hooks

Using lint-staged

npm install -D husky lint-staged
npx husky init

// package.json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

# .husky/pre-commit
npx lint-staged

ESLint vs Prettier

Using Together

npm install -D prettier eslint-config-prettier

// eslint.config.js
import prettier from 'eslint-config-prettier';

export default [
  // ... your configs
  prettier, // Must be last to override conflicting rules
];

Interview Questions

1. What's the difference between ESLint and Prettier?

ESLint: Catches code quality issues, potential bugs, enforces best practices Prettier: Focuses purely on code formatting (whitespace, line breaks, quotes)

Use both together: ESLint for quality, Prettier for formatting, with eslint-config-prettier to avoid conflicts.

2. How do you handle legacy code that violates rules?

1. Use / eslint-disable rule-name / for specific files
2. Add to .eslintignore temporarily
3. Use --max-warnings to allow gradual fixes
4. Set rules to warn initially, then error after cleanup

3. What's the flat config and why was it introduced?

Flat config (ESLint 9+) replaces .eslintrc:

• Simpler, JavaScript-based configuration
• Better IDE support with explicit imports
• Clearer config merging and precedence
• No more cascading config confusion

4. How do you enforce ESLint in CI/CD?

# GitHub Actions
- name: Lint
  run: npm run lint -- --max-warnings 0

Use --max-warnings 0 to fail on any warnings, preventing gradual degradation.