[React] Expected linebreaks to be 'LF' but found 'CRLF'.

💡 Expected linebreaks to be 'LF' but found 'CRLF'. 오류를 직면했다면, 이제는 당황하지 말자!

목표

• 'LF', 'CRLF'가 무엇인지 설명할 수 있다.
• ESLint 적용 후, Expected linebreaks to be 'LF' but found 'CRLF'. 오류를 빠르게 해결할 수 있다.

 

VSCODE에서 ESLint를 적용하고, Windows PC와 Mac PC를 동시에 사용하게 된다면,

Expected linebreaks to be 'LF' but found 'CRLF'. 오류를 자주 직면하게 된다.

 

여기서, 'LF'는 무엇이고, 'CRLF'는 대체 무엇을 의미할까?

`LF`와 `CRLF` 둘 다 줄바꿈(개행)을 의미한다. 그러다면, 왜 서로 다른걸까?

LF는 Unix/Linux(Mac) 계열에서 사용되며, CRLF는 Windows에서 사용된다. 그렇다. OS 차이이다.

 

이 오류를 자신의 OS에 맞춰 수정하고, 형상관리에 올리게 된다면 상대방이 내려받았을 때 또 오류가 발생한다. 마치 폭탄돌리기처럼 오류를 주고 받게 된다. 서로 다른 시스템 간의 차이를 극복하기 위해서는 ESLint 설정 파일을 꼭 수정해야 한다.

 

🔥 `LF`로 통합하기

.eslintrc.js

module.exports = {
	'linebreak-style': ['error', require('os').EOL === '\r\n' ? 'windows' : 'unix'],
	'prettier/prettier': ['error', { endOfLine: 'auto'} ],
}

`linebreak-style`을 error로 설정하여 에러를 발생시킨다.

ESLint의 autofix를 이용해 에러가 났을 때, EOL(end of line)이 CRLF인 경우 윈도우 설정대로 바꾸고,

아닌 경우 유닉스 스타일(LF)로 바꾸는 설정이다.

 

`prettier/prettier` 설정은, ESLint와 Prettier를 같이 쓰기 위한 설정이다.

`eslint-config-prettier`에서 EOL 관련한 에러를 Auto Fix 해주기 위함이다.

 

위 옵션을 적용하면, 잘 된다  😁

 

출처

• 개인 프로젝트, e-ssama, 2022-08-23

 

Last Updated. 2022. 09. 02.