VScode의 Replace... ␍⏎ 해결

😢갑자기 화면 가득 떠오른 Replace ␍⏎ 

Replace ·fetchSearchData with ␍⏎··fetchSearchData

 

어제까지만 해도 멀쩡하던 프로젝트에......

갑자기 열자마자 모든 파일에서 노란 줄이 뻑뻑 그이면서 위와 유사한 Replace 에러들을 가득 띄우기 시작했다.

VScode 업데이트 하라고 해서 냉큼 했더니 그런가...? eslint 설정은 전혀 건드리지 않았는데...

 

어쨌든 기능을 수정하려면 당장 이 VScode의 에러를 해결해야 한다!!! 

 

 

 

우선 Replace␍⏎ 라는 키워드로 유사한 문제를 겪은 글을 찾아보았다. 

Prettier ask me to replace ⏎↹↹ with ·

 

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

 

해당 글에서는 VScode 설정인 setting.json에 이 설정을 넣어 수정하라고 했다. 

물론 나는 해결 중간 과정에서 기존에 생각 없이 쓰던 prettierrc 파일을 지우고... setting.json을 손 보고 eslintrc 파일을 prettier 설정과 합치며... 이것저것 건드리긴 했지만 최종적으로 해당 코드를 setting.json에 넣어서 문제가 해결되기는 한 것 같다. 

이건 prettier과 eslint 설정이 충돌하면서... 또 lf와 crlf가 충돌하며 흔히 생기는 문제라고 하는데, ... 

 

내 경우 setting.json의 formatOnSave가 기존까지 true로 되어 있었기 때문에 false로 바꾸니 노란 줄이 사라졌다. 

 

그럼 이걸 false로 해두면 세이브 할 때마다 포맷팅이 아예 안 되는 것 아니냐... 싶은데 놀랍게도, 적용이 된다. 윗줄의 fixAll:true가 수정 역할을 가져가기 때문이라고. formatOnSave가 true이면 Prettier가 먼저 포맷팅을 하고 이후 ESLint가 수정을 담당하며 두 설정이 충돌하게 된다. 내 경우 줄바꿈 Replace하라는 에러가 뜨는데 Prettier은 가로 정렬을, ESLint는 줄바꿈을 요구하며 계속 해결되지 않는 수정 요청을 하게 되는 것이었다.

 

이제 false로 변경했으니 저장할 때마다 Prettier가 자동 포맷팅을 하지 않고, ESlint만 작동하게 된다. 즉 세이브마다 나타나던 충돌 에러가 사라진다. 포맷터 충돌이라니 원리만 놓고 보면 어려운 건 아닌데...

코드 포맷을 유지하는 prettier과 eslint, setting.json의 우선 순위와 작동 방식을 어설프게 알고 있어 문제 해결에 시간이 걸렸던 것 같다. (덕분에 한 줄씩 뜯어봐야 했음...)

 

그래도 급하게 어디서 긁어와 불필요하게 어지럽던 설정들을 리펙토링 했으니 다행일지도?

 

 

 

📍그럼 혹시... 이렇게 해결하면 빌드 전에 에러가 발생하진 않을까?

에디터에서 멀쩡하게 코드를 잘 작성한 것처럼 보여도 빌드 전에 에러를 우수수 뱉으면 난감해진다.

혹시나 하는 걱정에 알아보았다.

다행히 Prettier는 코드 스타일만 관리하기 때문에 저장할 때 포맷팅이 되지 않을 뿐, 빌드 도구에서 영향을 주지 않는다. 즉 런타임 에러, 빌드 에러는 발생하지 않기 때문에 이 부분에서는 걱정하지 않아도 될 것 같다.