[JS] eslint, prettier, husky

코드의 규칙 정하기

• 코드린터 (eslint)
  : 문법에서 에러는 아니지만 에러로 약속하자고 규칙을 정하는 것
  import 순서
  ==금지, ===허용

• 코드포멧터 (prettier)
  : 코드를 보기 좋게 만들어주는 것
  띄어쓰기 2칸
  OO길이 넘으면 줄바꿈

eslint, prettier 설치

next.js에는 eslint가 이미 설치되어있으므로 설정파일을 만드는 것부터 진행하면 된다.

1. eslint 설정 파일 만들기 : npx eslint --init
2. prettier 설치하기 : yarn add --dev --exact prettier
3. (prettier 설정파일 생성하기 : echo {}> .prettierrc.json
4. vscode extension에서 eslint, prettier 설치

husky

소스코드를 git에 commit 하기 전에, 기존의 규칙(typescript, eslint, prettier 등)을 지켜가면서 코딩을 진행하였는지 검증해 주는 도구
규칙에 어긋나는 코드가 있다면 commit을 강제로 거절한다.
따라서, 실무적으로 더 안정적인 협업을 할 수 있다.

1. husky버전 4, lint-staged 설치 명령 입력

2. package.json파일에 하기 내용 작성

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{ts,tsx}": [
      "npx eslint '**/*.{ts,tsx}'"
    ]
  }