prettier eslint Delete CR 오류 두 가지 다 맞춰서 설정

VSCode를 사용해서 프로젝트를 진행하다보면 prettier과 eslint를 많이 사용하게 된다.

prettier은 원하는 포맷을 설정한 후 저장하면 자동으로 형태를 맞춰주는 텍스트 포맷터이다.

eslint는 자바스크립트 문법 오류나 이상한 패턴을 잡아주는 코드 분석 도구이다.

협업할 때 코드 포맷을 똑같이 맞춰주기 때문에 유용한 툴이라 꽤 자주 쓰인다.

두 가지를 동시에 사용하다보면 충돌이 나는 경우가 있기 때문에 프로젝트 초반에 설정을 다 해두는 것이 좋다.

Delete CR 이라는 오류메시지가 보인다.

CR: Carriage Return(\r) 은 줄바꿈 설정에 관한 것인데,

prettier의 기본 줄바꿈(개행)방식은 LF이고, 윈도우에서는 CRLF라서 이러한 오류가 발생한다고 한다.

VSCode 오른쪽 하단

파일 자체의 줄바꿈 방식을 LF로 바꿔도 해결이 된다.

그렇지만 prettier 설정 파일에 있는 규칙을 변경해주는 것이 더 안전하다.

.prettieric.json

.prettierrc 파일에 들어가서 endOfLine을 auto나 lf로 바꾸어준다.

본인은 prettier과 eslint에서 모두 LF로 설정하였다.

.eslintrc.js

eslint에서도 동일하게 설정해준다.

이러면 충돌이 나지 않고 잘 진행된다.

그리고 singleQuote도 성가시게 오류가 나는 바람에 저 singleQuote 옵션도 같이 넣어줬더니 잘 해결되었다.