[ESLint] CR과 LF의 차이 | error Delete ␍ prettier/prettier in lint

lint 검사를 돌리던 중 아래 에러가 발생했다.

처음 보는 에러에 CR은 또 뭔지.. 바로 검색해봤다.

 

위는 요약하자면 Windows 환경에서 발생하는 에러이며, Windows와 Prettier의 줄 바꿈 방식이 달라서 발생한다.

 

원래 평소에는 Mac 환경에서 개발했었는데, 이번에는 집에 데스크탑이 있어서 Windows 환경에서 개발 중이었다.

(최근에 최신형 맥북으로 업그레이드해서 다시 맥으로 개발할 예정 ㅎㅎ..)

 

두 OS는 각각 새로운 줄 바꿈을 하는 방식이 다르다.

줄 바꿈 방식에는 2가지가 있는데 아래와 같다.

LF: Line Feed(\n)

CR: Carriage Return(\r)

 

이는 과거에 타자기를 사용하던 시절에 줄바꿈을 위해 사용하던 방식이라고 한다.

LF는 현재 커서의 위치를 유지한 채 한 줄을 아래로 내리는 방식이고, CR은 현재 줄에서 커서의 위치를 맨 앞으로 옮기는 방식이다.

 

따라서 타자기를 사용하여 줄바꿈을 하려면 CR로 커서를 맨 앞으로 초기화하고, LF로 한 줄을 아래로 내려야 했다. 즉, CRLF 방식이 사용되었다.

그러나 시간이 지나면서 LF만 사용해서 줄바꿈을 나타낼 수 있게 되었다고 한다.

 

이에 따라 Mac은 LF 방식을 사용하지만, Windows는 여전히 전통적인 CRLF 방식을 사용하기 때문에 두 OS에서 차이가 발생한다.

 

이제 위의 에러를 다시 살펴보자.

error Delete "CR" prettier/prettier in lint

CR을 제거하라고 한다. 위에서 언급했듯이 CR은 Windows에서 사용하고 있는 방식이다.

Prettier 2.0 이상에서는 줄 바꿈 설정 값으로 LF를 사용하는데, Windows에서는 CRLF를 사용하기 때문에 방식을 맞추기 위해 CR을 제거하라는 에러라고 이해하면 된다.

 

이를 위해서는 lint 파일에 아래 코드를 추가하면 된다.

{
  ...
  {
    "rules":{
      "prettier/prettier": ["error", { "endOfLine": "auto" }],
    }
  }
  ...
}

endOfLine을 auto로 설정하면, 줄 바꿈을 할 때 항상 LF로 하는 것이 아닌 OS 별로 설정된 값을 사용하게 된다. 따라서 에러를 해결할 수 있다!