프론트엔드 프로젝트 코드 품질 관리: ESLint, Prettier, Husky, lint-staged

1. ESLint와 Prettier 설정

1.1 ESLint 설치 및 초기화:

npm install eslint --save-dev
npx eslint --init

1.2 ESLint 설정 파일 예제:

// .eslintrc.json
{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "plugins": ["react"],
  "rules": {
    "react/prop-types": 0,
    // 여기에 원하는 규칙 설정 추가
  }
}

1.3 Prettier 설치 및 설정:

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

.prettierrc.json에 Prettier 설정 추가:

// .prettierrc.json
{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2
}

1.4 ESLint에 Prettier 플러그인 추가:

// .eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "prettier"
  ],
  "plugins": ["react", "prettier"],
  "rules": {
    "react/prop-types": 0,
    "prettier/prettier": "error"
    // 여기에 원하는 규칙 설정 추가
  }
}

2. Husky와 lint-staged 설정

2.1 Husky 설치 및 설정:

npm install husky --save-dev

package.json에 Husky 설정 추가:

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",   // 커밋 전에 테스트 실행
      "pre-push": "npm run lint"   // 푸시 전에 lint 작업 실행
    }
  }
}

2.2 lint-staged 설치 및 설정:

npm install lint-staged --save-dev

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

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

3. TypeScript 설정 (옵션)

3.1 TypeScript 및 관련 패키지 설치:

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

3.2 TypeScript 설정 파일 생성 (tsconfig.json):

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

3.3 ESLint TypeScript 플러그인 추가:

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

.eslintrc.json에 TypeScript 플러그인 추가:

// .eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "plugins": ["react", "prettier", "@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "rules": {
    "react/prop-types": 0,
    "prettier/prettier": "error"
    // 여기에 TypeScript에 관련된 규칙 추가
  }
}

이렇게 설정하면 프로젝트에서 코드 품질을 체계적으로 관리할 수 있습니다. 커밋 시 자동으로 테스트와 코드 스타일 검사가 이뤄지며, TypeScript를 포함하여 프로젝트에 적합하게 적용할 수 있습니다.