진행 중이던 프로젝트를 인계받아 시작하게 되었는데,
vscode에서 풀도 푸시도 그 어떠한 것도 작동하지 않았다.
권한은 분명히 있고 깃허브 연동도 잘 되어있는데 무슨 문제일까 싶어 원래 담당하시던 분께 여쭤봤는데 결론적으로
1. husky 라이브러리 사용으로 ESLint, Prettier 자동테스트에서 오류 발생
2. 오류가 난 이유 - MAC에서 작업된 파일이 Window에서 실행되면서 줄바꿈 오류 발생
Mac vs Windows: 줄바꿈 방식 차이
- LF (Line Feed): Unix 기반 시스템(macOS, Linux)에서 사용하는 줄 바꿈 문자. \n으로 표시.
- CRLF (Carriage Return + Line Feed): Windows 시스템에서 사용하는 줄 바꿈 문자. \r\n으로 표시.
이처럼 두 운영 체제가 다른 방식을 사용하다 보니, 한 환경에서 작업한 파일을 다른 환경에서 열었을 때 줄바꿈 방식의 차이로 문제가 생길 수 있다...
특히, Prettier 2.0 이상부터 기본 줄바꿈 방식이 LF로 설정되어 있어, Windows 환경에서는 줄 바꿈 규칙 충돌로 인해 Delete '␍' 오류가 발생한다!!
.eslintrc.json 파일과 .prettierrc 파일에 옵션을 추가해줘야 한다!
Prettier와 ESLint 역할 구분
- ESLint: 코드의 스타일 및 품질 문제를 분석하고 경고/오류를 표시하는 역할
- Prettier: 코드 스타일을 자동으로 포맷팅하여 일관된 코드 스타일을 유지
.eslintrc.json에서 prettier/prettier 규칙을 설정해 Prettier의 특정 규칙을 강제할 수 있지만, Prettier 자체의 동작 방식은 여전히 .prettierrc 설정에 의해 관리된다
따라서, Prettier가 동작하는 기본 설정을 .prettierrc에 명시적으로 추가하는 편이 좋다!
// .estlintrc.json
{
/* ... */
"rules": {
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
]
}
}// .prettierrc
{
/* ... */
"endOfLine": "auto"
}
이렇게 추가해주면 명시적으로 Prettier에 대한 규칙을 추가한 거라서 맥과 윈도우 사이의 줄바꿈 방식 오류는 발생하지 않는다!
이렇게 수정해주면 ESLint와 Prettier 테스트를 자동으로 실행해주는 husky에서도 오류가 나지 않아 푸시와 커밋이 가능하게 된다!
