prettier 는 저번 프로젝트때 써봤는데, eslint는 이번이 처음이었다.
eslint는 오류가 있을 때 빨간 줄을 죽죽 그어주는, 마치 한글이나 워드의 맞춤법 오류기같은 존재로 대강 생각하고있었다.
그.런.데
서버 구축을 위해 필요한 npm 패키지들을 깔고 나니
갑자기 모든 파일의 모든 줄에서 빨간색 줄이 팍! 떠버렸다.
eslint랑 prettier가 서로 충돌이 난 것 같긴 했는데 애초에 설정 파일을 팀원한테서 받아온 것이다보니.. 나는 진정 아무것도 모르겠는 것..
구글링으로 다른 분의 velog를 읽어보니 eslint가 npm과 얽히면 뭔가 문제가 생기는 듯 했다.
아래 velog에서 제시해주신 방법대로 해보니 일단은 엄청난 빨간색 줄을 멈출 수 있었다.
멈춰!! ✋
참고한 해결 방법!
그런데도 나의 오류창은 여기서 멈추지 않았다.
자세히 보니 string 을 감싸는 quote, 즉 따옴표에 뭔가 문제가 있었다.
아무래도 "" double과 '' single이 어디선가 충돌이 나는 것 같았다.
왜냐하면 더블도 싱글도 모두 에러가 났거덩 🤔
그래서 prettier 와 eslint 파일을 뜯어보기로 했다.
그랬더니 어머나 prettier 는 singlequote: true 로 되어있었고, eslint는 quote: ['warn', 'double'] 로 되어있는게 아닌가.
prettier는 single로 바꿔주는데, eslint는 double이 옳고 singel이 그른 것이라 하니 문제가 생긴 것이다.
우리 팀은 prettier를 전역으로 쓰고, eslint는 프론트팀과 백엔드팀이 각각 지정해서 쓰고 있기에 전역인 prettier에 따라,, eslint를 바꿔주었더니 완전 해결 완료다!!
