qwzd에 eslint, prettier 적용하기

피파온라인 전적 검색사이트 https://qwzd.kr/ 에 참여하게되었습니다.

프로젝트에 eslint와 prettier 설정이 되어있지 않아서 이슈를 등록하고 프로젝트에 적용하기로 했습니다.

누군가가 해놓은 프로젝트에 손을 대보는일은 처음이었습니다.

eslint init

위 명령어를 통해 초기화를 진행하였고 airbnb 스타일 가이드를 선택했습니다.  

그 후 프로젝트를 시작시켰고 엄청나게 많은 lint에러를 확인하였습니다. 이 글을 쓰게된 계기 또한 이 많은 린트에러들을 조금씩 해결해나가는 과정을 기록하고자 쓰게되었구요.

 

eslint init 했을 때 떴던 스타일 오류들

해결한 것들 

 

1. 컴포넌트 파일이름을 JSX로 바꿨습니다. 

2. 컴포넌트를 export 로 뺀 경우 export default로 수정하였습니다.

3. react/one-expression-per-line 속성을 껐습니다. 

4. object-curly-newline 속성을 껐습니다.

5. operator-linebreak 속성을 껐습니다.

6. react/jsx-filename-extension : jsx 사용가능한 확장자를 설정했습니다.

7. prop-type이 정확히 명시되어있지 않은 부분이 많아서 우선 껐습니다.

8. react/destructuring-assignment: 비구조화할당 안되어있는 부분이 많아서 꺼놨습니다.

9. React 17 버전 이상부터 import React from 'react'가 필요없기에 제거했습니다.

10. prop-types를 설치했습니다. (15.5버전 이후 다른 패키지로 이동)

11. spaced-comment 속성을 껐습니다. 

12. map 함수의 index를 키로 사용하고 있는데 이를 수정해야 할 필요가 있습니다.

13. eslint, prettier 에서 jsx singleQuotes 허용