“ 당신은 소프트웨어 품질을 추구할 수도 있고, 포인터 연산을 할 수도 있다. 그러나 두 개를 동시에 할 수는 없다. ”
회사에서 프로젝트 환경을 구성하는 도중 맥 OS 환경에서 또는 윈도우 환경에서 협업을 할 때 맥북에서 작업하던 코드는
분명 이상이 없었는데, 윈도우 환경에서 Pull 받아 작성하니 코드 끝마다 에러를 발생하는 문제가 생겼습니다.
eslint를 적용했을때 이런 문제가 생겨서 발생한 원인과 에러를 정리해 봤습니다.
원인
eslintrc.js 에서 설정한 부분 중.
endOfLine에서 설정한 LF에 문제였습니다.
LF: Line Feed(\n)
CR: Carriage Return(\r)
설명하자면 각각 새로운 줄 바꿈을 바꾸는 방식에 대한 설정값입니다.
LF에 경우 현재 커서의 위치에서 한 줄을 커서의 위치 변화 없이 아래로 내리는 방식이고,
CR은 현재 줄에서 커서의 위치를 맨 앞으로 옮기는 방식입니다..
그래서 에러에 대한 원인을 정리하자면.
운영체제(OS) 별 줄 바꿈을 하는 방식이 상이하기 때문에 발생하는 문제였습니다.
prettier 2.0 이상에서 줄 바꿈 설정 값으로 LF를 사용하는데, 윈도우에서 Enter 누를 경우, CRLF 방식으로 되는데,
이때 CR을 제거한 LF방식으로 바꾸라는 에러로 나오는 것입니다.
해결방안
이런 에러를 해결하기 위해, eslintrc.js 파일에서 endOfline에 내용을 추가하거나 변경하면 됩니다.
// .eslintrc.js
'prettier/prettier': [
'error',
{
arrowSpacing: ['error', { before: true, after: true }],
singleQuote: true,
semi: false,
useTabs: false,
tabWidth: 2,
trailingComma: 'none',
printWidth: 80,
bracketSpacing: true,
arrowParens: 'always',
endOfLine: 'auto' // 이 부분이 lf로 되어있다면 auto로 변경
}
]
auto 설정 값에 대한 설명은, OS 운영체제 별로 설정된 값을 사용하라는 구문입니다.
위와 같이 설정하면 빨간 줄로 도배된 코드창에서 더 이상 에러가 나오지 않는 것을 확인할 수 있습니다.
참고
Prettier · Opinionated Code Formatter
Opinionated Code Formatter
prettier.io
