[NextJS] EsLint Delete `␍` eslint (prettier/prettier) 에러 해결하기

EsLint 대표이미지

 

필요성 

Next JS, Nest JS를 다루기 위해 개발단계 초기, EsLint를 설정해줬습니다.(설정방법은 글 하단 링크 첨부)

협업시, 코드의 통일성과 유지보수 등의 문제를 위해 EsLint를 설정한 것에 그치지 않고 발생한 에러에 대해서 해결해보는 시간을 갖고자 합니다. Delete `␍` eslint (prettier/prettier) 에러에 대해 살펴보겠습니다.

---

접근

 

  1. 발생한 에러 모습

 

  2. 에러 해결방안 제시

---

방법

  1. 발생한 에러 모습

 

EsLint 에러 발생모습 (코드 라인 끝마다 빨간 밑줄)

코딩을 하던 중, 각 코드라인 끝에 빨간밑줄이 발생하면서 (구동은 되지만) 굉장히 눈에 거슬리는 상황에 노출됐습니다.  

Delete `␍` eslint (prettier/prettier)

정확한 에러명칭은 위와 같이 식별이 됐습니다.

 

 

  2. 에러 해결방안 제시

 

EsLint를 적용하게 되면, 우리는 EsLint의 설정파일인 .eslintrc.js 파일이 생성됨을 확인할 수 있었습니다.

.eslintrc.js 내부로 들어갑니다. 

내부로 들어가게 되면 보이는 코드는 위와 같습니다.

다른 코드는 볼 것 없이 빨간 네모 박스(그림) 속 rules 코드를 보겠습니다.

 

rules 내부에 작성되는 내용은,

우리가 Eslint를 통해 어느 규칙을 적용시킬지 "규칙을 정해주는 역할을 담당하는 영역"이라고 보시면 됩니다.

 

이 영역에 파란 네모 박스(그림)로 endofLine에 대한 처리를 'auto'로 해주면 정상적으로 에러가 해결됩니다.

 

---

https://everybodypyeon.tistory.com/entry/NextJS-EsLint-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

(EsLint 설정,적용하기)

[NextJS] EsLint 설정하기

 

 

 

이상으로, EsLint 속 "Delete `␍` eslint (prettier/prettier)" 에러를 해결봤습니다.

추가 질문을 댓글을 달아주시면 감사하겠습니다^^!

오늘도 파이팅입니다!