Delete `␍` eslint(prettier/prettier) 에러 해결하기

🚨 Delete `␍` 에러 로그 확인

다른 사람이 작업하던 프로젝트를 이어받아 진행하게 되던 과정에서 만난 문제이다.

 

무사히 프로젝트를 설치하고, 개발환경을 켜서 수정하려고 하던 찰나였는데

이게 뭘까? 코드의 모든 줄에 경고가 발생했다. 뭐 하기도 전에 왜 이러시는거에요?

 

내 에디터의 색깔은 RED

 

모든 줄에 발생하는 경고는

Delete `␍` eslint(prettier/prettier)

 

찾아보니 Mac OS에서 진행하던 작업을 Windows에서 실행시키게 될 경우 자주 마주하는 문제라고 한다.

 

 

 

원인은 개행 문자 방식의 차이, LF vs CRLF

 

LF는 Line Feed를 의미하며 Unix 계열 시스템(Linux, macOS)의 기본 개행 방식이다.

줄바꿈을 표시할 떄 LF(\n)를 사용한다.

 

반면, CRLF는 Carrage Return + Line Feed를 의미하며 Windows 의 기본 개행 방식이다.

줄바꿈을 표시할 때 CR(\r)과 LF(\n) 두 문자를 합한 \r\n 형태로 나타낸다.

 

 

이런 줄 바꿈 문자에 대해서는 <textarea>의 줄 바꿈 처리를 다루는 포스팅에서도 잠깐 다룬 적이 있다.

[HTML] <textarea>의 줄 바꿈 적용에는 디테일이 필요하다 (feat. pre, 정규표현식)

 

 

prettier 2.0 이상부터는 줄 바꿈 문자에 대한 기본 값이 LF이다.

하지만 위에서 정리했듯이 Windows는 CRLF를 사용하기 때문에 CR을 제거하라는 다음과 같은 경고가 발생하는 것이다.

 

 

 

✅ prettier의 endOfLine을 수정해서 해결

Prettier의 endOfLine 옵션은 개행 문자를 지정하는 설정이다.

위 문제는 값을 "auto"를 적용함으로써 OS에 구애받지 않고 자동으로 개행 문자를 처리하도록 설정해 해결할 수 있다.

 

처음에는 .prettierrc 에 { endOfLine: "auto" }를 추가해보았지만 문제가 해결되지 않았다.

이는 ESlint와의 충돌이 원인으로 보였고 대신에 .eslintrc.json에서 Prettier 플러그인 규칙을 명시적으로 작성했다.

 

// .estlintrc.json
{
  /* ... */
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto" // 줄 바꿈 형식을 시스템에 맞게 자동으로 변환
      }
    ]
  }
}

오류 말끔히 해결!