react eslint prettier airbnb style guide 적용하기

terminal

npx create-react-app my-react-app
cd my-react-app

exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/chinsun9/eslint-prettier-airbnb-react/master/eslint-prettier-config.sh 2> /dev/null)

yarn start

• 누군가 자동으로 세팅하는 스크립트를 제작해두었다
• 명령어 3개만 입력하면 세팅이 끝난다
• windows에서는 gitbash에서 해당 명령을 실행하면 된다
• 추가로 eslint 확장도구가 설치되어 있어야한다

• 추가로, prettier 확장도구를 통해 자동포맷팅을 사용하는 사람들은

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": false
}

• "editor.formatOnSave": false ; prettier 확장도구로 인한 포맷팅은 비활성화해주고,
• "source.fixAll.eslint": true ; eslint에서 포맷팅을 하도록한다

TMI

따라해도 나오는 오류

Replace onPerfEntry with (onPerfEntry)eslint (prettier/prettier)

• src/reportWebVitals.js 파일에서 1개의 파라미터만 받는 함수에 괄호로 묶어주라는 오류가 나올 것이다
• 이것만 고쳐주면 잘 동작한다

• 혹시 빨간줄이 계속남아있거나, 안된다면 vscode를 다시 실행해보자

계속된 세팅 실패

error log

        leadingComments: [
          {
            type: 'Line',
            value: ' If you want to start measuring performance in your app, pass a function',
            start: 270,
            end: 344,
            loc: [SourceLocation],
            range: [Array]
          },
          {
            type: 'Line',
            value: ' to log results (for example: reportWebVitals(console.log))',
            start: 345,
            end: 406,
            loc: [SourceLocation],
            range: [Array]
          },
          {
            type: 'Line',
            value: ' or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals',
            start: 407,
            end: 481,
            loc: [SourceLocation],
            range: [Array]
          }
        ],
      }
    ],
    parent: null
  }
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-practice@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-practice@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\chin_\AppData\Roaming\npm-cache\_logs\2020-11-17T06_40_37_514Z-debug.log

• eslint-config-airbnb 만 설치하면 위 오류가 뜨면서 실행조차 안됬다
• 이유는 모르겠다

eslint-prettier-airbnb-react 포크

• karlhadwen/eslint-prettier-airbnb-react를 포크해서 내가 오류난 부분을 바꿔주었다
• Delete `␍`eslintprettier/prettier 문제였는데,

.eslintrc

{
  "rules": {
    // ...
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 80,
        "endOfLine": "auto" // <-- 추가
      }
    ]
    // ...
  }
}

• "endOfLine": "auto"를 추가해어 해결하였다

.prettierrc 파일 불필요

• eslint-config-prettier 을 사용해서 prettierrc 파일없이 eslint 설정만으로도 가능하다고한다
• eslintrc.json에 rule 아래 prettier/prettier이 있는데, 여기에 내가 필요한 포맷팅 설정을 해두면된다

여기까지 리액트 프로젝트

• https://github.com/chinsun9/react-eslint-prettier-practice

참고

• 동영상 Setup ESLint, Prettier & Airbnb Style Guide in under 2 Minutes
• eslint-prettier-airbnb-react