Prettier, ESlint, Husky 기초 사용법(nodeJS)

역시나 새로운 설정은 공식문서에 답이 있는 것 같습니다. 이 설정들은 구글링보다는 공식문서를 따라 진행하시는 것을 추천합니다.

Prettier

Prettier는 코드 포맷터로 정해진 프로그래밍 언어에 따라 일정한 코드 스타일을 강제하는 도구입니다.

사용법

1. 설치: npm install --save-dev --save-exact prettier
2. .prettierrc 파일생성(root 폴더 위치)echo {}> .prettierrc.json
3. .prettierignore 생성
4. prettier 실행: npx prettier --write {prettier 사용을 원하는 파일 및 디렉토리}
5. 주로 다음과 같은 방식으로 파일 및 디렉토리 지정 prettier --write "app/**/*.test.js"
6. src/*/.js: matches all files in the src directory (any level of nesting) that have the .js extension.

ESlint

ESLint는 ECMAScript/JavaScript 패턴(다양한 컨벤션이 있음)에 맞게 코드를 에러표시로 찾아주고 수정시켜주는 도구입니다. prettier는 코드의 모양새를 잡아주는 반면 ESlint는 JavaScript의 스타일 가이드를 따르지 않거나 문제가 있는 안티 패턴들을 찾아주고 일관된 코드 스타일로 작성하도록 도와줍니다.

사용법

1. 설치: npm install eslint --save-dev
2. .eslintrc 파일생성: npx eslint --init, .eslintrc 설정 파일에서 원하는 코드 패던, 언어 등을 설정합니다.
3. eslint 실행: npx eslint yourfile.js

Prettier + ESlint

두가지 도구는 일관된 코드 작성을 위해 서로 상호 보완적이기 때문에 같이 쓸 필요가 있습니다.
문제는 prettier와 eslint가 서로 충돌이 있어날 수 있는 부분이 있기 때문에 이를 방지할 필요가 있습니다.
참고로 prettier 실행 후 eslint를 실행하는 방법(prettier-eslint) 속도가 느리다고 합니다.
따라서 eslint-config-prettier 패키지(eslint에서 prettier와 충돌할 수 있는 rule을 꺼버리는 역할) 사용합니다.

eslint-config-prettier 패키지

사용법: https://github.com/prettier/eslint-config-prettier

.eslintrc에 extends 다음과 같이 설정

{
"extends": [
"some-other-config-you-use",
"prettier"
]
}

create-react-app에서 주의할 점

create-react-app에는 이미 eslint가 설치되어 있기 때문에 수동으로 설치를 하면, 충돌이 발생합니다. 그 경우 수동으로 만든 eslint를 제거하고 rm --rf node_module/eslint npm install가 필요합니다.

Husky

git hook을 이용해 git 단계별로 자동으로 lint+prettier 실행시켜주는 도구
저는 pre-commit 단계에서 사용합니다. (= git commit 명령어 후에 자동 실행)

사용법

1. husky 설치

   npm install --save-dev husky lint-staged
   npx husky install
   npm set-script prepare "husky install"
   npx husky add .husky/pre-commit "npx lint-staged"

lint-staged: staged 단계에서 특정 파일 lint 할 때 사용
2. lint-staged 설정

{
  "lint-staged": {
    "**/*": [
      "prettier --write --ignore-unknown",
      "eslint --fix",
      "git add"
    ]
  }
}

reference
https://prettier.io/docs/en/install.html
https://eslint.org/docs/user-guide/getting-started
https://prettier.io/docs/en/install.html#eslint-and-other-linters
https://prettier.io/docs/en/install.html#git-hooks