Linting & Formatting¶

Linting and formatting are essential parts of a professional TypeScript workflow.

They ensure:

• consistent code style
• early detection of bugs
• cleaner diffs
• fewer code review comments
• better team collaboration

This module shows how to set up ESLint for TypeScript and integrate Prettier for formatting—without conflicts.

Why Linting & Formatting Matter¶

TypeScript catches type errors, but not:

• unused variables
• unreachable code
• accidental any
• inconsistent naming
• style issues
• formatting problems

ESLint + Prettier fill those gaps.

Together, they create a clean, safe, consistent codebase.

ESLint + TypeScript¶

ESLint is the standard linter for JavaScript and TypeScript.

To use it with TypeScript, you need:

• ESLint core
• TypeScript ESLint parser
• TypeScript ESLint plugin

1. Install ESLint for TypeScript¶

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

2. Create an ESLint config¶

.eslintrc.cjs¶

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module"
  },
  plugins: ["@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  rules: {
    // Add custom rules here
  }
}

What this does¶

• parser: tells ESLint to understand TypeScript syntax
• plugin: enables TypeScript‑specific lint rules
• extends: loads recommended rule sets

This is the minimal, modern setup.

3. Run ESLint¶

npx eslint src --ext .ts

Fix automatically:

npx eslint src --ext .ts --fix

Useful TypeScript‑Specific Rules¶

1. No implicit any¶

"@typescript-eslint/no-explicit-any": "warn"

2. Require explicit return types¶

"@typescript-eslint/explicit-function-return-type": "off"

(Usually turned off for ergonomics.)

3. No unused variables¶

"@typescript-eslint/no-unused-vars": "warn"

4. Enforce consistent type imports¶

"@typescript-eslint/consistent-type-imports": "warn"

This avoids mixing:

import type { User } from "./types"
import { User } from "./types"

Prettier Integration¶

Prettier is a formatter, not a linter.

It handles:

• indentation
• quotes
• semicolons
• line width
• trailing commas

ESLint handles logic; Prettier handles style.

To avoid conflicts, we use:

• eslint-config-prettier (turns off conflicting rules)
• eslint-plugin-prettier (runs Prettier inside ESLint)

1. Install Prettier + ESLint integration¶

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

2. Add Prettier config¶

.prettierrc¶

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"
}

(Use whatever style your team prefers.)

3. Update ESLint config¶

.eslintrc.cjs¶

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module"
  },
  plugins: ["@typescript-eslint", "prettier"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  rules: {
    "prettier/prettier": "warn"
  }
}

What this does¶

• plugin:prettier/recommended
  • turns off ESLint rules that conflict with Prettier
  • runs Prettier as an ESLint rule

Now running ESLint will also format your code.

4. Format Code Automatically¶

npx eslint src --ext .ts --fix

Or run Prettier directly:

npx prettier --write .

Editor Integration¶

Most editors (VS Code, WebStorm) support:

• auto‑format on save
• ESLint warnings inline
• Prettier formatting on save
• quick fixes

VS Code recommended settings¶

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["typescript"]
}

This gives you a seamless experience.

Common Pitfalls¶

1. ESLint and Prettier fighting each other¶

Fix:

Use eslint-config-prettier and plugin:prettier/recommended.

2. ESLint not picking up TypeScript¶

Fix:

Ensure:

"parser": "@typescript-eslint/parser"

3. Prettier not formatting¶

Fix:

Set Prettier as the default formatter in your editor.

4. Slow ESLint performance¶

Fix:

Use:

"parserOptions": { "project": "./tsconfig.json" }

only when necessary (e.g., for rules requiring type info).

Recommended Setup for Most Projects¶

package.json¶

{
  "scripts": {
    "lint": "eslint src --ext .ts",
    "lint:fix": "eslint src --ext .ts --fix",
    "format": "prettier --write ."
  }
}

Workflow¶

• During development: ESLint + Prettier in editor
• Before commit: npm run lint:fix
• In CI: npm run lint

This keeps your codebase clean and consistent.

Summary¶

In this lesson, you learned how to set up linting and formatting for TypeScript:

1. ESLint + TypeScript¶

• @typescript-eslint/parser
• @typescript-eslint/eslint-plugin
• recommended rules
• type‑aware linting

2. Prettier integration¶

• formatting without conflicts
• eslint-config-prettier
• eslint-plugin-prettier
• editor integration

Together, ESLint + Prettier form the backbone of a professional TypeScript workflow.