TypeScript Tooling

TypeScript Tooling: ESLint, Prettier, & IDE Integration

A robust TypeScript workflow relies on static code analysis with ESLint (@typescript-eslint), automated code formatting with Prettier, and IDE integration.

Tooling Stack Overview

flowchart TD
    A["Source Code (.ts / .tsx)"] --> B["tsc (Type Checking)"]
    A --> C["ESLint + @typescript-eslint (Code Quality & Anti-Patterns)"]
    A --> D["Prettier (Code Formatting & Style)"]

Sample ESLint Configuration (.eslintrc.json)

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "rules": {
    "@typescript-eslint/no-explicit-any": "error",
    "@typescript-eslint/explicit-function-return-type": "warn"
  }
}

Practical Code Example

// Clean code adhering to ESLint & Prettier standards
export interface AppSettings {
  readonly environment: string;
  readonly port: number;
}

export function loadSettings(): AppSettings {
  return {
    environment: process.env.NODE_ENV || "development",
    port: parseInt(process.env.PORT || "8080", 10)
  };
}

Best Practices & Gotchas

• Use Type-Aware Lint Rules: Enable rules like @typescript-eslint/await-thenable and @typescript-eslint/no-floating-promises.
• Separate Formatting from Linting: Let Prettier handle code formatting, and use ESLint exclusively for code logic and type safety rules.
• Run Linting in CI/CD: Add npm run lint and npm run format:check to pull request validation pipelines.

Self-Check Challenge

Which ESLint parser is required to enable TypeScript AST parsing in ESLint? (Answer: @typescript-eslint/parser)