Automating Team Code Quality with ESLint, Prettier & Husky

Why Automate Code Quality

We introduced ESLint, Prettier, and Husky in the plateerag_home_dev project. Consistent code style is non-negotiable in team projects.

Code Quality Pipeline

flowchart LR
    A[코드 작성] --> B[저장 시 Prettier]
    B --> C[커밋 시 Husky]
    C --> D[lint-staged]
    D --> E[ESLint 검사]
    E --> F{통과?}
    F -->|Yes| G[커밋 완료]
    F -->|No| H[커밋 차단]

ESLint Configuration

// .eslintrc.js
module.exports = {
  extends: [
    'next/core-web-vitals',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/no-explicit-any': 'warn',
    'no-console': 'warn',
  },
};

Prettier Configuration

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2
}

Husky + lint-staged

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

Pain Points During Setup

1. ESLint and Prettier conflicts → added eslint-config-prettier
2. TypeScript parser misconfiguration → added @typescript-eslint/parser
3. Missing Next.js-specific rules → added next/core-web-vitals
4. Husky hooks not running → ran npx husky install

Results

• Automatic linting and formatting before every commit
• Zero style nits in code review
• Build failures in CI blocked by lint errors