VSCode 사용 시 Delete 'CR' eslint(prettier/prettier) 오류 해결 방법 - CRLF, EOL, 엔드라인 시퀀스 알아보기

 

 

 

# 문제점

타입스크립트를 공부하던 중 위와 같은 오류가 발생했다.

실제로 실행은 문제가 없는 오류.

바로  EOL sequence (line break, EOL(end-of-line)) 때문이다.

 

EOL sequence

CR, LF 그리고 CRLF의 방식이 있는데,

운영체제에 따라  기본 방식이 다르다.

 

Microsoft 사의 Windows 는 CRLF (\r\n) 을 기본으로 사용하는 반면  
Unix/Linux 에서는 LF (\n) 만으로 줄바꿈을 하고 있다.  
(Mac 의 초기 버전, 9 버전 이하는 CR (\r) 을 줄바꿈으로 사용)

출처: https://technote.kr/300 [TechNote.kr:티스토리]

 

즉, 나는 윈도우를 사용하고 있고 윈도우의 엔드라인 시퀀스를 eslint 인식하지 못 해 발생하는 오류인 것.

해결 방법은 두가지가 있다.

 

#해결방법

1. EOL sequence 수동 설정

VSCode 하단 우측을 보면 위와 같은 설정란이 있다.

저 부분을 클릭하여 LF로 변경하면 오류가 사라진다.

하지만 깃허브를 이용해 집과 회사 양쪽에서 작업하는데,

둘 다 계속 설정을 해줘야하는 번거로움이 있다.

 

2. ESlint 설정 수정

기존의 prettier 설정 값 중 endOfLine 옵션의 defalut가 'auto'였는데,

prettier 2.0 이상부터 'if'로 변경되었다.

고로  eslint 설정을 변경해주면 해결된다.

 

참고 : https://prettier.io/blog/2020/03/21/2.0.0.html#change-default-value-for-endofline-to-lf-7435httpsgithubcomprettierprettierpull7435-by-kachkaevhttpsgithubcomkachkaev

 

// .eslintrc.js

rules: {
    "prettier/prettier": [
      "error",
      {
        singleQuote: true,
        semi: true,
        useTabs: false,
        tabWidth: 2,
        printWidth: 80,
        bracketSpacing: true,
        // arrowParens: "avoid", // 화살표 함수 괄호 방식
        endOfLine: "auto", // 추가!
      },
    ],

 

arrowParens

이건 논외지만, 프리티어 업데이트를 확인하면서 알게 된 부분.

화살표 함수에서 단일 파라미터에 괄호를 붙이면 "always", 그렇지 않으면 "avoid" 인데

단일 파라미터의 경우 괄호를 붙이지 않는게 더 깔끔해보일 수 있으나

사용성 측면에서 항상 붙이는게 유지보수 등 더욱 일관된 사용성을 보장할 수 있다고 판단하여

기본값이 'always'로 변경되었다고 한다.

 

참고 : https://prettier.io/blog/2020/03/21/2.0.0.html#change-default-value-for-arrowparens-to-always-7430httpsgithubcomprettierprettierpull7430-by-kachkaevhttpsgithubcomkachkaev