react typescirpt eslint prettier airbnb style guide 적용하기

방법 바로 보기

react typescirpt eslint prettier airbnb style guide 적용 방법은 여기로…
https://github.com/chinsun9/typescript-react-eslint-prettier-practice

TMI

상황

• 진짜 여러 튜토리얼을 따라해도 뭔가 잘 안됬다
• 차근차근 따라하기보다 세팅을 빨리 끝마치고 싶은 생각에 복붙을 시전했다
• 일단 뭔가 쫌 되야 이렇구나 생각할텐데 잘안되서 머리가 아팠다

문제 & 원인

vscode setting.json

• eslint없이 prettier 를 사용하면서 설정해둔 설정값
• format on save 이것때문에, 린트 이후에 prettier가 다시 코드를 포맷팅하는 문제

.vscode/setting.json

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

• 처음에는 이거를 둘다켜놨엇다
• 기존에 eslint에서 fix한거 formatOnSave가 다시 prettier 포맷터로 다시 포맷해서 생겼었다

.eslintrc.js

Parsing error: “parserOptions.project” has been set for @typescript-eslint/parser. The file does not match your project config: .eslintrc.js. The file must be included in at least one of the projects provided.

• 이유를 모르겠으나. .js 방식으로하면 위 오류가 떠서 안됬다
• 그래서 단순하게 .json방식으로 바꾸었다. 그랬더니 해결됬다…

알게된 것

• eslint-config-prettier 를 통해 별도 .prettierrc 파일없이
• eslintrc에서 prettier 설정이 가능하다

• reportWebVitals.ts 이런 자동생성된 파일은 린트를 적용시킬 필요가없다
• 파일 최상단에 /* eslint-disable */를 적어 무시해주자

• 빨간줄이 생기면 희소식이다. 빨간줄 조차 안생기면 eslintrc 파일에 문제가 생긴거다
• vscode도 재시작해보자

• “source.fixAll.eslint”: true 설정으로 eslint에서 포맷팅을 실행할 수 있다

• 쓸모없다고 생각하는 룰은 그냥 꺼버리자
• 마우스를 올려서 어떤 룰인지 확인하고 .eslintrc > rules 에 해당 룰을 적고 0으로 세팅한다

세팅법 - 여기까지 리액트 프로젝트

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

• readme.md에 설정하는 방법을 정리해두었다
• 커밋내역을 보면 명령어 입력 순서가 나와있으니 참고하면 좋을 것 같다

참고

• Create-React-App with TypeScript, ESLint, Prettier, and Github Actions | by Bryan Grill | Medium
• prettier/eslint-config-prettier