eslint-plugin-prettier를 삭제한 이유(feat. delete enter, delete cr 에러)

delete enter 에러

 

어느 순간부터 

mac에서는 delete enter

windows에서는 delete cr이라는 에러가 계속해서 났다.

 

npm run lint를 하면 아무런 문제가 없다고 뜨고,

사실상 프로젝트를 빌드하는데에는 전혀 문제가 없었다.

 

하지만, 개발을 할 때

엔터 한 번만 치더라도 계속해서 저 에러가 따라다녔고,

저장을 하면 prettier에 의해 포맷팅이 되면서

enter가 사라지기에 에러도 함께 사라졌지만

엔터를 다시 치면 또 다시 나타났다.

 

오기가 생겼다....

 

윈도우 운영체제에서 "delete cr" 에러가 나는 이유

prettier와 윈도우 운영체제가 줄바꿈을 하는 방식이 다르기 때문에 발생한다.

prettier 2.0 이상에서 줄 바꿈 설정 값으로 LF를 사용한다.

하지만, 윈도우는 CRLF 방식을 사용하기에

CR을 제거한 LF방식을 사용하라는 에러가 발생한다.

 

해결방법은 .eslintrc에 이를 추가해주는 것이다.

"prettier/prettier": [
    "error", 
    {
      "endOfLine": "off"
    }
]

endOfLine : auto는 OS 운영체제 별로 설정된 값을 사용하라는 구문이다.

 

맥에서 갑자기 등장한 delete enter

delete cr은 윈도우를 사용하던 팀원에게 발생했던 에러였고,

맥북에서는 아무 에러도 없었는데 

갑자기 생겼다.. 

 

문제는 위의 해결방법이 윈도우에서는 먹히지만,

맥에서 발생하는 delete enter 에러는 해결해주지 못했다.

prettier와 맥은 둘 다 LF 방식을 사용하는데

 왜 에러가 생기는지 당최 알 수 없었다.

 

일단 저 delete cr이든 delete enter는

에러 메세지를 호버해보면 

prettier/prettier 에러라고 떴다.

중간 정리

구글링해서 나오는 해결방법은 eslint나 prettier 설정 파일에서

endOfLine : auto를 적어주라는 거였고,

윈도우에서 delete cr 에러는 사라졌으나,

맥의 delete enter 에러는 해결되지 않음

근데 뭔가 이상하지 않나?

왜 prettier 에러를 eslint 설정 파일에서 컨트롤하지?

음..?

하는 생각을 처음에 못했다.

 

하지만 여기에 꽂혀서 온갖 짓을 다했고 

prettier 관련한 패키지를 다 지우고 하나씩 다시 깔기 시작했다.

처음에 의도는 뭔가 꼬였을 수도 있겠다는 생각이었다.

 

내가 깔았던 prettier 관련 패키지들

1) prettier

2) eslint-config-prettier

3) eslint-plugin-prettier

 

2), 3)은 프로젝트 초기 설정이라고 검색하면

거의 모든 블로그에서 나오는 패키지들이며,

eslint와 prettier의 규칙 충돌을 방지해준다고 한다.

 

하지만 거의 모든 블로그에서 각각의 역할을 잘못 적어놓거나

제대로 적어놓지 않은 경우가 많았다.

 

eslint-config-prettier 

eslint에서 prettier와 충돌할 수 있는 rule을 꺼버림 
코드 오류를 잡는데는 eslint, 코드 포맷팅에는 prettier를 사용하는 방법

eslint-plugin-prettier

 prettier를 eslint의 rules로 동작하게 함
포맷팅 문제도 오류로 출력되어서 오류 메시지가 지나치게 많아지며 느림

 린트 타임에 Prettier 포맷팅 문제를 표시하여 코드가 항상 포맷팅 될 수 있게 도와줌

 하지만 이는 상당한 비용이 듦

왜냐면 린트되는 모든 파일에 대해 Prettier 형식을 수행해야 하기 때문

각 파일은 ESLint에 의해 한 번, Prettier에 의해 한 번, 두 번 구문 분석되버리는 문제 발생 

 

이걸 보고 깨달았다..

eslint-plugin-prettier 때문에

eslint 설정 파일에서 prettier 설정도 해줘야했고,

다른 사람 블로그를 따라했던 초기 설정들에 이미

eslint-plugin-prettier를 사용하기 위한 규칙들이

eslintrc 파일에 담겨 있었다.

 

결론

eslint-plugin-prettier를 삭제했더니 해결됐다.

참고 자료들을 읽어보니

eslint와 prettier의 충돌을 막기 위해서는

eslint-config-prettier만으로도 충분했다.

 

eslint-plugin-prettier는

typescript-eslint 공식 문서에서도

성능에 대한 트러블 슈팅 문제로 제기 됐을 정도인데

너무 많은 사람들이 무분별하게 설치를 하고 있으며

eslint-config-prettier보다 더 많은 다운로드 수를 가지고 있다.

 

나도 이 에러가 뜨지 않았다면 공부하지 않았을 거지만,

오늘의 교훈..

패키지들을 무지성으로 깔지말자.

 

나름 공부하면서 하나씩 설치했지만,

초기에 설치해야하는 패키지들이 많아서 

하나하나 딥하게 파악하진 못했다.

 

아, 그리고 이미 eslint-plugin-prettier를 설치해서

eslintrc에 관련 설정

까지 해줬다면

 eslint-plugin-prettier를 삭제했을 때 

관련 설정들도 다 지워줘야한다.

그러지 않으면 빌드시 .eslintrc에

 eslint-plugin-prettier 관련한 설정은 있지만

 eslint-plugin-prettier 자체는 없다며

빌드 에러가 발생하고, 설치를 권장한다.

 

 

 

 

 

 

https://typescript-eslint.io/linting/troubleshooting/performance-troubleshooting/#eslint-plugin-prettier

Performance Troubleshooting | typescript-eslint

https://yrnana.dev/post/2021-03-21-prettier-eslint/

prettier와 eslint를 구분해서 사용하자 | nana.log

https://github.com/typescript-eslint/typescript-eslint/issues/7403