TypeScript with ESLint

Code quality and linting for TypeScript projects

🔍 What is ESLint?

ESLint is a powerful linting tool that analyzes your TypeScript code for potential errors, style issues, and best practice violations. It helps maintain code quality, consistency, and catches bugs before runtime. 


# Install ESLint for TypeScript
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

# Initialize ESLint configuration
npx eslint --init

Result: 

ESLint configured for TypeScript project

ESLint Features

🐛

Error Detection

Find bugs before runtime 

// ESLint catches this
const x = 5;
x = 10; // Error!
✨

Code Style

Enforce consistent formatting 

// Enforces style rules
const name = "Alice";
// vs
const name = 'Alice';
🔧

Auto-fix

Automatically fix issues 

eslint --fix src/**/*.ts
📏

Custom Rules

Define project-specific rules 

{
  "rules": {
    "no-console": "warn"
  }
}

🔹 Installation

Set up ESLint for your TypeScript project: 

# Install required packages
npm install --save-dev eslint

# TypeScript ESLint packages
npm install --save-dev @typescript-eslint/parser
npm install --save-dev @typescript-eslint/eslint-plugin

# Optional: Prettier integration
npm install --save-dev eslint-config-prettier
npm install --save-dev eslint-plugin-prettier

# Initialize ESLint
npx eslint --init

Result: 

Creates .eslintrc.json configuration file

🔹 Basic Configuration

Configure ESLint for TypeScript: 

// .eslintrc.json
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    // Your custom rules
    "no-console": "warn",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/explicit-function-return-type": "warn"
  },
  "env": {
    "node": true,
    "es6": true
  }
}

Result: 

ESLint configured with TypeScript support

🔹 Common Rules

Useful ESLint rules for TypeScript:

TypeScript-Specific Rules: 

{
  "rules": {
    // Require explicit return types
    "@typescript-eslint/explicit-function-return-type": "warn",
    
    // Disallow unused variables
    "@typescript-eslint/no-unused-vars": "error",
    
    // Disallow 'any' type
    "@typescript-eslint/no-explicit-any": "warn",
    
    // Require consistent type imports
    "@typescript-eslint/consistent-type-imports": "error",
    
    // Naming conventions
    "@typescript-eslint/naming-convention": [
      "error",
      {
        "selector": "interface",
        "format": ["PascalCase"]
      }
    ]
  }
}

General JavaScript Rules: 

{
  "rules": {
    // Disallow console statements
    "no-console": "warn",
    
    // Require === instead of ==
    "eqeqeq": "error",
    
    // Disallow var
    "no-var": "error",
    
    // Prefer const
    "prefer-const": "error",
    
    // Disallow multiple empty lines
    "no-multiple-empty-lines": ["error", { "max": 1 }]
  }
}

🔹 Running ESLint

Different ways to run ESLint: 

# Lint all TypeScript files
npx eslint src/**/*.ts

# Lint and auto-fix issues
npx eslint src/**/*.ts --fix

# Lint specific file
npx eslint src/index.ts

# Lint with detailed output
npx eslint src/**/*.ts --format stylish

🔸 Package.json Scripts: 

{
  "scripts": {
    "lint": "eslint src/**/*.ts",
    "lint:fix": "eslint src/**/*.ts --fix",
    "lint:check": "eslint src/**/*.ts --max-warnings 0"
  }
}

Usage: 

npm run lint       → Check for issues
npm run lint:fix   → Fix issues automatically
npm run lint:check → Fail if warnings exist

🔹 VS Code Integration

Configure ESLint in Visual Studio Code:

🔸 Install ESLint Extension:

  1. Open VS Code Extensions (Ctrl+Shift+X)
  2. Search for "ESLint"
  3. Install the official ESLint extension

🔸 VS Code Settings: 

// .vscode/settings.json
{
  // Enable ESLint
  "eslint.enable": true,
  
  // Validate TypeScript files
  "eslint.validate": [
    "javascript",
    "typescript"
  ],
  
  // Auto-fix on save
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  
  // Format on save
  "editor.formatOnSave": true
}

Result: 

ESLint runs automatically and fixes issues on save

🔹 Ignoring Files

Exclude files from linting: 

# .eslintignore

# Dependencies
node_modules/

# Build output
dist/
build/

# Generated files
*.generated.ts

# Test coverage
coverage/

# Config files
*.config.js

Result: 

ESLint skips these files and directories

🔹 Prettier Integration

Combine ESLint with Prettier for formatting: 

# Install Prettier and integration
npm install --save-dev prettier
npm install --save-dev eslint-config-prettier
npm install --save-dev eslint-plugin-prettier

🔸 Update ESLint Config: 

// .eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"  // Add this
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

🔸 Prettier Config: 

// .prettierrc
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

🔹 Example: Before and After

See how ESLint improves code quality:

❌ Before ESLint: 

// Poor code quality
function calculate(x,y) {
    var result = x + y
    console.log(result)
    return result
}

const unused = 5;

if (x == 10) {
    console.log("equal")
}

✅ After ESLint --fix: 

// Clean, consistent code
function calculate(x: number, y: number): number {
  const result = x + y;
  return result;
}

if (x === 10) {
  console.log('equal');
}

Improvements: 

• Added type annotations
• Removed unused variables
• Fixed var to const
• Added semicolons
• Changed == to ===
• Removed console.log
• Consistent formatting

🔹 Best Practices

Tips for using ESLint effectively:

✅ Do:

  • Run ESLint in CI/CD to catch issues early
  • Use recommended configs as a starting point
  • Enable auto-fix on save in your editor
  • Customize rules to fit your team's style
  • Document rule changes in your project

❌ Don't:

  • Disable rules without good reason
  • Ignore ESLint warnings in production code
  • Use too many custom rules initially
  • Forget to commit .eslintrc.json to version control

🧠 Test Your Knowledge

Which command automatically fixes ESLint issues?