NextJS 프로젝트 세팅 w/ Husky, eslint, prettier

일단 프로젝트 CNA을 해줍니다 ㅎㅎ ... 

yarn create next-app  --ts  --tailwind   --eslint

 

사실 저는 이 과정에 대해서 한번 적은적이 있었기 때문에, 간단하게 설정 파일들만 기록해놓으려고 합니다. 그냥 가져가서 install만 하면 사용할 수 잇게끔.. 일단 저는 제일 보편적인 airbnb꺼를 설치하고 사용했습니다 ~ 

 

package.json

 "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    
    // 허스키가 사전 커밋 훅을 설치하고 설정하기 위한 준비 스크립트
    "prepare": "rm -rf .husky && husky install && npx husky add .husky/pre-commit \"npm run lint-staged\" ",
    

    // pre-commit linting을 실행시키는 스크립트
    "lint-staged": "lint-staged"
  },
"devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.59.6", // 타입스크립트 ESLint 플러그인
    "@typescript-eslint/parser": "^5.59.6", // ESLint 타입스크립트 파서
    "eslint-config-airbnb": "^19.0.4", 
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.8.0", 
    "eslint-plugin-jsx-a11y": "^6.7.1", 
    "eslint-plugin-prettier": "^4.2.1",
    "husky": "^8.0.3", 
    "lint-staged": "^13.2.2", // 스테이지 안에 파일들에 린터를 실행시켜줍니다.
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0" 
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"  // lint-staged를 실행하기 위한 pre-commit hook을 설정

    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "prettier --write", // 파일 포맷팅
      "eslint --fix" // 린팅에러 처리
    ]
  }
  }

 

.eslintrrc.json

{
  "root": true, // 이 파일이 루트 구성 파일임을 지정합니다.
  "parser": "@typescript-eslint/parser", // TypeScript 파일의 파서를 지정합니다.
  "plugins": ["@typescript-eslint", "prettier"], // 사용할 ESLint 플러그인을 지정합니다.
  "parserOptions": {
    "project": "./tsconfig.json", // TypeScript 프로젝트 구성 파일을 지정합니다.
    "createDefaultProgram": true // 구문 분석 시 기본 TypeScript 프로그램을 생성합니다.
  },
  "env": {
    "browser": true, // 'document' 및 'window'와 같은 브라우저 전역 변수를 사용할 수 있도록 합니다.
    "node": true, // Node.js 전역 변수와 Node.js 스코프를 사용할 수 있도록 합니다.
    "es6": true // ES6 전역 변수와 ES6 기능을 사용할 수 있도록 합니다.
  },
  "ignorePatterns": ["node_modules/"], // 린팅에서 무시할 폴더 또는 파일을 지정합니다.
  "extends": [
    "airbnb", // Airbnb 스타일 가이드 규칙을 확장합니다.
    "airbnb-typescript", // TypeScript용 Airbnb 스타일 가이드 규칙을 확장합니다.
    "airbnb/hooks", // React hooks에 대한 Airbnb 스타일 가이드 규칙을 확장합니다.
    "next/core-web-vitals", // Next.js 핵심 웹 성능 측정 규칙을 확장합니다.
    "plugin:@typescript-eslint/recommended", // 권장 TypeScript 규칙을 확장합니다.
    "plugin:prettier/recommended", // Prettier 통합을 가능하게 하는 규칙을 확장합니다.
    "prettier" // Prettier와 충돌하는 ESLint 규칙을 비활성화합니다.
  ],
  "rules": {
    "react/react-in-jsx-scope": "off", // JSX에서 'React'를 import할 필요 없이 사용할 수 있도록 합니다.
    "react/jsx-filename-extension": ["warn", { "extensions": [".ts", ".tsx"] }], // JSX 파일에 .ts 및 .tsx 확장자를 허용합니다.
    "no-useless-catch": "off" // 불필요한 'catch' 절을 허용하지 않도록 하는 규칙을 비활성화합니다.
  }
}

 

 

그리고 나서 npm install or yarn add 하시면 husky폴더가 생성이되면서 pre-commit파일이 생깁니다. 

이때 .gitignore에 husky 추가도 해주시고, 본인이 원하시는 포매팅 옵션들을 prettierrc.json에 추가해줍니다.