ESLint, Prettier, Husky + lint-staged 초기 설정 구성 방법 알아보기‼️

정진범·2024년 1월 17일

여러 사람이 참여하는 프로젝트에서는 코딩 컨벤션을 정하고 일관된 코딩 스타일을 유지하는 것이 중요합니다. 코딩 컨벤션을 정하지 않고 각자의 코드 스타일로 작성하면 개발 속도는 빠르겠지만, 유지보수나 코드 이해에 드는 시간이 증가합니다. 효율적인 개발을 위해 초기 설정과 코드 컨벤션 중요하다고 생각합니다. 이번에는 ESLint, Prettier, Husky, lint-staged를 사용하여 프로젝트 초기 설정하는 방법에 대해 글을 작성하려고 합니다.

📕 ESLint

ESLint 무엇일까?

ESLint는 ECMAScript(ES)와 Lint를 결합한 것으로, 자바스크립트 문법에서 잠재적인 문제를 발견하고 프로젝트 진행 시 그룹 간에 동일한 환경으로 개발을 진행하며 일관성 있는 코드 작성을 돕는 라이브러리입니다. ESLint의 기능은 코드를 깔끔하게 포맷팅하고 코드 품질을 높여줍니다.

사용 방법

아래의 명령어를 입력하여 ESLint를 설치해 보겠습니다.

npm i -D eslint

ESLint 설치가 완료되었다면 Lint 설정을 잡아보겠습니다.

npx eslint --init

명령어를 실행하고 Lint를 스타일을 설정해주고 필요한 라이브러리 추가해줍니다.

설정이 완료되면 프로젝트 폴더에 eslintrc.cjs 파일이 생성되었고 초기 설정 값들이 추가가 되어있는것을 확인 할수 있습니다.

이제 package.json에 추가된 lint 스크립트 문을 사용하여 코드를 체크할 수 있습니다.

 npm run lint 파일명.tsx --fix /코드 체크 후 자동으로 코드 수정

📕 Prettier

Prettier 무엇일까?

Prettier는 코드 형식을 자동으로 정리해주는 도구입니다. ESLint가 코드의 품질을 일관적으로 유지해주는 반면, Prettier는 미리 정의된 규칙에 맞춰 자동으로 코드를 교정해주는 역할을 합니다. 주로 공백, 줄바꿈, 들여쓰기 등의 스타일을 일관되게 유지하도록 하며, 팀원들과 코드를 작성할 때 일관성을 유지하는 데 도움이 됩니다.

사용 방법

아래의 명령어를 입력하여 prettier을 설치해 보겠습니다

npm i -D prettier

prettier을 설치했다면 prettier 셋팅을 설정 할 파일을 만들어보겠습니다.

touch .prettierc

🔽 그리고 아래와 같이 prettier을 설정 값을 셋팅 해보겠습니다.
설정이 완료된 뒤 파일을 수정했다가 저장하면 prettier가 실행되는것을 확인할 수 있습니다.

{
  "printWidth": 100,// 한 줄 최대 글자수
  "tabWidth": 2, //탭 너비
  "useTabs": false,// 탭 사용
  "semi": true, //세미 콜론 사용 
  "singleQuote": true,// 홀따움표 설정 
  "quoteProps": "as-needed", // 객체 속성 따움표 설정
  "trailingComma": "all", // 후행 쉼표
  "bracketSpacing": true, // 객체 리터널의 중괄호 주위 공백 설정
  "arrowParens": "always", // 화살표 함수 괄호
  "endOfLine": "auto" //행 끝 지정 사용
}

📕 ESLint와 Prettier를 같이 사용하는 이유

ESLint는 코드 품질 검사를 주로 담당하고 스타일 관련 규칙을 설정하는 반면, Prettier는 코드의 포맷팅에 특화되어 있습니다. Prettier를 사용하면 코드의 들여쓰기, 줄바꿈, 공백 등을 일관된 형식으로 자동으로 정리할 수 있습니다. ESLint와 함께 사용할 경우, Prettier는 코드의 포맷팅을 담당하고 ESLint는 코드 품질 검사를 담당합니다. 이렇게 함으로써 코드의 품질과 일관성을 향상시키고 개발 효율을 높일 수 있습니다.

