[React] 협업을 위한 Prettier, Eslint, Husky 설정

🚀 Prettier, Eslint, Husky ?

Prettier와 Eslint는 일정한 규칙에 맞는 코드 퀄리티 및 스타일을 유지할 수 있게 검사해주는 도구이며,

husky는 깃 커밋, 푸시 전에 알아서 Prettier와 Eslint 검사하는 명령어 자동으로 실행할 수 있게 하는 역할입니다.

 

Prettier

깔끔한 코드와 협업을 위해선 일관성 있는 코드 스타일을 유지하는 것이 매우 중요합니다.

Prettier는 일관적인 코드 스타일을 유지할 수 있게 도와주는 툴입니다. 그래서 여러 설정이 존재하지만 주로 줄 바꿈, 공백, 들여 쓰기 등과 같은 스타일을 교정해줍니다.

만약에 항상 singleQuote를 사용하겠다고 설정하면 doubleQuote를 사용해도 저장하는 순간 모두 singleQuote로 알아서 바꿔주게 됩니다.

이제는 프리티어 없이 코딩할 수 없습니다..

 

ESLint

자바스크립트 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구입니다.

대부분의 프로그래밍 언어에는 컴파일하는 과정에서 수행되는 Linter가 기본적으로 내장되어 있습니다.

그러나, 인터프리터 언어인 자바스크립트는 Linter가 내장되어 있지 않은데요.

이 때문에 런타임 환경에서 에러가 발생할 확률이 높습니다.

만약에 화살표 함수만 사용하겠다고 패턴을 정해놓으면 그 이외의 함수 패턴을 사용하면 error나 warning이 발생되게 됩니다.

 

이러한 코드 Formatter, Linter가 왜 필요하고 왜 쓰는걸까 ?

우리가 로컬에서 혼자 작업을 하게 되면 코드 간격이나 홑따옴표를 쓰든 쌍따옴표를 쓰든 내가 볼 수만 있다면 크게 상관은 없을 겁니다.

하지만, 우리는 다른 사람과 협업을 해야 합니다. 따라서 format이나 lint 설정이 다른 사람이 내 코드를 가져가서 저장만 하더라도 코드를 수정하지도 않았는데 홑따옴표, 코드 간격이 바뀌면서 깃허브에는 마치 코드를 수정한 것처럼 굉장히 많은 양의 코드 줄이 커밋 및 푸시 되어 있을 겁니다.

따라서 효율적인 협업을 위해서는 팀원끼리 코드 컨벤션을 맞추는 것이 대단히 중요하겠습니다.

 

🚀 설정해보자 in VSCode

1. 라이브러리 설치

$ npm i -D prettier eslint eslint-plugin-prettier eslint-plugin-react eslint-plugin-unused-imports

2. setting.json 설정

우선 설정을 누르고 우측 상단에 아래와 같은 아이콘을 클릭합니다.

그리고 아래와 같은 라인이 있는지 확인합니다. 없다면 추가해줍니다.

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
 },

3. 프로젝트 폴더 최상위에 `.eslintrc.js` 파일과 `.prettierrc.js` 파일 생성

eslint 설정이나 prettier 설정은 팀 마다 컨벤션이 달라 내용도 가지각색입니다.

 

📜 .eslintrc.js 파일

module.exports = {
	env: {
		browser: true,
		es6: true,
	},
	parserOptions: {
		ecmaFeatures: {
			modules: true,
			jsx: true,
		},
		ecmaVersion: 2020,
		sourceType: 'module',
	},
	plugins: ['react', 'unused-imports'],
	rules: {
		'react/jsx-uses-vars': 'error',
		'react/jsx-uses-react': 'error',
		'space-before-function-paren': [
			'error',
			{
				anonymous: 'ignore',
				named: 'never',
				asyncArrow: 'always',
			},
		],
		'unused-imports/no-unused-imports-ts': ['error'],
	},
}

 

📜 .prettierrc.js 파일

module.exports = {
	endOfLine: 'lf',
	semi: false,
	singleQuote: true,
	jsxSingleQuote: false,
	tabWidth: 2,
	useTabs: true,
	trailingComma: 'all',
	arrowParens: 'avoid',
}

 

만약에 이 prettier와 eslint 검사 및 교정을 무시하고 싶은 파일 혹은 폴더가 있을 수 있겠습니다.

마치 .gitignore 같이요! prettier와 eslint도 이와 같이 ignore 파일을 작성해서 무시할 수 있도록 설정할 수 있습니다.

 

📜 .eslintignore 파일

build
coverage
*.html
**/node_modules

 

📜 .prettierignore 파일

build
coverage
*.html
**/node_modules

4. 검사해주는 script 명령어 설정

우리가 npm start 하면 리액트 앱이 실행되는 것처럼 스크립트 명령어를 설정해서 prettier 검사 그리고 eslint 검사를 일괄적으로 가능합니다.

 

📜 package.json 파일

"script: {
    // ..
    "lint": "eslint . --ext .js,.jsx",
    "lint:fix": "eslint . --ext .js,.jsx --fix",
    "format": "prettier --write --cache \"src/**/*.{js,jsx}\""
}

위처럼 작성하고

npm run lint 하게 되면 eslint 검사를 해서 우리가 설정했던 컨벤션과 맞지 않으면 에러 혹은 경고 메세지를 띄워줍니다.

npm run lint:fix 하게 되면 알아서 오류 및 경고가 뜬 부분에 대해서 고쳐주게 됩니다.

npm run format 하게 되면 모든 파일을 검사해서 prettier 설정에 맞게 고쳐주게 됩니다.

 

물론 저장하게 되면 다음과 같이 사용하지 않은 import들이나 설정했던 내용대로 수정이 되게 됩니다.

그런데 일일이 모든 파일을 저장하면서 고쳐주기에는 프로젝트 규모가 커지면 힘들 수 있겠죠?

따라서 위에서 설정했던 명령어를 통해 모든 파일을 일괄적으로 검사 및 교정이 가능합니다.

 

🚀 깃 커밋 전, 푸시 전에 알아서 prettier, eslint 명령어를 실행해주는 husky

1. 라이브러리 설치

npm i -D husky

2. .git이 없으면 git init

$ git init

3. .husky 폴더 생성

$ npm husky install

4. package.json에서 script 명령어 설정

"scripts": {
    "postinstall": "husky install",
}

5. pre-commit 명령어와 pre-push 명령어 설정

$ npx husky add .husky/pre-commit "npm run format"
$ npx husky add .husky/pre-push "npm run lint:fix"

 

 

여기까지 모든 설정을 끝냈다면 prettier, eslint, husky 관련 파일과 package.json 파일만 있다면 어디서만 적용이 가능합니다. 클론 받은 사람이 npm i만 했다면 모두 동일하게 사용이 가능해집니다 👍