Code Quality: Pre-Commit Hooks and Automated Linting

$# .husky/pre-commit
$#!/usr/bin/env sh
$. "$(dirname -- "$0")/_/husky.sh"

$# Run TypeScript type checking
$npm run type-check

$# Run lint-staged on staged files
$npx lint-staged

// package.json
{
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix --max-warnings=0",
      "prettier --write"
    ],
    "*.{js,jsx,mjs,cjs}": [
      "eslint --fix --max-warnings=0",
      "prettier --write"
    ],
    "*.{json,md,mdx,yml,yaml}": [
      "prettier --write"
    ],
    "*.css": [
      "prettier --write"
    ]
  }
}

$# Runs automatically on commit
$npm run type-check

// Missing types
const user = getUser(id); // Error: 'id' is not defined

// Type mismatches
function greet(name: string) {
  return `Hello, ${name}`;
}
greet(123); // Error: Argument of type 'number' is not assignable

// Missing return types
function getData() { // Warning: Missing return type
  return fetch('/api/data');
}

// Unused variables
const unused = 'value'; // Warning: 'unused' is declared but never used

// Import errors
import { NonExistent } from './module'; // Error: Module has no exported member

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true
  }
}

// eslint.config.mjs
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import importPlugin from 'eslint-plugin-import';

export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommended,
  ...tseslint.configs.strictTypeChecked,
  {
    plugins: {
      react,
      'react-hooks': reactHooks,
      import: importPlugin,
    },
    rules: {
      // React Hooks rules
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',

      // TypeScript specific
      '@typescript-eslint/no-unused-vars': ['error', {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      }],
      '@typescript-eslint/no-explicit-any': 'warn',
      '@typescript-eslint/prefer-nullish-coalescing': 'error',
      '@typescript-eslint/prefer-optional-chain': 'error',

      // Import organization
      'import/order': ['error', {
        groups: [
          'builtin',
          'external',
          'internal',
          ['parent', 'sibling'],
          'index',
        ],
        'newlines-between': 'always',
        alphabetize: { order: 'asc' },
      }],

      // General best practices
      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
      'prefer-const': 'error',
      'no-var': 'error',
    },
  },
  {
    // Test files have relaxed rules
    files: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts'],
    rules: {
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/no-non-null-assertion': 'off',
    },
  },
  {
    // Ignore patterns
    ignores: [
      'node_modules/**',
      '.next/**',
      'dist/**',
      'coverage/**',
    ],
  }
);

// Additional rules to enforce design system
{
  rules: {
    // Ban hardcoded colors
    'no-restricted-syntax': [
      'error',
      {
        selector: 'Literal[value=/bg-white|bg-black|bg-gray-|text-gray-|text-white|text-black/]',
        message: 'Use design tokens instead of hardcoded colors (e.g., bg-background, text-foreground)',
      },
      {
        selector: 'Literal[value=/#[0-9a-fA-F]{3,8}/]',
        message: 'Use CSS variables instead of hex colors',
      },
    ],
  },
}

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-tailwindcss"]
}

# .prettierignore
node_modules
.next
dist
coverage
pnpm-lock.yaml
package-lock.json
*.min.js

// Before Prettier
<div className="p-4 flex bg-card items-center border rounded-lg gap-2 text-sm" />

// After Prettier (sorted by Tailwind conventions)
<div className="flex items-center gap-2 rounded-lg border bg-card p-4 text-sm" />

$# Run all linting
$npm run lint

$# Run linting with auto-fix
$npm run lint -- --fix

$# Run formatting check
$npm run format:check

$# Run formatting with write
$npm run format

$# Run TypeScript check
$npm run type-check

$# Run all validation (like pre-commit does)
$npm run validate

{
  "scripts": {
    "lint": "eslint . --max-warnings=0",
    "lint:fix": "eslint . --fix --max-warnings=0",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "type-check": "tsc --noEmit",
    "validate": "npm run type-check && npm run lint && npm run format:check"
  }
}

$git commit --no-verify -m "Emergency fix"

# .github/workflows/ci.yml
name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  quality:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Type check
        run: npm run type-check

      - name: Lint
        run: npm run lint

      - name: Format check
        run: npm run format:check

      - name: Build
        run: npm run build

  test:
    runs-on: ubuntu-latest
    needs: quality

    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - run: npm ci
      - run: npm test

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

// .vscode/extensions.json
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss",
    "prisma.prisma"
  ]
}

$npm run design:lint

// scripts/design-lint.ts

const VIOLATIONS = {
  // Hardcoded colors
  hardcodedColors: [
    'bg-white', 'bg-black', 'text-white', 'text-black',
    'bg-gray-', 'text-gray-', 'border-gray-',
    'bg-red-', 'bg-green-', 'bg-blue-',
  ],

  // Missing mode.radius on bordered elements
  missingRadius: /className="[^"]*border[^"]*"(?![^"]*mode\.radius)/,

  // Arbitrary values instead of design tokens
  arbitraryValues: [
    'p-[', 'm-[', 'w-[', 'h-[', 'gap-[',
    'text-[#', 'bg-[#', 'border-[#',
  ],
};

// Reports violations with file and line number
// Exits with error code if violations found

$# Check entire src directory
$npm run design:lint

$# Check specific directory
$npm run design:lint src/app/

$# Check specific file
$npm run design:lint src/components/dashboard/stats-card.tsx

$# Run the same checks manually
$npm run lint
$npm run type-check

$# ESLint auto-fix
$npm run lint -- --fix

$# Prettier auto-fix
$npm run format

// Before: unused variable
const unused = 'value';

// After: remove it
// (or prefix with _ if intentionally unused)
const _intentionallyUnused = 'value';

$git add .
$git commit -m "Add new feature component"

// eslint.config.mjs
{
  rules: {
    // Enforce import order
    'import/order': ['error', {
      groups: ['builtin', 'external', 'internal'],
      'newlines-between': 'always',
    }],

    // Ban console.log in production code
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',

    // Require explicit return types on functions
    '@typescript-eslint/explicit-function-return-type': ['warn', {
      allowExpressions: true,
      allowHigherOrderFunctions: true,
    }],

    // Enforce naming conventions
    '@typescript-eslint/naming-convention': [
      'error',
      { selector: 'interface', format: ['PascalCase'] },
      { selector: 'typeAlias', format: ['PascalCase'] },
      { selector: 'enum', format: ['PascalCase'] },
    ],
  },
}

// eslint-plugins/design-system.js
module.exports = {
  rules: {
    'no-hardcoded-colors': {
      create(context) {
        return {
          Literal(node) {
            if (typeof node.value === 'string') {
              if (/bg-white|text-gray-/.test(node.value)) {
                context.report({
                  node,
                  message: 'Use design tokens instead of hardcoded colors',
                });
              }
            }
          },
        };
      },
    },
  },
};

$# Reinstall husky
$npx husky install

$# Make hooks executable
$chmod +x .husky/pre-commit

$# Clear ESLint cache
$rm -rf node_modules/.cache/eslint

$# Run lint with no cache
$npm run lint -- --no-cache

$# Regenerate Prisma types
$npx prisma generate

$# Clear TypeScript cache
$rm -rf node_modules/.cache/typescript

$# Restart TS server in VS Code
$Cmd+Shift+P > "TypeScript: Restart TS Server"

$npm run prepare
$# or
$npx husky install