📕 husky

husky 무엇일까?

git hooks 사용을 쉽게 할 수 있도록 도와주는 라이브러리 입니다.
commit 또는 push 할 때 커밋 메시지를 lint하고, 테스트 코드 실행, 코드를 린트하는 등의 작업에 주로 사용됩니다.

Git Hook 무엇일까?
git 에서 특정 이벤트가 생겼을 경우 자동으로 특정 스크립트를 실행하는 기능이다. git hooks은 클라이언트 훅과 서버 훅으로 나눌 수 있는데 클라이언트 훅에서는 commit나 merge 할 때 실행되는 훅이며 서버 훅은 push 할 때 실행되는 훅 입니다.

사용 방법

우선 husky 라이브러리를 devDependencies에 설치해 보겠습니다.

npm install husky --save-dev

다음은 git hooks을 설정하기 위한 .husky 폴더를 생성해 보겠습니다.

npx husky install

위와 같은 행동을 수행하면 .husky라는 폴더가 루트에 생기게 됩니다.

🔽 git hook을 자동적으로 실행할 스크립트문을 package.json 에 추가해줍니다.

//package.json
{
  "scripts": {
    "prepare": "husky install" 
  }
}

git hook 추가하기

git hook을 추가해보겠습니다. commit 하기 전에 lint를 수행하는 git hook를 추가해서 잘 실행되는지 확인 해보겠습니다.

npx husky add .husky/pre-commit "npm run lint"

위와 같이 명령어를 실행하면 .husky/precommit 에 lint를 체크하는 명령어가 추가된 것을 확인 할 수 있습니다.

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

npm run lint

🔽 아래와 같이 commit을 진행하기 전에 lint를 실행해서 코드를 체크해보는 것을 확인 할 수 있다. 하지만 husky는 전체 파일을 체크하기 때문에 효율적이지 못하다. 그래서 변경된 파일만 체크할 수 있게 lint-staged를 추가해서 사용해보겠습니다.

husky를 사용하여 GitHub Desktop으로 커밋 및 푸시할 때 lint 체크 여부

husky는 커밋 또는 푸시 작업을 수행할 때 git hook을 활용하여 사전에 정의된 작업을 실행합니다. 따라서 GitHub Desktop을 사용하여 커밋 및 푸시를 수행할 때도 husky가 활성화되어 있다면 lint 체크가 실행될 것입니다.

📕lint-staged

lint-staged 무엇일까?

lint-staged stage 상태의 git 파일에 대해 lint와 우리가 설정해 둔 명령어를 실행해주는 라이브러리 입니다.
husky는 등록한 githook을 실행하면 변경사항을 포함한 전체 파일을 체크하기 때문에 효율적이지 못하다. 그래서 stage 상태의 파일들만 체크 할 수 있게 lint-staged를 사용해서 변경된 사항들만 체크합니다.

사용 방법

lint-staged 라이브러리를 devDependencies에 설치해 보도록 합니다.

npm install lint-staged --save-dev

🔽 package.json에 lint-staged 스크립트문을 추가해준다.

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

commit 되기 전 lint-staged가 실행 될 수 있게 터미널에 명령어를 실행해서 git hook를 추가해준다.
이제 git commit을 진행하기 전 수정된 파일만 체크하는 것을 확인 할 수 있습니다.

npx husky add .husky/pre-commit "yarn lint-staged"

마치며

프로젝트를 진행하면서 console.log를 삭제하는 것을 가끔 까먹기도 했고, Prettier만 사용하여 파일을 변경한 후 다시 수정하고 올리는 작업을 반복했습니다. 이로 인해 불필요한 시간이 소요되었습니다. 하지만 husky와 lint-staged를 활용하여 불필요한 시간을 줄이고 업무의 효율을 높일 수 있었습니다.
이러한 초기 설정만으로도 코드 스타일과 컨벤션을 유지할 수 있고, 팀 전체적으로 개발 효율이 향상되며 시간을 더 효율적으로 활용할 수 있다고 생각합니다. 다음에 초기 설정을 할 기회가 있다면 적극적으로 추천합니다!