eslint, prettier 충돌 해결 (Replace... 어쩌고)

사건 발생

eslint와 prettier를 처음 사용해 봐서 뭐가 뭔지 헷갈리는 와중에, 자꾸 빨간색 밑줄이 뜨면서 간질간질 살랑살랑 심기를 건드리는 듯한 느낌적인 느낌을 견딜 수 없었다.

 

 

 

 

 

원인

eslint에서는 작은따옴표만 사용하도록 설정을 해놨는데, prettier가 큰따옴표로 자동 포매팅하기 때문에 발생하는 문제였다.

 

즉 eslint와 prettier의 충돌로 인해 발생했던 것!  eslint와 prettier의 충돌만 막아주면 바로 해결할 수 있다.

 

 

 

 

 

해결

작은따옴표로 통일을 해보자~

우선 eslint를 설정하기 위해 eslintrc.js 파일에서 singleQuote를 true로 설정한다.

 

 

 

그리고 Prettier를 설정한다.

 

1. VSCode 설정(cmd + ,)에 들어간다.

2. Prettier: Single Quote 검색

3. Single Quote 체크

 

 

 

 

eslint가 보내던 에러가 사리진 것을 확인할 수 있다.

 

꼭 따옴표가 아니더라도 Replace ..어쩌고 저쩌고가 나온다면 eslint와 prettier의 충돌을 확인해 보자!