[NextJS] ESLint, Prettier, Recoil, React-Query, Storybook, Jest 설정 - 1편

1편은 NextJS에 TypeScript, Tailwind, ESLint, Prettier, Husky를 설정하는 내용입니다.

1. NextJS, TypeScript, TypeScript 설치

npx create-next-app@latest

2. ESLint (airbnb 방식) 설정

eslint-config-airbnb 라이브러리,패키지 설치

npx install-peerdeps --dev eslint-config-airbnb

eslint에 필요한 타입스크립트 추가

npm install -D eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser --legacy-peer-deps

eslint-config-airbnb-base 설정

npx install-peerdeps --dev eslint-config-airbnb-base

.eslintrc.json 설정 변경

{
  "env": {"browser": true,"node": true},
  "extends":"airbnb-base",
  "rules": {
    "linebreak-style": 0
  }
}

3. Prettier 설치, ESLint 연결

Prettier, 플러그인 설치

npm install -D prettier eslint-plugin-prettier eslint-config-prettier

• eslint-plugin-prettier : eslint에서 prettier랑 충돌하는 규칙 비활성화
• eslint-config-prettier : 포매팅시 prettier 사용

.prettierrc 파일 생성 후 코드추가

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,

}

• Nextjs는 세미콜론을 기본적으로 사용하지 않는다고합니다.
• 속성 정리 링크
• 속성 예제

eslintrc.json 설정

• 리액트 컴포넌트 eslint 옵션

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "parserOptions": {
    "project": "tsconfig.json",
    "createDefaultProgram": true
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "ignorePatterns": ["node_modules/"],
  "extends": [
    "airbnb",
    "airbnb-typescript",
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/jsx-props-no-spreading": 0,
    "@typescript-eslint/semi": "off",
    "react/jsx-filename-extension": ["warn", { "extensions": [".ts", ".tsx"] }],
    "no-useless-catch": "off",
    "react/function-component-definition": [
      2,
      { "namedComponents": ["arrow-function", "function-declaration"] }
    ]
  }
}

4. Husky, lint-stated로 commit 파일 eslint, prettier 자동실행

husky 설치 ( 주의 git repo랑 연결되어있어야 합니다.)

git hook(커밋,푸시 등) 제어하는 라이브러리

npx husky-init && npm install

lint-staged

staged된 파일만 특정 명령어 실행하는 도구

package.json에 해당 명령어 설정 (commit 파일 prettier,eslint 적용)

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

.husky/pre-commit 에 명령어 추가

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

npx lint-staged # 추가

실행화면

git commit을 실행하게되면 eslint,prettier가 체크되는 모습

Result 공유

nextjs 세팅 Github

참고자료

• eslint,Prettier 설정
• https://velog.io/@picpal/코드에-eslint-prettier-자동-적용하기-근대-이제-github-커밋-체크까지-곁들인
• husky 공식문서
• tsconfig's path parameter and ESLint 오류