lint-format-and-type-check

Lint, Format, and Type Check

Overview

Linting, formatting, and type checking are automated code quality tools that catch errors, enforce style consistency, and improve code maintainability before code reaches production.

Core Principle: "Automate code quality checks so humans can focus on logic, not syntax."

1. The Three Pillars of Code Quality Automation

2. Linting

ESLint (JavaScript/TypeScript)

// .eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "error",
    "react/prop-types": "off"
  }
}

Pylint (Python)

# .pylintrc
[MESSAGES CONTROL]
disable=missing-docstring,too-few-public-methods

[FORMAT]
max-line-length=100

[BASIC]
good-names=i,j,k,x,y,z,df,db

Running Linters

# JavaScript/TypeScript
npx eslint . --ext .ts,.tsx

# Python
pylint src/

# Auto-fix where possible
npx eslint . --fix

3. Formatting

Prettier (JavaScript/TypeScript)

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

Black (Python)

# pyproject.toml
[tool.black]
line-length = 100
target-version = ['py39']
include = '\.pyi?$'

Running Formatters

# Prettier
npx prettier --write .

# Black
black .

# Check without modifying
npx prettier --check .
black --check .

4. Type Checking

TypeScript

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}

mypy (Python)

# mypy.ini
[mypy]
python_version = 3.9
warn_return_any = True
warn_unused_configs = True
disallow_untyped_defs = True

Running Type Checkers

# TypeScript
tsc --noEmit

# Python mypy
mypy src/

5. Pre-commit Hooks

Enforce checks before code is committed using Husky (JS) or pre-commit (Python).

Husky (JavaScript/TypeScript)

// package.json
{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

# .husky/pre-commit
#!/bin/sh
npx lint-staged
npm run type-check

pre-commit (Python)

# .pre-commit-config.yaml
repos:
  - repo: https://github.com/psf/black
    rev: 23.1.0
    hooks:
      - id: black
  
  - repo: https://github.com/pycqa/pylint
    rev: v3.0.0
    hooks:
      - id: pylint
  
  - repo: https://github.com/pre-commit/mirrors-mypy
    rev: v1.0.0
    hooks:
      - id: mypy

6. CI/CD Integration

# .github/workflows/code-quality.yml
name: Code Quality

on: [push, pull_request]

jobs:
  lint-format-typecheck:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Lint
        run: npm run lint
      
      - name: Format check
        run: npm run format:check
      
      - name: Type check
        run: npm run type-check

7. IDE Integration

VS Code Settings

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "typescript",
    "typescriptreact"
  ],
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter"
  }
}

8. Common Linting Rules

Security Rules

// Prevent security issues
{
  "no-eval": "error",
  "no-implied-eval": "error",
  "no-new-func": "error",
  "no-script-url": "error"
}

Performance Rules

{
  "no-await-in-loop": "warn",
  "require-atomic-updates": "error"
}

Best Practices

{
  "eqeqeq": ["error", "always"],
  "no-var": "error",
  "prefer-const": "error",
  "prefer-arrow-callback": "warn"
}

9. Progressive Adoption

Start Permissive, Tighten Over Time

// Week 1: Warnings only
{
  "rules": {
    "no-console": "warn",
    "@typescript-eslint/no-explicit-any": "warn"
  }
}

// Week 4: Errors
{
  "rules": {
    "no-console": "error",
    "@typescript-eslint/no-explicit-any": "error"
  }
}

10. Lint, Format, Type Check Checklist

• Linter Configured: ESLint/Pylint with team-agreed rules?
• Formatter Configured: Prettier/Black with consistent settings?
• Type Checker: TypeScript/mypy enabled with strict mode?
• Pre-commit Hooks: Automated checks before commit?
• CI Integration: Checks run on every PR?
• IDE Integration: Auto-format on save enabled?
• Documentation: Rules documented for team?
• Gradual Adoption: New rules introduced incrementally?

Related Skills

• 45-developer-experience/commit-conventions
• 45-developer-experience/code-review-standards
• 45-developer-experience/local-dev-standard