ESLint + Prettier에서 Delete cr 에러가 나는 이유

prettier, eslint에서 endOfLine을 "auto"로 두자

목차

1. 상황: 맥에서만 작성했던 코드를 윈도우에 클론했더니

2. 원인: eslint-plugin-prettier

3. 해결: eslint.config.mjs의 prettier 세팅 수정

---

1. 상황: 맥에서만 작성했던 코드를 윈도우에 클론했더니

Delete `␍` 에러가 엄청 뜬다

 

윈도우 환경에서 ESLint 사용 중 Delete ␍ eslint(prettier/prettier) 에러가 발생하는 원인은 줄바꿈(CRLF ↔ LF) 불일치다.

␍는 Windows의 CRLF 줄바꿈에 포함된 Carriage Return(\r) 문자이며,
ESLint에서 실행되는 Prettier 규칙이 LF만 허용할 때 발생한다.

 

현재 사용하던 eslint 규칙이 다른 팀프로젝트에서 쓰던걸 거의 그대로 가져온 건데, 나와 팀원 모두 iOS 환경으로만 개발을 해서 발생하지 않았던 에러였던 것이다.

 

LF만 허용하도록 세팅을 해둬서 window에서 자동으로 적용된 CR에 에러를 보였던 것

 

내가 부트캠프에서 받아서 쓰던 맥북을 반납해서 이제 9년차에 접어든 내 엘지 노트북을 사용해야하기 때문에 수정을 해야한다.

---

2. 원인 eslint-plugin-prettier

현재 eslint-plugin-prettier 플러그인을 사용하고 있는데, eslint-plugin-prettier를 사용하는 경우

'prettier/prettier': 'error'

 

 

처럼 옵션 없이 규칙을 활성화하면 Prettier의 기본값인 endOfLine: 'lf'가 강제로 적용된다.

이때 .prettierrc에 endOfLine: "auto"가 있어도 무시된다.

이 플러그인을 사용하면 ESLint 규칙에 전달된 옵션이 Prettier 설정보다 우선되기 때문에

eslint.config.mjs 파일을 수정해야된다.

 

---

3. 해결: eslint.config.mjs의 prettier 세팅 수정

eslint.config.mjs 파일에서 prettier/prettier에 해당하는 옵션을 수정해주면 된다.

// 기존 규칙
'prettier/prettier': 'error',

// 수정된 규칙
'prettier/prettier': [
  'error',
   {
      endOfLine: 'auto',
    },
],

 

만약 eslint에서 prettier 플러그인을 사용하지 않고 있다면 .prettierrc에서 endOfLine 옵션을 "lf"에서 "auto"로 바꾸면 된다.

 

 

 

 

 

참고

https://sasca37.tistory.com/301#google_vignette

개행(줄바꿈)문자 - CRLF(\r\n), CR(\r), LF(\n) 차이점 정리

https://firsteast.tistory.com/148#google_vignette

Delete `␍` eslint (prettier/prettier) 에러(LF, CRLF의 차이)