- Published on
협업을 위한 ESLint 와 Prettier 환경설정하기
- Authors
- Name
- Younggyoung Lee
- ESLint
- Lint 란 무엇인가?
- ESLint 다운 및 설정하기
- ESLint 규칙(Rules) 설정하기
- Prettier
- Prettier 다운 및 설정하기
- 통합방법
- 자동화
- 깃 훅을 사용하는 방법
- 에디터 확장 도구를 사용하는 방법
- Next.js 에서 ESLint 설정하기
실타래1 팀, 프론트엔드 개발자 서비님과 함께 협업을 하던 도중, 초기세팅을 할 때마다 매번 ESLint와 Prettier 설정에 대해 찾아보는 걸 알게 되었다. 지금까지 항상 팀원분이 미리 세팅해주셨고 혹은 협업도중 포맷팅 오류가 뜨면 그때마다 돌려막기 혐식으로 고쳐서 작업했던 것 같다 🥲 다음 협업에는 이를 방지하고자 알게 된 것들을 글로 정리해볼려고 한다.
ESLint
Lint 란 무엇인가?
일단 Lint를 검색하면 Lint Roller 가 나옵니다. 흔히 돌돌이라고도 불리는 옷에 보프라기 제거기를 말합니다. 코드에도 이런 보기 싫은 보프라기를 제거해주는 툴이 있는데 그걸 린트 혹은 린터라고 합니다. 보풀이 있다고 그 옷을 못 입나요? 아닙니다. 마찬가지로 코드의 보프라기(들여쓰기가 맞지 않는 경우, 너무 긴 코드 등)가 있다고 해서 코드가 돌아가지 않는 것은 아닙니다. 그렇지만 이런 보프라기들을 코드 유지보수를 방해하고 가독성을 저해합니다.
Lint의 종류는 여러가지가 있지만, ESLint를 가장 보편적으로 사용합니다. ESLint가 검사하는 항목은 크게 두 가지로 분류할 수 있습니다.
- 코드 포맷팅 - 일관된 코딩 컨벤션을 유지하는 기능
- 코드 품질 - 잠재적인 오류를 찾아주는 기능
ESLint 다운 및 설정하기
npm install eslint
위 명령어로 ESLint를 다운 받고 .eslintrc.js 파일을 일단 만듭니다. 실타래팀은 Next.js 템플릿으로 초기 세팅할 때 ESLint를 다운받아서 굳이 다운 받을 필요는 없었다.eslintrc.js 빈 객체를 만들어서 노드 형식의 모듈을 생성합니다.
module.exports = {}
package.json 으로 가서 NPM 스크립트의 lint라고 명령어를 등록합니다.
"scripts": {
"lint": "eslint src"
}
이제 npm run lint 명령어를 사용해서 코드를 검사할 수 있습니다.
ESLint 규칙(Rules) 설정하기
ESLint는 규칙을 따라서 작동합니다. 규칙은 .eslintrc.js 에 공식 ESLint 페이지를 보고 규칙을 설정하면 됩니다. ESLint는 자동으로 수정할 수 있는 규칙과 수정할 수 없는 규칙으로 나눠져 있습니다. 공식 페이지에 🔧 마크가 붙은 것은 수정이 가능합니다. 이 경우에는 lint 스크립트 뒤에 --fix 옵션을 붙혀서 실행하면 규칙에 따라 자동으로 수정할 수 있습니다.
module.exports = {
rules: {
"no-empty": "warn",
"no-cond-assign": ["error", "always"],
}
}
또한 공식 페이지에 ✅ 가 붙여있는 규칙들은 EsLint에서 권장하는 규칙들 입니다. extends을 통해 아래와 같이 설정하면 권장되는 규칙들을 모두 사용할 수 있습니다. 만약 이 설정 외에 더 필요한 규칙이 있다면 rules 속성에 추가하면 됩니다.
module.exports = {
extends: ["eslint:recommended"]
}
Prettier
Prettier와 EsLint는 역할이 살짝 겹치긴 하지만, Prettier는 좀 더 일관적인 스타일로 코드를 예쁘게 만들어주는 반면, 코드 품질은 신경쓰지 않습니다.
Prettier 다운 및 설정하기
npm install prettier
npx prettier src/**/* 명령어를 입력하면 Prettier로 포맷팅된 코드를 출력합니다. 그리고 --write 옵션을 뒤에 주고 다시 실행해보면 코드가 그대로 변경됩니다. Prettier는 ESLint와 달리 규칙이 미리 세팅되어 있기 때문에 설정 없이도 바로 사용할 수 있는 점이 특징입니다.
통합방법
여전히 ESLint를 사용해야하는 이유는 포맷팅은 Prettier에 맡기더라도 코드품질과 관련된 검사는 EsLint가 하기 때문입니다. 따라서 이 둘을 함께 사용하는 것이 필요합니다. 그래서 Prettier는 EsLint와 통합하는 방법을 제공합니다. Prettier 규칙을 EsLint에 추가하고 서로 충돌하는 옵션이 있으면 Prettier의 규칙을 사용하도록 하는 도구입니다. eslint-config-prettier 깃허브 에 직접 들어가서 설치방법을 확인할 수도 있습니다.
npm install eslint-config-prettier eslint-plugin-prettier --save-dev
eslint-config-prettier:Prettier와 충돌하는ESLint규칙을 꺼줍니다. (Prettier에서 권장)eslint-plugin-prettier:Prettier를EsLint규칙으로 실행시켜줍니다.
--save-dev 옵션을 사용해서 dev-dependency 로 추가시킬 수도 있습니다. yarn 에서는 yarn add [패키지명] --dev로 옵션을 추가합니다. 위 패키지를 설치한 뒤에 eslintrc.js 설정파일에 이 설정을 추가합니다.
module.exports = {
extends: ["eslint:recommended",
"plugin: prettier/recommended"
],
env: {
browser: true // 브라우저 환경에서 작동할 것임을 명시.
// `window` 나 `document` 와 같은 글로벌 함수를 사용할 때 오류가 뜨지 않게 해줌
}
}
설정파일을 .eslintrc.js 에 추가합니다. Prettier와 ESLint를 합쳐기 때문에, npm run lint 만 실행해도 둘 다 실행한 효과가 납니다.
자동화
깃 훅을 사용하는 방법
깃 훅이란 깃 명령어 실행 전후에 뭔가를 더 실행할 수 있는 방법입니다. husky를 함께 사용하면 깃 훅을 더 수월하게 사용할 수 있습니다.
npm install husky
husky 를 설치하고 package.json에 설정을 추가합니다.
"husky": {
"hooks": {
"pre-commit": "echo \"이것은 커밋전에 출력됨\""
}
}
이제 커밋을 할 때마다 이것은 커밋전에 출력됨이 출력됩니다. 이제 lint 명령어로 바꿔봅시다.
"husky": {
"hooks": {
"pre-commit": "npm run lint"
}
}
커밋생성 직전에 린트가 실행되고 오류를 발견하면 커밋 과정은 취소됩니다. 무조건 린트에 통과해야만 코드가 커밋생성 되도록 설정한 것입니다. 하지만, 만약에 코드가 점점 많아진다면 커밋이 느려질 수도 있습니다. 따라서 커밋할때 변경된 파일만 린트로 검사하면 더 좋겠습니다. 이를 위한 패키지가 lint-staged 입니다. 스테이징된 파일만 린트를 수행하는 도구입니다.
npm install lint-staged
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": "npm run lint" // js 파일만 검사하는 설정
}
lint-staged를 다운받고 package.json을 위와 같이 변경하면 이제 커밋하면 모든 파일을 검사하는게 아니라 변경되거나 추가된 파일만 검사합니다.
에디터 확장 도구를 사용하는 방법
VSCode의 익스텐션을 사용하면 코딩할 때 바로 검사할 수 있습니다. 현재 프리티어 규칙을 ESLint에 통합했기 때문에 ESLint익스텐션만 사용합니다. ESLint익스텐션을 다운받아주고 Settings > Work Space > settings.json 에 들어가 아래와 같이 설정을 해줍니다.
{
// 빨간줄로 이제 에러를 빨간줄로 보여줌.
"eslint.enable": true,
"editor.codeActionsOnSave": {
// 저장할 때마다 린트가 자동으로 코드를 고쳐줌.
"source.fixAll.eslint": true,
// import 되지 않은 파일들을 자동으로 import 구문을 추가해줍니다.
"source.addMissingImports": true
},
// 파일을 저장할 때마다 포맷팅 실행
"editor.formatOnSave": true
}
Next.js 에서 ESLint 설정하기
Next.js 에서 Next.js 버전 11.0.0 부터 설치 할때 eslint 설치를 하겠냐는 질문에 yes했다면, ESLint를 추가 설치하지 않아도 됩니다. 많은 규칙 중 유명한 Airbnb 규칙을 따라 볼려고 합니다. 이번 팀 프로젝트는 Next.js 와 타입스크립트를 사용하기 때문에 타입스크립트 룰도 따로 설치해줘야 합니다.
Airbnb에서 제공하는 eslint-config-airbnb, eslint-config-airbnb-typescript 를 다운 받습니다. Yarn 패키지를 사용하는 분들은 Yarn 명령어로 다운 받습니다.
npm i eslint-config-airbnb --save-dev
# Or
yarn add eslint-config-airbnb --dev
npm install eslint-config-airbnb-typescript \
@typescript-eslint/eslint-plugin@^6.0.0 \
@typescript-eslint/parser@^6.0.0 \
--save-dev
# Or
yarn add eslint-config-airbnb-typescript
@typescript-eslint/eslint-plugin
@typescript-eslint/parser
--dev
이제 다운받은 eslint 패키지들을 eslintrc.js파일에 설정해줍시다.
{
"extends": [
"next/core-web-vitals",
"airbnb",
"airbnb-typescript"
],
"parserOptions": {
"project": "./tsconfig.json"
}
}
입력하고 나면, 이제 파일들에 flag 가 잔뜩 뜰건데 정상입니다! 자 이제 자동으로 수정하게 해주는 설정을 해봅시다. VSCode 의 Settings에 가서 code actions 를 입력합니다. 아래에 있는 Edit in settings.json를 눌러주세요. (로컬에 설정하기 싫다면, Workspace 패널에서 입력하세요.)
{
...
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"eslint.validate": ["javascript", "typescript"]
}
이제 다시 파일로 들어가서 저장해주면 일부 flag 가 뜬 에러들을 고쳐줍니다. 'React' must be in scope when using JSX eslint(react/react-in-jsx-scope) 오류가 뜨면 리액트를 import 해줍시다
import React from 'react';
이제 모든 에러가 사라졌습니다! 마지막으로 해야할 건 npm run lint를 통해서 린트 명령어를 실행하는 것입니다. 자, 이제는 _app.tsx에 Prop spreading is forbidden eslint(react/jsx-props-no-spreading) 에러가 뜨네요. 저희는 아래와 같이 rules 키에 커스텀 룰들을 추가하여 제어할 수 있습니다.
{
"extends": [
"next/core-web-vitals",
"airbnb",
"airbnb-typescript"
],
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
"react/jsx-props-no-spreading": "off"
}
}
이제 다시 lint 커멘드를 실행해볼까요? 에러가 사라진 것 같네요! Next.js에서는 추가 설치 없이 이와 같이 설정할 수 있습니다. 초기 설정 때 Prettier를 설치했다면, .prettierrc.json 파일도 있을 겁니다. ESLint와 Prettier를 통합하고 설정을 마치면 모든 것이 완료됩니다!
어쩌다 알게 된 것 💡
alias 를 통해 좀 더 빠른 커밋 작성이 가능하다.
git config --global alias.g "git"git config --global alias.c "commit"g c -m '커밋'
빈 커밋을 작성 할 수 있다.
git commit --allow-empty -m '빈 커밋'
References
- 린트(ESLint)와 프리티어(Prettier)로 협업 환경 세팅하기
- Next.js 공식문서 EsLint
- 밑바닥부터 Next.js 개발 환경 구축하기 - All in One
- React/Next.js typescript airbnb eslint code style setup guide
Footnotes
현재 함께 협업 중인
코딩연합2팀 이름 ↩