[ ERROR ] eslint와 prettier 충돌

Delete '␍'
Replace '......' with '↹↹'
Replace '⏎⏎}' with '};'

• ␍ : Carriage Return의 약자로 현재 라인에 커서를 뒀다가 맨 앞으로 옮기는것을 말한다.
• ↹ : tab
• .. : space
• ⏎ : enter

이 오류는 eslint와 prettier가 충돌해서 발생하는 것으로, prettier 2.0 이상부터 endOfLine 기본 옵션이 'auto'에서 'if'로 변경되어 발생하는 에러라고 한다.

---

해결 방법

1. eslint.js에 endOfLine: "auto" 작성 (사용 불가)

구글링 결과 .esLint.js 또는 .eslint.json에 다음과 같은 문구 를 추가하면 해결 할 수 있다는 글이 대다수 였으나, 나의 경우 이미 상용화된 프로젝트에 새로운 파일을 추가하는것이어서 기본 세팅이 완료된 상태였다.

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

---

2. vscode 하단의 CRLF를 LF로 변경

---

3. vscode 기본 설정을 LF로 변경(새로운 파일 생성 시 적용)

file > preferences > Settings > eol 검색 > Files:Eol \n(LF) 선택

---

4. vscode 의 Format On Save 와 Default Formatter 설정 확인

• Format On Save : √
• Default Formatter : Prettier

---

결과

사용이 불가능한 해결방법 1을 제외한 모든 방법을 시도한 후 파일과 vscode를 여러번 재시작해봤지만 오류가 해결되지 않아 eslint를 끄고 사용하는것으로 결정했는데, 다음날 컴퓨터를 켜서 시도해보니 오류가 없어졌다(...?!)

→ 설정을 LF로 변경해보고 재실행으로도 해결이 되지 않을때는 아예 컴퓨터를 다시 시작 해보자....

 

+ 12/23

다시 같은 오류가 발생했다.

결국 ESLint를 삭제하고 Prettier ESLint로 재설치해 진행했더니 오류가 발생하지 않았다.

위 방법을 다 실행해 본 이후에도 오류가 발생한다면 ESLint 대신 Prettier ESLint를 사용하는것을 추천한다.

---

CRLF와 LF의 차이

🔗 https://velog.io/@jakeseo_me/LF%EC%99%80-CRLF%EC%9D%98-%EC%B0%A8%EC%9D%B4-Feat.-Prettier

LF와 CRLF의 차이 (Feat. Prettier)

CRLF

• \r\n : 커서를 맨 앞으로 되돌리기 이후 종이를 한 칸 올리기 (Carriage return + Line Feed)
• 이전 타자기에서의 줄넘김 개념을 그대로 가져온것.
• windows에서 줄넘기 값의 기본값으로 사용한다.

LF

• \n : 종이를 한 칸 올리기 (Line Feed 전용)
• 현대 디지털 기기의 줄넘김을 말한다.
• linux에서 많이 쓴다.

---

CRLF와 LF가 발생시키는 문제

Prettier 공식문서 중 End of Line에 대한 부분에서 이 오류가 왜 발생하는지를 알 수 있다.

컴퓨터 상에서 LF와 CRLF는 다른 바이트 코드로 인식되기 때문에 개발자가 정확히 어떤 소스코드를 변환시켰는지 기록하는데 잡음이 된다.
따라서 Prettier 2.0.0부터는 LF로 강제시키는것으로 변경되었다.

---

References.

https://noogoonaa.tistory.com/62

VSCode에서 발생하는 Delete `␍` eslint (prettier/prettier) 해결방법

https://velog.io/@suyeon-hong/eslint%EC%99%80-prettier-%EC%B6%A9%EB%8F%8C%EB%A1%9C-%EC%9D%B8%ED%95%9C-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95

https://bogyum-uncle.tistory.com/155

[RN] Delete 'CR' eslint(prettier/prettier)

https://jw910911.tistory.com/90

개발 용어 : 캐리지 리턴(CR), 라인 피드 (LF) 알아보기

 

https://m.blog.naver.com/taeil34/221325864981