ESLint 및 Prettier 줄바꿈 오류 해결 방안

문제 발생 상황

환경:

• 운영 체제는 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로 변환됩니다.

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이 줄바꿈을 자동 변환하지 않도록 설정합니다.
• git config --global core.eol lf: 파일을 항상 LF 줄바꿈 방식으로 저장하도록 강제합니다.

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

ESLint와 Prettier 설정을 고정하여 줄바꿈 방식을 강제하는 방법입니다.

Prettier 설정 추가

{
  "endOfLine": "lf"
}

ESLint 규칙 추가

{
  "extends": ["plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "lf"
      }
    ]
  }
}

주의: endOfLine: "auto"는 줄바꿈 방식을 강제하지 않으므로, LF와 CRLF 두 방식 모두 허용합니다.

3. 프로젝트 VSCode 설정

Windows 개발자의 편의를 위해 VSCode에서 파일 생성 시 자동으로 LF 방식으로 생성되도록 설정합니다.

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

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

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

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

결론

위 해결 방법을 통해 운영 체제 간의 줄바꿈 방식 차이로 인해 발생하는 문제를 완벽히 해결할 수 있습니다. 이 방법을 프로젝트 초기 설정에 포함시키면, 줄바꿈 문제로 인한 불필요한 시간 낭비를 방지하고, 모든 팀원이 동일한 환경에서 작업할 수 있는 기반을 마련할 수 있습니다.