[React] 리액트 프로젝트를 시작하기 전 알아두면 좋은 ESLint & Prettier & Husky 적용
Lint? Format?
Lint
lint란 본래 스웨터의 보푸라기 같은 것을 말한다.
당장 조금의 보푸라기가 있어도 옷을 입는 데는 지장이 없지만,
보기에 지져분해보이고, 점점 많아진다면 계속해서 그 옷을 입기에는 무리가 있을 것이다.
프로그래밍에서도 보푸라기 같이 튀는 코드들을 linter로 제거하여 보기에도 깔끔하고 유지보수하기에도 좋은 코드를 만들 수 있다. 대표적인 linter로는 ESLint가 있고, JSHint, Pylint 등도 linter의 일종이다.
Format
코드에서 포맷팅이란, 코드를 일정한 규칙에 따라 코드를 재정렬해주는 것을 말한다.
가독성을 높여주고, 일관성있는 규칙에 따라 정렬해주는데, 로직을 직접 변경해준다기보다는 팀에서 사전에 정한 규칙대로 적용해준다고 보면 된다.
대표적인 formatter로는 Prettier가 있다.
Prettier
prettier 설치 및 설정
npm install --save-dev --save-exact prettier위 명령어 대로 설치를 하고나면 .prettierrc.js 파일에서 포맷할 규칙을 설정을 해준다.
module.exports = {
printWidth: 80, // 한 줄 최대 문자 수
tabWidth: 2, // 들여쓰기 시, 탭 너비 (js 표준인 2 indent를 권장함)
useTabs: false, // 스페이스 대신 탭 사용
semi: true, // 문장 끝 세미콜론 사용
singleQuote: true, // 작은 따옴표 사용
trailingComma: 'all', // 꼬리 콤마 사용
bracketSpacing: true, // 중괄호 내에 공백 사용
arrowParens: 'avoid', // 화살표 함수 단일 인자 시, 괄호 생략
proseWrap: 'preserve', // 마크다운(ex.readme.md) 포매팅 제외
endOfLine: 'auto', // 개행문자 유지 (혼합일 경우, 첫 줄 개행문자로 통일)
jsxSingleQuote: false, // JSX에 single Quotation 사용 여부
};지난 React.js 프로젝트 당시에 사용했던 설정을 가져왔다. 이외에도 추가로 설정할 수 있는 속성들이 있으니, 자세한 사항은 Prettier 공식문서를 통해 확인해보면서 추가할 것을 권장한다. 본인의 경우에도 프로젝트를 진행하면서 팀원들과 맞지 않는 설정들은 협의를 통해 중간에 수정을 하기도 하였다.
Prettier formatting 실행
npx prettier .현재 파일위치에서 prettier 를 실행한다.
실행하게 되면, prettier를 실행한 결과물이 코드에 반영되는 것이 아니라 terminal 화면에 찍히게 된다. 단순히 format한 결과물을 확인하고자 할때는 필요하겠지만 대부분이 직접 내 코드를 format해주기를 바랄 것이다. 그럴 때는 아래 명령어를 입력한다.
npx prettier --write .그러면 terminal Output으로 나오는 것이 아니라, 바로 파일에 적용하여 다시 작성하게끔 해준다.
하지만 이 명령어는 기존에 포맷팅을 적용했었던 파일들을 포함하여 전체 포맷팅을 하게 된다.
npx prettier --write --cache .위 --cache 명령어를 통해 기존 포맷팅된 파일들을 제외하고, 새로이 포맷팅해야하는 파일만 prettier가 골라내어 실행하게 된다.
"scripts": {
...,
"format": "prettier --write --cache .",
}조금 더 간소화된 커맨드라인 명령어를 통해 prettier formatting 을 진행하고 싶다면 위와 같이 package.json 파일의 scripts에 명령어를 추가해준다.
그렇게 되면 npm run format 명령어로 캐시 포맷팅을 실행할 수 있다.
ESLint
ESLint 설치 및 설정
module.exports = {
...
"extends": ["react-app", "eslint:recommended", "prettier"], // 확장 설정 : 리액트, eslint 추천설정, 프리티어 연동
"env" : {
"es6": true // 자바스크립트 es6 문법 사용
},
"rules": {
"no-var": "error", // var 변수 선언 금지
"no-multiple-empty-lines": "error", // 여러 줄 공백 금지
"no-console": ["warn", { "allow": ["warn", "error", "info"] }], // console.log() 경고
"eqeqeq": "error", // 일치 연산자 사용 필수
"dot-notation": "error", // 가능하다면 dot notation 사용
"no-unused-vars": "warn", // 사용하지 않는 변수 금지,
"semi": ["error", "always"], // 끝 semi 콜론 사용
"quotes": ["warn", "single"] // 따옴표 설정 (single, double)
}
}위 설정은 .eslintrc.js 파일에서 개인적으로 많이 사용하고 있는 설정이다. ESlint 공식문서를 참고하여 각 설정에 대한 자세한 정보와 추가로 설정할 수 있는 요소들을 확인할 수 있다.
ESLint 실행
npx eslint .prettier 때와 마찬가지로 현재 파일에서 linting을 실행하는 명령어이다.
npx eslint --cache .위 명령어대로 하면, 수정이 필요한 부분만 Linting이 적용된다. eslint --cache 를 처음 실행하면 .eslintcache 파일이 생길텐데, 이 파일은 해당 컴퓨터에서 사용한 캐시에 대한 저장 값이므로 git에 올라갈 이유가 없다. 그러므로 .gitignore에서 .eslintcache를 꼭 추가해주어야 한다. (prettier의 cache 파일은 eslint와 다르게 node_modules안에 저장된다. 그래서 따로 gitignore 처리 할 필요없이 node_modules만 ignore 처리해주면 된다.)
eslint-config-prettier
eslint와 prettier간의 통합
eslint가 formatting을 지원하고 있어, prettier와 동시 사용 시, 통일성있는 규칙을 설정하지 않으면 두 도구 간 충돌이 발생할 수 있다. 따라서, eslint에서 충돌되는 규칙들을 해제시켜줘야하는데, 이를 수동으로 해제할 수도 있지만, eslint와 prettier의 규칙을 비교하여 자동으로 설정을 도와주는 플러그인이 있다. 그것이 바로 eslint-config-prettier 이다.
eslint-config-prettier 설치
npm install eslint-config-prettier --save-dev위 명령어를 통해 플러그인을 설치하고 나면, eslint 환경구성 파일에 들어가 'prettier' 항목을 추가해준다.
{
extends: [
'eslint:recommended',
'prettier'
],
}Husky
Husky 란? (+ 사용이유)
husky는 git hook 설정을 도와주는 라이브러리다. 가볍고 다른 프로그램에 의존성이 없어서 안정적이어서 추가하기에 부담이 없는 라이브러리라고 할 수 있다.
주로 컨벤션으로 설정해놓은 룰을 강제하기 위해 formatting과 Linting을 commit과 push 전후로 자동 실행되게끔할 때 많이 활용된다. 이렇게 되면 특정 개인이 컨벤션을 지키지 않고 코드를 짜더라도 자동으로 실행되는 format과 lint 덕분에 팀 전체의 컨벤션이 유지될 수 있다.
husky 설치 및 셋팅
npm install husky --save-dev
npx husky install
// husky - Git hooks installed우선적으로, husky를 설치하는 명령어이다. 당연하겠지만, husky를 사용하기 위해 설치를 해야한다. 그런데, 이후에 클론 받는 사람이 husky 설치를 까먹는다면? husky로 설정해놓은 것들이 헛수고가 되버리고 말 것이다.
"scripts": {
...,
"postinstall": "husky install"
},그래서 이후에 클론받아 사용하는 사람들이 npm install 후에 자동으로 husky가 설치될 수 있도록 하는 설정도 위와 같이 package.json에 추가해줄 것이다.
pre-commit, pre-push hook 추가
npx husky add .husky/pre-commit "npm run format"커밋 전에 format 명령어가 실행되게 하는 hook을 추가한다.
npx husky add .husky/pre-push "npm run lint"push 전에 lint를 실행하게 하는 hook을 추가한다.
위 2개 훅을 추가하면 이제 commit 과 push 이전에 formatting과 Linting이 자동으로 실행되게 된다. 참고로 staging area에 올라간 파일은 formatting이 안될 수 있으니 유의해야한다. lint-staged 라는 프로그램으로 별도 설정을 통해 staging area에 있는 파일도 hook 실행을 설정할 수 있다.
이제 프로젝트를 시작할 준비가 끝났다.
팀원들과 정한 컨벤션에 따라 코드를 format하고 lint할 수 있는 설정이 끝났다.
처음 셋팅이 번거로울 수 있으나, 한번 셋팅해놓으면 팀 전체가 일관된 코드 품질을 보장한다는 점에서 많은 사람들이 사용하고 있다.
만약 동일한 컨벤션으로 여러 프로젝트를 진행할 계획이라면 해당 환경구성을 마친 starting 파일을 별도 레포지토리에 보관하여, 다음 프로젝트 시 클론 후 원격 저장소를 새롭게 설정하는 것을 추천한다.
