vscode typescript eslint에서 Delete "CR" 에러 해결 Fix Delete "CR" error in typescript+eslint+vscode

재시작하면 다시 에러가 생긴다. 그래서 방법을 다른 방법을 찾았다.

~~vscode에서 typescript react 프로젝트를 하다가 eslint 때문에 자꾸 에러가 났다.~~

매 줄마다 Delete "CR" 라는 에러를 뱉어서 임시적인 해결방법으로 에디터 하단 중앙쪽에 CRLF를 눌러 LF로 변경해주면서 사용했다. 여기서 LF는 unix 환경에서 쓰이는 줄바꿈 관련 내용은 아래와 같다.

프로그래밍을 하다 보면 문자열의 줄 내림을 위해서 \n을 쓰는 경우가 있을 것이다. 그런데 윈도우즈에서 이것저것 하다 보면 단순히 \n만이 아닌 \r\n을 만나게 된다. 과연 이것은 무엇일까? \n은 Line Feed(

즉, 윈도우를 사용하기 때문에 겪는 에러였다. eslint 관련 설정을 맥 환경의 개발자들에게 맞춤으로 제공하기 때문인 것 같다. m1 칩이 출시되어 맥으로 넘어가고 싶다는 생각이 많이 들고 있었는데 이런 귀찮은 일까지 겪으니 더욱 마음이 동하는 것 같다. 어쨌든 아래와 같이 에러가 뜨지 않고, 매번 파일을 생성할 때마다 CRLF를 LF로 변경해주는 수고를 안해도 되는 .eslintrc.json 파일은 다음과 같다.

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "plugin:react/recommended",// Uses the recommended rules from @eslint-plugin-react"plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "linebreak-style": ["none"],
    " global-require ": 0,
    "semi": 2,
    "@typescript-eslint/explicit-function-return-type": [
      "warn",
      { "allowTypedFunctionExpressions": true }
    ]
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

"linebreak-style": ["none"], 가 rules 안에 추가되어 있다. CRLF -> LF를 매번 바꾸는 게 너무 성가셨는데 이 에러를 해결하기 바로 전에 해결한 에러가 explicit-function-return-type에 대한 에러다. "Missing return type on function"이라는 경고를 계속 띄워줘서 성가셔서 변경하는 와중에 " [ ] " 를 이용해 내부에 "warn", "error"로 설정했을 때 정상적으로 동작하는 것을 알 수 있었다. 시험 삼아 "none"을 설정해보니 경고를 띄워주지 않는 것을 확인했다.

linebreak-style 속성에도 0을 주라는("none"을 적으면 integer을 줘야 된다고 에러가 발생한다.) 조언들을 따라 해보았지만 에러는 해결되지 않았고 위와 같이 배열처럼 넣어주니 해결되었다.

# 해결

위의 방법으로 해결했다가 프로젝트를 다시 켜서 파일을 생성하고 진행하면서 npm start를 해보니 Delete "CR" 에러가 다시 발생했다.

그 결과 스택오버플로우의 아래 정보를 보고

Setting(Ctrl + ,) -> "files eol" 검색 -> /n 선택

이렇게 하고 나면 기존 파일들은 LF로 변경해줘야 하지만 이제부터 생성하는 모든 파일들은 LF로 생성되기 때문에 매번 CRLF로 생성되는 파일들이 LF로 생성된다.

이 옵션을 바꿨던 기억이 있는데 원래 auto로 되어 있었다가 /r/n으로 선택했던 것 같다. 윈도우이기 때문에 auto로 했을 때도 CRLF로 생성된 것이고 /r/n으로 선택하면 오히려 CRLF로 fix해버리는 것인데 그 당시에 이해도 하지 못하고 따라해서 이런 실수가 생긴 것 같다.

windows 환경에서 vscode로 typescript + react를 시작하는 사람들이 eslint + prettier 설정과 에러 해결에 나처럼 애를 먹고 있을 것 같아 많은 도움이 되었으면 한다.