end of line 은 CRLF, LF 가 있다. 자세한 내용
TypeScript 프로젝트에서 eslint, prettier 를 사용하며 관련 이슈를 꽤 많이 만나게 된다.
이유는 eslint 와 prettier 를 사용할 때 eslint 에서 prettier 의 에러도 같이 띄워주는데, prettier 에서 end of line 의 기본값이 LF 이기 때문에, Windows 환경에서 IDE 의 end of line 설정을 CRLF 로 한 개발자들은 이 글에 썸네일과 같은 현상을 마주치게 된다.
지금까지는...
나는 지금까지 저런 오류가 뜰 때 'prettier/prettier': off 를 eslint rule 에 넣고, 자동으로 파일을 저장하면 prettier format 이 돌아가게 하고 CI 에서도 prettier 가 돌아가는 형식으로 대부분의 프로젝트에서 해왔지만, 그게 잘 되지 않는 경우가 어제 있었다.
end of line 을 CRLF 로 설정해놓으면 Windows 에서 파일을 열었을 때 CRLF 로 바꾼 다음, prettier 에서 Delete 'cr' 오류가 뜨고, 저걸 해결하려고 LF 로 바꾸면 내용을 교체한 파일이 아닌데 end of line 이 변경되어 전체 파일이 변경되었기 때문에 PR 에 변경된 파일이 뜬다.
메인테이너나 코드 리뷰어 입장에서 파일이 많이 변경됬다고 뜨면 (CRLF 관련 이슈로 end of line 만 바꿨어도) 좀 피로해지기 쉬울 것 같았고, 경험상 changed +1000... 이 되면 나도 리뷰 전에 긴장하는 편이다.
('이거 언제 다 보지?', '어떤 파일에선 end of line 만 바뀐게 아닐텐데...' 생각이 나같아도 들 것 같았다)
문제가 된 이유
나는 오늘 저런 이유로 나중에 저거 해결해야지~ 하고 저 오류를 무시하기 위해 prettier 과 eslint 확장을 끄고 작업했다. cli 로 pnpm run lint 와 같은 명령어를 구동해 eslint 관련 오류를 잡고 커밋을 올렸다.
작업 중에 유틸 함수를 추가한 부분이 있었는데, PR 전에 그 유틸 함수의 타입 테스트를 추가하지 않은게 생각나 타입 테스트를 빠르게 작성하고 PR 을 올렸다. 다만 타입 테스트에서 eslint 관련 이슈가 발생했다. 빠르게 타입 테스트를 작성하며 eslint 를 cli 로 돌려 관련 오류를 잡는 것을 깜빡한 것이다.
그래서 CI 가 실패하였고, eslint 오류를 해결해달라고 멘션이 왔다. 엄밀히 말하자면 큰 일은 아니다. eslint 오류는 CI 에서 잡기 쉬우며, 발생한 파일도 테스트 관련 파일이고, 위험한 eslint 규칙을 어긴 것도 아니였기 때문이다.
하지만 부끄러웠다. 더 나은 방법이 있었기 때문이다.
prettier 오류를 해결하기 위해 end of line 을 변경하지 않아도, 파일 상단에 prettier 관련 오류를 잠깐 끄는 줄을 넣은 다음 커밋 때만 해당 줄을 지우면 eslint 확장을 끌 필요가 없기 때문이다. eslint 확장을 끄지 않았다면 eslint 오류를 테스트 작성 이후 바로 찾아 해결할 수 있었을텐데 라는 생각이 들었다.
이후
내가 쓰는 4개의 VSCode Profile 인 Default, React, Node.js, Rust 에 end of line 설정을 기본값인 CRLF 가 아니라 LF 로 바꿨다. 이미 CRLF 로 열린 프로젝트는 CRLF 로 설정되어있지만, 적어도 새로운 프로젝트에선 LF 로 설정되어 저런 이슈가 생기는 것을 방지했다.
