재시작하면 다시 에러가 생긴다. 그래서 방법을 다른 방법을 찾았다.
vscode에서 typescript react 프로젝트를 하다가 eslint 때문에 자꾸 에러가 났다.
매 줄마다 Delete "CR" 라는 에러를 뱉어서 임시적인 해결방법으로 에디터 하단 중앙쪽에 CRLF를 눌러 LF로 변경해주면서 사용했다. 여기서 LF는 unix 환경에서 쓰이는 줄바꿈 관련 내용은 아래와 같다.
프로그래밍을 하다 보면 문자열의 줄 내림을 위해서 \n을 쓰는 경우가 있을 것이다. 그런데 윈도우즈에서 이것저것 하다 보면 단순히 \n만이 아닌 \r\n을 만나게 된다. 과연 이것은 무엇일까? \n은 Line Feed(
LF
)
란
의미를 가지며 일반적으로 New Line이라고 읽는다.
// ...
LF만 가지 고도 충분히 한 줄을 내린다는 것을 표현할 수 있었다.
그래서 Unix-like OS에서는 한 줄 내림을 LF만 가지고 표시한다.
재미있는 점은 Windows OS에서는 한 줄 내림을 전통적인 방식의 CRLF를 쓴다는 점이다.
즉, 윈도우를 사용하기 때문에 겪는 에러였다. 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"
}
}
}
JSON
복사
"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 설정과 에러 해결에 나처럼 애를 먹고 있을 것 같아 많은 도움이 되었으면 한다.
