nextjs 13 typescript 환경에서 eslint airbnb 에 husky, gitmoji, lint-staged까지?

😡 왜그러시죠? 제가 화난 사람처럼 보이나요?

 

항상 그렇지만 환경설정이 제일 어려운 것 같습니다.

미래의 제가 또 같은 일을 해야할 상황이 빈번할 것 같아 미리 기록을 남겨둡니다.

윈도우환경에서는 대체로 문제없이 돌아가는것같습니다.

다만 맥에서는 추가로 설정을 조금 만져줘야하네요

 

장황한 개념 설명은 다른 게시물들이 충분히 잘해주었다고 생각합니다.

따라서 간단하게 각각 어떤 역할을 수행하는지 간략하게만 보겠습니다.

 

사실 eslint와 prettier는 익숙하신 분들이 더 많을 것이라 생각됩니다.

특히 eslint는 cra, vite 등 대부분의 보일러플레이트에서

기본적으로 제공하기도 하니까요

 

eslint : 코드의 문제를 찾고 수정하는데 도움을 줍니다.

prettier : 코드를 좀 더 pretty하게 바꿔줍니다.

husky : git hook의 사용을 도와줍니다.

gitmoji : 커밋에 이모지를 넣어 기분좋게 커밋하게 해줍니다.

lint-staged: 린트규칙에 어긋나는 파일이 스테이징되어있으면 커밋을 막게하는 용도로 쓰곤합니다.

 

eslint와 prettier가 사실은 AST를 활용해서 분석하느니 하는 원리적인 이야기는 우선 접어두고..

그런 부분에 대해서는 너무나도 좋은 자료들이 많이 있으니 관심이 생기시면 찾아보시기를 권합니다.

https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/

ESLint 조금 더 잘 활용하기

카카오 기술블로그에서 소개하는 eslint의 동작원리

https://prettier.io/docs/en/technical-details.html

Prettier · Opinionated Code Formatter

prettier docs에서 소개하는 프리티어의 기본 아이디어

 

airbnb는 airbnb 회사에서 사용하는 컨벤션 / 규칙을 담은 eslint의 플러그인을 말하곤 합니다.

그리고 상당히 빡빡한 규칙으로 짜여져있습니다.

처음 생각없이 airbnb 많이들 사용한다니까 적용해볼까?하면

동작하는 코드임에도 불구하고 수많은 에러를 만나게되지요

---

왜 우리는 자진해서 자기자신을 구속하는걸까?

 

코드스타일을 강제하는 건 개인 입장에서 굉장히 짜증나는 일입니다.

안돌아가는 코드도 아니고 제대로 돌아가는 코드를 틀렸다면서 빨간줄을 띄우니까요

그럼에도 불구하고 필요성을 느끼는 것은 통제된 환경에서 코드를 작성해야

코드 품질이 보장된다는 것을 체감했기 때문인 것 같습니다.

---

환경 안내

next.js13 / app router / typescript / create-next-app으로 생성한 환경입니다.

OS는 윈도우10입니다.

최종적인 종속성트리는 다음과 같습니다.

 "dependencies": {
    "next": "13.4.9",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20.4.0",
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "@typescript-eslint/eslint-plugin": "^5.61.0",
    "@typescript-eslint/parser": "^5.61.0",
    "autoprefixer": "^10.4.14",
    "class-variance-authority": "^0.6.1",
    "clsx": "^1.2.1",
    "eslint": "^8.44.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-next": "^13.4.9",
    "husky": "^8.0.0",
    "lint-staged": "^13.2.3",
    "postcss": "^8.4.25",
    "prettier": "^3.0.0",
    "tailwind-merge": "^1.13.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.1.6"
  }

제 보일러플레이트를 그대로 가져온것이라 clsx, class-variance-authority, tailwind-merge 등은 무시해도좋습니다.

---

gitmoji 깔아서 간단하게 시작해보기

npm i -g gitmoji-cli

gitmoji는 그나마 희망적입니다.

-g 옵션을 통해 글로벌 설치를 해줍니다.

익스텐션을 통해 gui로도 사용할 수 있지만 그냥 cli를 쓰는게 더 편하더라구요

node를 깔아두셨다면 npm도 있으실테니 npm으로 깔아주시면 되겠습니다.

 

https://gitmoji-js.netlify.app/

깃모지(gitmoji) by js

이 사이트에서 한글기준으로 어떤 이모티콘을 사용할지를 알려주니까 참고하세요

사용법은 아주 간단합니다.

git add .
gitmoji -c

git commit -m 대신 gitmoji -c를 해주면 됩니다.

깃모지를 이용하면 커밋메세지에 이모티콘이 들어가는게 귀엽습니다.

협업하는 환경에서는 어떤 이모지를 어떤 작업에 사용할지를 엄격히 정하고 가는게 중요하겠죠?

여기까진 문제될게 없습니다. 넘어갑시다

---

husky 깔기

npx husky-init && npm install

https://typicode.github.io/husky/getting-started.html

Getting started | 🐶 husky

허스키 docs에서는 위와 같은 형태로 설치하는 것을 추천합니다.

    "prepare": "husky install"

위 명령어를 실행시켜

설치하고나면 package.json의 scripts에 prepare가 생긴것을 확인할 수 있습니다.

또한 위와같이 .husky 폴더가 생성됩니다.

pre-commit 시점에는 pre-commit 파일이 실행됩니다.

pre-push등 다른 상황에서도 사용할 수 있지만

