create-react-app 에 ESLint 와 Prettier 적용하기
우리가 리액트 프로젝트, 혹은 다른 자바스크립트 프로젝트를 진행하게 될 때, 우리는 문법 검사 및 더 나은 자바스크립트 코딩 스타일을 위하여 ESLint 라는 도구를 사용하곤 합니다. create-react-app 으로 만들어진 프로젝트의 경우에는 자체적으로 내장되어있죠.
예를들어서 const 로 값을 선언해놓고 그 값을 수정하려고 하면 사전에 에러가 보일것이고, 선언해놓고 사용하지 않으면 경고를 띄울수도 있게 하고, 혹은 스타일에 따라서 따옴표를 쓸 지 쌍따옴표를 쓸 지, 그리고 또 들여쓰기 설정은 공백 2 개로 할 지, 4 개로 할 지, 아니면 아예 탭으로 할 지.. 그런 것들을 설정 할 수 있게 됩니다.
보통 ESLinst 를 사용하면, 그러한 코딩 스타일을 준수하기 위하여 만약에 사전에 정의한 코딩 스타일과 맞지 않는다면 경고나 에러를 띄움으로써 우리가 제대로 된 코드를 작성 할 수 있게끔 도와줍니다. 하지만! 이러한 세부 설정을 유지해가면서, 코드를 자동으로 정리해주는 도구가 있는데, 바로 Prettier 입니다.
물론, 에디터마다 코드 정리 도구가 있긴 하지만, Prettier 의 차별점은 커스터마이징이 아주 자유롭게 가능하다는 것과, 추가적으로 ESLint 와 아예 연동까지 할 수 있다는 점 입니다.
이 강의에서 우리는 create-react-app 으로 만든 프로젝트에서 VSCode 와, ESLint, 그리고 Prettier 를 충분히 활용하는 방법을 간단하게 살펴보겠습니다.
프로젝트 설정 및 ESLint 기본설정
진행 하려면, 우선 create-react-app 으로 프로젝트를 만드세요.
create-react-app prettier-react
그리고 나서 VSCode 로 해당 디렉토리를 열으세요. 프로젝트에 ESLint 가 설정되어있긴 하지만, 기본 설정으로는, VSCode 에서 바로 경고 및 에러를 확인 할 수 없습니다. 그 대신에, yarn start 를 했을 때 터미널 상에서만 볼 수 있죠.
에디터 상에서도 오류를 제대로 보려면 VSCode 익스텐션 마켓플레이스에서 ESLint 를 검색후 설치한 다음, 아래와 같이 설정 파일을 만들어주어야 합니다 (혹은 yarn eject 를 하면 자동으로 생성됩니다. 하지만 yarn eject 를 하고 싶지 않을 경우엔 다음과 같이 하시면 됩니다)
프로젝트 디렉토리에 .eslintrc 라는 파일을 만들고 다음과 같이 입력하세요:
{
"extends": "react-app"
}
저장하고 나면, 자바스크립트 파일에서 기본적인 경고들을 확인 할 수 있습니다.
Prettier 설정
Prettier 를 사용하려면 우선 VSCode 익스텐션 마켓플레이스에서 Prettier - Code Formatter 를 설치하세요.
설치하고 나서, Shift + CMD + F 를 누르면 코드가 정리됩니다.
Prettier 를 ESLint 와 연동하기
yarn add --dev prettier-eslint
그리고 나서, CMD + , 키를 눌러서 환경설정을 열으시고, 작업 영역 설정쪽에 다음과 같이 설정을 입력하세요
{
"editor.formatOnSave": true,
"javascript.format.enable": false,
"prettier.eslintIntegration": true
}
코드가 저장될때마다 자동으로 포맷되고, prettier 에서 ESLint 와 연동되도록 설정했습니다.
ESLint 세부설정
한번 ESLint 에서 간단한 세부설정을 해보겠습니다. 쌍따옴표 대신에 일반 따옴표를 쓰도록 설정하고, 들여쓰기 크기는 두개의 공백으로 설정합니다.
{
"extends": "react-app",
"rules": {
"quotes": ["error", "single", { "avoidEscape": true }],
"indent": ["error", 2]
}
}
그리고나서 코드를 다시 저장하시면, 코드가 자동으로 정리되는것을 볼 수 있습니다.
더 나아가서, 인기있는 코드 스타일인 airbnb 스타일을 적용해보겠습니다.
yarn add eslint-config-airbnb
설치 후에 .eslintrc 를 다음과 같이 작성하세요.
{
"parser": "babel-eslint",
"extends": "airbnb",
"plugins": ["react", "jsx-a11y", "import"],
"rules": {
"react/jsx-filename-extension": 0
}
}
airbnb 코드 스타일에는 이런것들이 적용되어있습니다.
- state 나 LifeCycle API 사용하지 않는다면 함수형 컴포넌트를 사용할것
- LifeCycle API 는 특정 순서로 작성 할 것
- 컴포넌트는 .jsx 파일로 작성 할 것
- 문자열 ref 는 사용하지 말 것
- 기타 등등...
여기서, 끄고싶은것들은 rules 에서 0 으로 설정해주면 됩니다. 규칙이 꽤나 까다롭지만.. 적응하고나면 확실히 코드 스타일이 깔끔하다는것을 느낄 수 있게 될 것입니다.
자, 이제 airbnb 의 코딩 스타일과 코드 자동정리를 만끽해보세요~