create-react-app 에 ESLint 와 Prettier 적용하기


이 포스트는 오래되었습니다. velog 에 새로 작성한 포스트를 확인해주세요!

 

리액트 프로젝트에 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 코드 스타일에는 이런것들이 적용되어있습니다.

  1. state 나 LifeCycle API 사용하지 않는다면 함수형 컴포넌트를 사용할것
  2. LifeCycle API 는 특정 순서로 작성 할 것
  3. 컴포넌트는 .jsx 파일로 작성 할 것
  4. 문자열 ref 는 사용하지 말 것
  5. 기타 등등…

여기서, 끄고싶은것들은 rules 에서 0 으로 설정해주면 됩니다. 규칙이 꽤나 까다롭지만.. 적응하고나면 확실히 코드 스타일이 깔끔하다는것을 느낄 수 있게 될 것입니다.

자, 이제 airbnb 의 코딩 스타일과 코드 자동정리를 만끽해보세요~

  • DongWoo Gim

    .prettierrc 와 .prettierignore 내용도 추가해주세요 🙂

    특히 single quote를 선호하는데, prettier 기본값이 double이라서 .prettierrc 에 추가줘야하죠.
    “`
    {
    “singleQuote”: true,
    “trailingComma”: “all”
    }

    “`

    • 우왓 동우님 안녕하세요 🙂
      이 포스트에서는 ESLint 랑 함께 사용하는걸 간주해서 작성됐었어요.

      저는 ESLint 쪽 설정만 해놔서 prettier 쪽 설정은 따로 작성하지 않고 있네요 ㅋㅋ
      그래도 조만간 관련 내용도 추가해놓겠습니다.

      감사합니다

  • 한승훈

    확실히 사용하니 편하고 깔끔해지네요 ㅎㅎ
    개인적으론 세미콜론 사용하는걸 안좋아하는데 prettier에는 옵션이 없는게 아쉽군요.

    airbnb config는 doc 따로 없나요? 룰이 너무 빡세서 몇개는 꺼놔야 할거 같습니다.

  • 이슬기

    안녕하세요
    궁금한 점이 있어서 질문올립니다.

    현재
    “eslint-config-airbnb”: “^17.1.0”,
    “eslint-loader”: “1.9.0”,
    “eslint-plugin-flowtype”: “2.39.1”,
    “eslint-plugin-import”: “2.8.0”,
    “eslint-plugin-jsx-a11y”: “5.1.1”,
    “eslint-plugin-react”: “7.4.0”,
    “react”: “^16.4.2”,

    를 사용하고 있습니다.

    eject 전까지는 complile 이 되다가 “npm run eject” 이후
    Module build failed:
    Configuration for rule “react/jsx-no-bind” is invalid:
    Value “[object Object]” should NOT have additional properties.

    에러가 뜹니다ㅜ

    구글링을 했지만 무슨 문제인지 몰라 질문드려요

  • 최민규

    안녕하세요 저도 궁금한게 있어서요.. 위에 슬기 님처럼 저도 같은 에러가 뜹니다.. 그리고 Prettier가 코드를 이상하게 정리하네요.. 오히려 더 오류가 많아집니다 ㅠㅠㅠ

    eslint랑 다르게 정리하는것 같아요.. 해결 방법 없을까요??

  • 넴넴

    베로퍼트님 블로그가 정말 많이 유익해요!!!!

  • Prettier 를 ESLint 와 연동하기 부분에서,

    yarn add –dev prettier-eslint 설치후, CMD + , 키를 눌러서 환경설정을 열으시고, “작업 영역 설정쪽”에 다음과 같이 설정을 입력하세요.

    라고 말씀해주셨는데 “작업영역설정”이 어딘가요?