eslint + prettier로 일관성 있는 코드만들기
코드의 규칙 정하기
일반적으로 개발작업을 하다보면 혼자서보다 팀단위로 코드를 짜게 됩니다. 개개인마다 코드 작성하는 스타일이 달라 일관성 있는 코드를 구현하기란 어려운 과제였습니다. 이러한 문제를 보완하기 위해서 코드린터와 코드 포멧터를 이용하여 마치 한 사람이 코드를 작성한 효과를 볼 수 있게 되었습니다.
코드린터 : 문법에서 에러는 아니지만 에러로 약속하자고 규칙을 정하는 것 (ex. eslint)
코드포멧터 : 코드를 보기 좋게 만들어 주는 것 (ex. prettier)
VSCODE에서 eslint와 prettier 설정해보기
제일 많이 쓰는 조합인 eslint + prettier를 vscode에서 한번 설정해보겠습니다.
1. eslint 설치하기
yarn add eslint -D↑ eslint를 설치해줍니다. 그 다음 eslint 설정파일을 만드는 것을 진행합니다
npx eslint --init↑ 이 명령어를 치면, 설정과 관련하여 몇가지 질문을 합니다. 프로젝트에 맞게 설정사항들을 선택해줍니다.
↑ 설정을 완료하고 설치가 끝나면 루트경로에 .eslintrc.js라는 파일이 생기게 됩니다. 이 부분이 eslint와 관련한 설정파일입니다.
↑ 이제 아무 파일이나 열어보면 갑자기 빨간색 라인이 생기며 마치 오류라고 뜹니다.
실제로 오류는 아니지만, eslint 때문에 이것을 오류라고 인식하는 것입니다.
2. 무시하고 싶은 에러는 어떻게 해야할까?
저는 지금 Next.js 기반의 프로젝트를 하고 있습니다. Next.js에서는 jsx부분을 작성할 때 React 모듈을 굳이 import 하지 않아도 됩니다. 그러나
↑ 지금은 이렇게 eslint에서 React 모듈을 가져와야한다고 오류를 내뱉고 있습니다. 이러한 오류를 무시하고 싶을땐 어떻게 해야할까요?
↑ .eslintrc.js에 들어가서 rules 부분에 무시하고 싶은 메세지들을 추가해주면 됩니다.
아까 에러의 name이 "react/react-in-jsx-scope"이였으니까 작성해주고 이 메세지를 "off"해주세요. 캡쳐 사진을 보면서 글을 읽으시면 이해가 되실 겁니다.
↑ 아까의 에러가 사라진 것을 확인할 수 있습니다 :)
3. ESLint, prettier Extension 설치
eslint를 설치했음에도 제대로 동작하지 않는다면 vscode에서 관련된 extension을 설치해주세요. 다운로드 수가 가장 많은 extension을 설치해야합니다!
4. eslint가 발견한 오류들을 확인하려면?
코드를 일일이 열어보면서 오류들을 확인하는 것은 굉장히 번거로운 일이겠지요. 그래서 한꺼번에 eslint 오류들을 확인할 수 있는 명령어가 있습니다.
npx eslint "**/*.{ts,tsx}"
↑ 오류가 겁나게 많이 나옵니다. 근데 이 중 오류들은 prettier에게 맡기는 방법도 있습니다.
5. prettier
이번엔 prettier를 설치해봅시다.
yarn add -D --exact prettier설치를 완료했으면 root에 .prettierrc.json 설정파일을 하나 만들어주세요.
6. 모든 작업자에게 동일하게 prettier기능이 동작하려면 ? => .vscode
prettier에서 규정한 코드 스타일을 같은 팀사람들에게 적용하려면 어떻게 해야할까요?
일단 루트에 .vscode라는 이름의 폴더를 만들어주고 그 안에 settings.json이라는 파일을 하나 만들어주세요. 파일명이 틀리지 않게 주의해주세요!
↑ {} 객체 안에 vscode 설정들을 넣어줍니다.
"editor.formatOnSave": true 에디터가 저장할때 어떠한 동작을 수행하게 한다는 것이죠
"editor.defaultFormatter": "esbenp.prettier-vscode" prettier를 적용한다는 것입니다
자, 이제 코드를 수정해보고 저장해보세요. 자동으로 코드스타일이 바뀌게 될 겁니다!
7. 마지막 단계, eslint와 prettier 연결하기
eslint와 prettier를 설치했으니, 이 둘을 연결하는 패키지를 또 설치해주어야 합니다. 굉장히 과정들이 복잡하죠? 원래 설정하는 것이 복잡합니다 ㅠ 차근차근 따라오시면 어느덧 세팅이 완료되어있을 거에요
yarn add eslint-config-prettier -Deslint-config-prettier 패키지를 설치해주고 그다음에 .eslintrc.js 파일로 가서 "extends" 배열에 "prettier"를 추가해줍니다.
자 이제 eslint와 prettier설정이 끝이 났습니다. 다음은 husky라는 패키지를 통해 eslint오류가 있으면 commit이 안되게끔 강제하는 방식을 알아보도록 하겠습니다:)
