Delete `␍`eslintprettier/prettier 오류 해결(feat. VSCODE) 🏃🏃🏃

갑자기 VSCODE에서 파일을 클릭했더니 코드 끝쪽에만 전부 빨간 밑줄이 생기면서 Delete `␍`eslintprettier/prettier 오류가 발생하고 있었다. 아니 도대체 왜! 이게 뭔데! Ctrl+A+K로 정렬을 했지만 사라지지 않았다. 그리고 이 글을 쓰는건 첫번째가 아니라 두번째 발생하고 '아.. 이거 저번이랑 똑같은 오류잖아!?' 라고 생각했지만 뭐였는지 또 기억을 하지 못했다. 그래서 정리를 해두려고 한다!

 

 

위 이미지처럼 똑같이 발생한다면 당황하지 말고 VSCODE 창의 맨 오른쪽 끝의 아래 부분에 파랑색 부분을 확인하면 된다. 아래 이미지랑 똑같은 부분을 확인해보면 CRLF라고 되어있는데 LF로 되어있어야 저 오류가 나지 않는다! CRLF를 클릭하면 CRLF랑 LF를 선택할 수 있게 나오는데 LF를 선택하면 된다. 이걸로 해결 완료 😅

 

 

그리고 CRLF랑 LF가 궁금해져서 다시 찾아보았다. 역시 줄바꿈 관련 약자였었고 궁금증을 해결하기 위해 블로그 검색중 아래 글을 읽고 이해가 되었던 것 같다. 

 

CRLF/LF는 OS에 따라 다른 개행 방식이다. 리눅스와 맥같은 Unix-like System은 LF 방식을 사용하고, 윈도우는 CR/LF 방식을 사용하기 때문이다. 'CR LF는 ‘Carriage Return, Line Feed’의 약자이다. 고전 타자기에서 비롯되었다. 종이를 고정하는 Carriage를 제자리로 미는 동작 (Carriage Return, \r)과 종이를 올리고 줄을 바꾸기 위해 사용한 동작을 (Line Feed, \n) 나타낸다. CR과 LF도 byte code 일 뿐이다. CR은 아스키(문자 인코딩 프로토콜)에서 13 혹은 이진수로 00001101, 마찬가지로 LF도 10, 이진수로 00001010이다.

 

근데! 한가지 더 발견한 점은 위에처럼하면 하나의 파일에만 적용된다는 점..

다른 방법을 사용하기 위해 다시 열심히 검색을 했고 .eslintrc.js 파일에 아래 코드를 추가하면 auto로 변경되기 때문에 CRLF여도 위 에러가 발생하지 않는다. 개행문자를 일괄변경하면 모든 파일에 적용되버려서 같이하는 프로젝트에서는 조금 조심스러웠기 때문에 직관적으로 파일을 확인하여 추가된 것도 확인하고 왜 추가했는지를 설명할 수 있을 것 같았다.

 

"rules": {  // rules에 아래 "prettier/prettier"를 추가
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  }

 

역시 모든지 알고 있어야 기억하고 다음번에 똑같이 헤매지 않을 수 있을 것 같다!