eslint와 prettier 충돌로 인한 오류 해결 방법

📌 오류문구

Delete ··
Insert ␍⏎
Replace ·· with ↹

팀프로젝트 하면서 계속 이런 오류가 생겼다.
처음엔 이게 무슨말인가 당황스러웠지만 하도 많이 봐서 이제는 익숙해져버린..
eslint와 prettier가 충돌해서 생기는 오류라고 한다.

·· : space
␍⏎ : enter
↹ : tab

외계어같던 저 문구들은 각각 space, enter, tab을 표현한 문구였다.

📌 해결방법

Replace ·· with ↹

이 오류는 space 부분을 tab으로 바꾸라는 뜻인데 eslint에서는 space를 이용하고 prettier에서는 tab을 사용하기때문에 발생하는 오류라고 한다. 그래서 eslint 설정값을 바꿔주면 해결된다.
- eslintrc.js파일에서 useTabs: false로 수정하기

 rules: {
        'prettier/prettier': [
            'error',
            {
                useTabs: false,
            },
        ],
    },

Delete ␍

window와 linux에서 사용하는 줄넘김값이 달라서 생기는 문제
- window(CRLF), linux(LF)

✔ 파일 하단에 CRLF 라고 써있는 부분을 눌러 LF로 수정해주기(각 파일마다 설정해줘야함)
✔ eslintrc.js파일에서 endOfLine: 'auto' 추가하기

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

✔ vscode 기본 설정을 LF로 바꾸기(새로운파일 생성시 적용)
file -> preferences -> Settings -> 'eol'검색 -> Files:Eol \n 선택하기 (\n : LF, \r\n : CRLF)

✔ vscode 설정 확인하기
- Format On Save에 체크가 되어있는지, Default Formatter가 Prettier로 되어있는지 확인하기

👩 그리고 다 해보았지만 해결이 안 됐던 나는 Format On Save 체크를 해제하고 오류가 난 부분을 찾아 일일이 수정해주었다...
새벽에 이것때문에 아무것도 못하고 멘붕이었는데 이렇게라도 작업을 진행할 수 있어 다행이었다. 호옥시나 나처럼 뭘해도 오류가 사라지지않는 분들은 자동수정기능을 끄고 수정해보시길..