Delete ␍ prettier/prettier 에러 해결 방법 - VS Code

 

[해결 방법] Delete ␍ prettier/prettier 에러 - VS Code + ESLint + Prettier 세팅 시

프론트엔드 개발을 하다 보면 Prettier와 ESLint를 함께 사용하는 프로젝트에서 아래와 같은 에러를 만날 수 있습니다.

Delete `␍` prettier/prettier

특히 Windows 환경에서 코드를 작성할 때 자주 발생하는 문제인데요, 이번 포스팅에서는 이 에러의 원인과 해결 방법을 정리해보겠습니다.

❓ prettier/prettier Delete ␍ 에러 원인

이 에러는 줄바꿈(Line Ending) 방식의 차이 때문에 발생합니다.
운영체제에 따라 기본 줄바꿈 방식이 다르기 때문인데요:

• Windows: CRLF (\r\n)
• macOS / Linux: LF (\n)

Prettier는 기본적으로 LF를 사용하도록 설정돼 있는 경우가 많기 때문에, Windows에서 CRLF로 저장된 파일을 저장하면 Delete ␍ 에러가 발생하는 것입니다.

✅ 해결 방법: ESLint 설정 수정

eslint 설정 파일(.eslintrc.js 또는 .eslintrc.json)에서 Prettier 관련 설정에 다음 옵션을 추가해 주세요:

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

🔍 설명

• endOfLine: "auto" 옵션은 현재 OS에 맞는 줄바꿈 방식을 자동으로 사용하도록 설정해줍니다.
• 이를 통해 팀원들이 사용하는 운영체제가 다르더라도 줄바꿈 문제로 에러가 발생하지 않게 됩니다.

🧩 예시: .eslint.config.mjs

{
  "plugins": ["prettier"],
  "extends": ["plugin:prettier/recommended"],
  {
    rules: {
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/no-floating-promises': 'warn',
      '@typescript-eslint/no-unsafe-argument': 'warn',
      "prettier/prettier": [
        "error",
        {
          endOfLine: 'auto',
        }
      ],
    },
  },
}

💡 추가 팁: VS Code 설정도 함께 확인하세요

VS Code에서 저장 시 자동으로 Prettier가 적용되도록 하려면, settings.json에 다음 설정이 있는지 확인하세요:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

---