그런 부분들은 따로 서칭을 해보시길 권해드립니다.

저는 commit할때만 쓰거든요..

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

echo 'Hello i m gonna check your code!'
npm run lint
npm run lint:fix
npx lint-staged

일반적인 경우 위의 dirname 등이 있는 경로 부분은 건드릴 필요가 없습니다.

그 아래에 자신이 precommit 즉 커밋을 하기 직전 상황에 수행하고싶은 일들을 수행시키면 됩니다.

저는 lint를 돌리고 lint-staged도 돌려주려고합니다.

하지만 아직 lint도 제대로 설정해주지 않았고 lint-staged는 깔지도않았지요?

 

echo " 하고싶은 말" 의 형태로 무언가 하고싶은 말을 적어봅시다.

저도 제 마음대로 적었어요

그런다음 커밋을 시도해보시면 커밋직전에 우리가 적어둔 인삿말이 출력되는 것을 확인할 수 있습니다.

인삿말이 출력되는 것을 확인했다면 허스키는 일단 냅두어도 좋습니다.

---

lint-staged

npm install -D lint-staged

lint-staged를 설치합니다.

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

package.json에 위 코드를 추가시켜주겠습니다.

 

이 코드는 eslint 코드인데 package.json의 scripts 키안에 넣어주겠습니다.

"lint:fix": "eslint ./**/*.{js,jsx,ts,tsx} --cache --fix",

package.json은 루트폴더에 둘테니 루트에서부터

js,jsx,ts,tsx 파일들을 모두 검사한다는 의미를 가집니다.

--cache 옵션은 캐싱을 수행해줘요

 

lint:fix도 만들었으니까

이제 아까 제 코드처럼 husky에 lintstaged도 추가해줍시다.

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

echo 'Hello i m gonna check your code!'
npm run lint
npm run lint:fix
npx lint-staged

---

종속성 설치해주기

npm i -D prettier

우선 prettier를 설치해줍니다.

https://www.npmjs.com/package/eslint-config-airbnb

eslint-config-airbnb를 확인해보면 perrdependency가 필요하다는 것을 알 수 있습니다.

냅다 깔려고하면 깔리지가 않아요

이부분은 

https://www.youtube.com/watch?v=S76clGeK1uA 

이 유튜브를 보시는 것을 추천드립니다.

다만 저같은 경우에는 위와같이 like dog 같은 에러가 발생했습니다.

대략 eslint-plugin-react-hooks@5.0.0 버전과 eslint-config-airbnb가 서로 충돌하고 있다는 것인듯한데

결론적으로는 eslint-plugin-react-hooks의 버전을 5.0.0이 아니라 4.6.0으로 주면 해결됩니다.

 

--force --legacy-peer-deps를 줘서 임시방편으로 강제설치하는 방법도 존재해요

npm install --force 머머머머

요런형태로 옵션을 주면 됩니다.

동영상 보고 오실거라 믿고 airbnb를 설치하는 부분은 넘기겠습니다.

 

.prettierrc

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

 

prettierrc파일은 프리티어가 정렬을 어떻게 할지를 결정하는 지점입니다.

eslint랑 충돌하기 쉬운 속성들도 있는데 그런것들은 또 해결하는 방법이 다 있기는 합니다.

있기는 해요..

루트에 생성해주면 되겠습니다.

 

.eslintignore

next.config.js
/next.config.js
node_modules
postcss.config.js
tailwind.config.js

마찬가지로 루트에 생성합니다.

린트 검사를 할 필요가 없는 파일들을 제외해주는 파일입니다.

---

eslint를 타입스크립트와 함께 사용할때에는 추가적인 플러그인들이 필요합니다.

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

설치해주세요

---

하이라이트

.eslint.json

{
  "extends": ["next/core-web-vitals", "airbnb", "airbnb-typescript"],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "react/jsx-props-no-spreading": "off",
    "linebreak-style": 0,
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": true,
        "optionalDependencies": true,
        "peerDependencies": false
      }
    ],
    "import/prefer-default-export": ["off", { "target": "single" }],
    "operator-linebreak": [0]
  }
}

extends에서 우리가 지금까지 열심히달려온 airbnb 들을 넣어주면됩니다.

parserOptions는 eslint를 타입스크립트와 함께 사용하기 위한 옵션이라고 생각해주시면 될 것 같습니다.

rules 부분은 개인적으로 제가 커스터마이징한것인데

대부분 제 prettier 설정과 충돌하는 부분이나 제 취향상 이건 꼭 쓰고싶다는 이유로

에러를 내뱉는 룰들을 꺼둔 부분입니다. 

즉 rules는 비워두어도 좋습니다.

extends, parserOptions만 제대로 주시면 될거에요

 

다만 parseroption의 rootdir이 설정되어있지않아

프로젝트를 열때 반드시 tsconfig가 있는 경로에서 열어주셔야합니다.

 

허스키가 동작하지 않는 경우

npm run prepare를 실행해주세요

 

참고가 필요하신 분들을 위해 제가 작업해둔 보일러플레이트 깃허브 링크를 태그합니다.

https://github.com/XionWCFM/nextjs-boilerplate

GitHub - XionWCFM/nextjs-boilerplate

 

---

 

레퍼런스

https://velog.io/@do_dadu/husky-lint-staged%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90-sub-ESLint-%EC%9E%90%EB%8F%99%ED%99%94%ED%95%98%EA%B8%B0

husky, lint-staged를 사용하자( sub : ESLint 자동화하기 )