Node.js 프로젝트에서 ESLint 설치는 이렇게 해:

# npm 사용 시
npm install --save-dev eslint

# yarn 사용 시
yarn add --dev eslint

# pnpm 사용 시
pnpm add --save-dev eslint

설치 후 초기 설정 파일 생성:

# ESLint 9.x 이상 (Flat Config 방식)
npx eslint --init

# 또는 직접 설정 파일 생성
touch eslint.config.js

변수 관련:

{
  "no-unused-vars": "warn",        // 미사용 변수 경고
  "no-undef": "error",             // 미정의 변수 사용 금지
  "no-var": "error",               // var 사용 금지 (let/const 사용)
  "prefer-const": "warn",          // 재할당 없으면 const 권장
  "no-shadow": "warn",             // 상위 스코프 변수 가리기 금지
}

코드 품질 관련:

{
  "eqeqeq": ["error", "always"],   // === 사용 강제
  "no-console": "warn",            // console.log 경고
  "no-debugger": "error",          // debugger 사용 금지
  "no-alert": "warn",              // alert 경고
  "no-eval": "error",              // eval() 사용 금지 (보안!)
  "no-implied-eval": "error",      // 암묵적 eval 금지
}

ES6+ 관련:

{
  "arrow-body-style": ["warn", "as-needed"],  // 화살표 함수 간결하게
  "prefer-arrow-callback": "warn",            // 콜백에 화살표 함수 권장
  "prefer-template": "warn",                  // 템플릿 리터럴 권장
  "object-shorthand": "warn",                 // 객체 단축 표기 권장
  "no-duplicate-imports": "error",            // 중복 import 금지
}

# npm
npm install --save-dev prettier

# yarn
yarn add --dev prettier

# pnpm
pnpm add --save-dev prettier

설정 파일 생성 (.prettierrc 또는 prettier.config.js):

// .prettierrc (JSON 형식)
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always"
}

또는 JS 형식으로:

// prettier.config.js
module.exports = {
  semi: true,           // 세미콜론 사용
  singleQuote: true,    // 작은따옴표 사용
  tabWidth: 2,          // 들여쓰기 2칸
  useTabs: false,       // 탭 대신 스페이스
  printWidth: 80,       // 한 줄 최대 80자
  trailingComma: "es5", // ES5 호환 후행 쉼표
  bracketSpacing: true, // 객체 괄호 안 공백
  arrowParens: "always",// 화살표 함수 매개변수 괄호
};

포맷팅에서 제외할 파일/폴더를 지정할 수 있어:

# .prettierignore
node_modules
dist
build
.next
coverage
*.min.js
public/

방법 1: eslint-config-prettier 사용 (권장!)

# 설치
npm install --save-dev eslint-config-prettier

// .eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended",
    "prettier",  // 반드시 마지막에 추가! Prettier와 충돌하는 ESLint 규칙 비활성화
  ],
  rules: {
    // 여기에는 포맷팅 관련 규칙 넣지 말기!
    // 로직/품질 관련 규칙만 넣기
    "no-unused-vars": "warn",
    "eqeqeq": "error",
  },
};

방법 2: eslint-plugin-prettier 사용

# 설치
npm install --save-dev eslint-plugin-prettier eslint-config-prettier

// .eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended",  // 이 한 줄로 해결!
  ],
};

Husky: Git Hooks를 쉽게 관리해주는 도구
lint-staged: 스테이징된 파일에만 린트 실행 (전체 파일 검사하면 너무 느리니까)

# 설치
npm install --save-dev husky lint-staged

# Husky 초기화
npx husky init

이러면 .husky/ 폴더가 생기고 pre-commit 파일이 만들어져.

# .husky/pre-commit
npx lint-staged

package.json에 lint-staged 설정 추가:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,scss,json,md}": [
      "prettier --write"
    ]
  }
}

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

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

jobs:
  lint-and-format:
    runs-on: ubuntu-latest
    
    steps:
      - name: 코드 체크아웃
        uses: actions/checkout@v4
      
      - name: Node.js 설정
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: 의존성 설치
        run: npm ci
      
      - name: ESLint 검사
        run: npm run lint
      
      - name: Prettier 포맷 확인
        run: npm run format:check

이제 PR 올릴 때마다 자동으로 코드 품질 검사가 실행돼!
검사 실패하면 머지 못 하게 막을 수도 있어. 팀 코드 품질 관리 완벽 ✅

가끔은 특정 줄에서 규칙을 무시해야 할 때가 있어:

// 다음 줄 전체 규칙 비활성화
// eslint-disable-next-line
console.log('디버깅용');

// 특정 규칙만 비활성화
// eslint-disable-next-line no-console
console.log('디버깅용');

// 블록 전체 비활성화 (남용 금지!)
/* eslint-disable no-console */
console.log('여러 줄');
console.log('비활성화');
/* eslint-enable no-console */

// 파일 전체 비활성화 (진짜 남용 금지!!)
/* eslint-disable */

Next.js는 자체 ESLint 설정을 제공해:

# Next.js 프로젝트 생성 시 자동 설정됨
# 수동으로 추가할 경우:
npm install --save-dev eslint-config-next

// .eslintrc.js
module.exports = {
  extends: [
    "next/core-web-vitals",  // Next.js 권장 설정
    "prettier",
  ],
  rules: {
    // 추가 규칙
  },
};

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

// .eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "prettier",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: true,
    tsconfigRootDir: __dirname,
  },
  rules: {
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/no-floating-promises": "error",
  },
};