[eslint] prettier/prettier: Delete `␍`: 운영 체제가 다른 팀원 간 협업에서 발생한 ESLint 및 Prettier 줄바꿈 오류 해결 방안

ClydeHan·2024년 12월 15일

ESLint Prettier TROUBLESHOOTING vscode

eslint prettier vscode logo images

사전 지식

줄바꿈 방식 LF와 CRLF, 어떻게 다를까?

문제 발생 상황

환경
- 운영 체제는 Windows이다.
- VSCode를 사용하여 프로젝트를 개발하고 있다.
- 프로젝트는 Mac 사용자가 생성했으며, Mac/Linux 환경의 기본 줄바꿈 방식인 LF를 사용하고 있다.
- ESLint와 Prettier가 설정된 프로젝트이다.
프로젝트 ESLint 설정
- ESLint는 plugin:prettier/recommended를 통해 Prettier 규칙을 ESLint 규칙으로 통합하고 있다.
- Prettier 규칙 위반 시 ESLint가 오류로 보고하도록 설정되어 있다.
- Prettier는 기본적으로 줄바꿈 방식을 Unix 스타일(LF)로 강제하고 있다.
문제 증상
- pnpm i 실행 후 ESLint 및 Prettier에서 다음과 같은 오류가 발생하였다:
```
[eslint] prettier/prettier: Delete `␍`
```
- Prettier가 줄바꿈 방식으로 LF를 요구했으나, Windows 환경에서 파일이 CRLF로 변환된 것이 원인으로 보인다.

문제 원인

운영 체제 별 줄바꿈 차이

Mac 사용자는 기본적으로 LF 줄바꿈 방식을 사용하지만, Windows에서는 Git의 core.autocrlf 설정에 따라 파일을 CRLF로 변환한다.

Prettier는 줄바꿈 방식을 엄격히 검사하며, CRLF를 허용하지 않고 LF를 요구한다.
Git의 줄바꿈 변환

Windows의 기본 설정인 core.autocrlf=true로 인해 파일을 Git 저장소에서 내 컴퓨터의 작업 디렉토리로 가져오면 CRLF로 변환된다.

ESLint와 Prettier가 적용되지 않은 프로젝트에서는 이 변환이 문제를 일으키지 않는다.
Prettier와 ESLint 규칙의 엄격성

Prettier는 줄바꿈 방식의 일관성을 유지하도록 강제한다.

ESLint는 Prettier 규칙 위반을 오류로 보고한다.

해결 방법

1. Git 전역 설정 변경

리모트 레포지토리를 로컬로 클론할 때, 줄바꿈 방식을 LF로 고정하여 CRLF로 변환되는 문제를 방지한다.

다음 명령을 실행한 후 레포지토리를 삭제하고 다시 클론한다.
```
	git config --global core.autocrlf false
	git config --global core.eol lf
```
- git config --global core.autocrlf false는 Git이 줄바꿈을 자동 변환하지 않도록 설정한다.
  - Windows 환경에서는 기본적으로 core.autocrlf가 true로 설정되어 있어, Git 저장소에서 내 컴퓨터의 작업 디렉토리로 가져올 때 LF를 CRLF로 변환하고, 커밋 시 다시 LF로 변환한다.
  - 이 설정을 false로 변경하면 파일을 Git 저장소에서 내 컴퓨터의 작업 디렉토리로 가져올 때와 커밋 모두에서 줄바꿈 변환이 비활성화된다.
- git config --global core.eol lf는 파일을 항상 LF 줄바꿈 방식으로 저장하도록 강제한다.
  - Git 저장소에서 작업 디렉토리로 파일을 가져오거나 커밋할 때 LF로 고정된다.

2. ESLint와 Prettier 설정 고정을 통한 문제 해결

1번 방법으로 당장의 에러를 해결할 수 있지만, 근본적인 해결책은 아니다. ESLint와 Prettier 설정을 고정하여 줄바꿈 방식을 강제해야 한다. 이를 통해 프로젝트 환경에 종속되지 않고, 팀원들이 운영체제와 관계없이 동일한 규칙을 따를 수 있도록 보장한다. 다양한 운영체제를 사용하는 팀에서도 줄바꿈 문제를 완벽히 해결할 수 있다.

Prettier 설정 추가

Prettier 설정 파일(.prettierrc 또는 .prettierrc.json)에 줄바꿈 방식을 명시적으로 지정한다.
```
{
  "endOfLine": "lf"
}
```
- 이 설정은 Prettier가 항상 LF를 줄바꿈 방식으로 사용하도록 강제한다.
ESLint 규칙 추가

ESLint 설정 파일(.eslintrc.json)에 Prettier의 줄바꿈 규칙 위반을 감지하도록 명시한다. 이를 통해 Prettier 규칙을 ESLint가 강제할 수 있다.
```
{
	"extends": ["plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "lf"
      }
    ]
  }
}
```

🚨 주의: endOfLine: "auto”

간혹 ESLint 규칙에 endOfLine: "auto"를 추가하여 문제를 해결하라는 솔루션이 제시되는 경우가 있다. 그러나 이는 줄바꿈 방식을 강제하지 않고, LF와 CRLF 두 방식을 모두 허용한다는 의미이다.

문제점
- 실제로 수정하지 않은 부분(예: 파일을 열고 저장만 한 경우)이 Git diff에 표시될 수 있다.
- 코드 리뷰 시 팀원들이 어떤 변경이 실제 코드 수정인지, 단순 줄바꿈 수정인지 혼란스러워질 수 있다.
- 이로 인해 협업 과정에서 치명적인 문제를 초래할 수 있다.

3. 프로젝트 VSCode 설정

1번과 2번 방법으로 줄바꿈 문제를 근본적으로 해결했다면, 이제는 Windows 개발자의 편의를 위해 VSCode에서 파일 생성 시 자동으로 LF 방식으로 생성되도록 설정해야 한다.

Windows에서는 기본적으로 VSCode가 새 파일을 생성할 때 CRLF 줄바꿈 방식을 사용하므로, 매번 수동으로 LF로 변경해야 하는 불편함이 있다. 이를 방지하기 위해 프로젝트 루트 디렉토리에 .vscode/settings.json 파일을 생성하고 다음과 같이 설정한다:

{
  "files.eol": "\n",
  "editor.formatOnSave": true
}

files.eol: "\n": 새로 생성되는 모든 파일의 줄바꿈 방식을 LF로 강제한다.
editor.formatOnSave: true: 저장 시 Prettier 등의 포매터를 자동 실행하여 줄바꿈 방식을 다시 한 번 정리한다.

VSCode에서 수동으로 줄바꿈 방식을 변경하는 방법

VSCode에서 줄바꿈 방식을 변경하려면 하단 상태 바에 있는 LF 또는 CRLF를 클릭하면 된다. 클릭하면 상단에 검색창이 열리며 줄바꿈 방식을 선택할 수 있는 옵션이 나온다. 하지만, 이 방법은 현재 파일에만 적용되므로, 앞으로 생성되는 모든 파일에 일관된 줄바꿈 방식을 사용하려면 위에서 설명한 방법처럼 설정에서 기본값을 변경하는 것이 좋다.