PRETTIER : Delete `␍`에러 해결법

vue를 처음 개발하면 몇 가지 에러가 자주 발생한다.

이런 에러는 해결법은 쉬운데 왜 하는지에 대한 설명을 더 추가하고 싶어서 이 글을 쓰게 되었다.

 

 

 

1. PRETTIER 에러 원인

vue를 처음 생성하고 마주한 에러가 있었다.

Delete `␍` 에러 화면과 코드에 거슬리는 물결들...

여기서 생기는 원인은 라인의 끝의 줄바꿈에는 두 가지가 있다.

하나는 \n은 리눅스와 맥에서 발생하고, 또 하나는 \r\n으로 윈도에서 발생하여 운영 체제가 다른 문제로 인하여 생기는 원인이다.

Delete `␍`

물론 간단하지만, 노가다가 필요한 방법이 한 가지가 있다. End Line Sequnce를 LF로 변경하는 것이지만 파일이 많으면 이마저도 좋은 방법이 아니라고 한다.

 

 

 

2. 그래서 해결방법은?

그래서 좀 더 수월한 방법은 다음과 같다. 아래 rules라는 코드를 추가하면 된다.

// vue3 typescript에서는 .eslintrc.cjs
/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  // 중략
  rules: {
    "prettier/prettier": ["error", { endOfLine: "auto" }],
  },
};

원인에 대한 내용이 추가된 스택오버플로우에서 찾았지만, 사실 뭔말인지 아직은 잘 모르겠다. 여기서 생긴 문제는 줄 시퀀스의 끝 선택지로 인한 문제다.

운영체제마다 줄 시퀀스의 끝 기본값이 달라 생기는 문제라고 한다. 윈도의 경우 \r\n이 사용되고, 리눅스나 macOS에서는 \n이 사용되어서 생긴 문제라고 한다. 그래서 vue 프로젝트에서는 이런 방법을 하지만, 다른 프로젝트는 상황에 따라 달라지기에 아래 더 나은 설명이 적혀있는 링크를 남겨두려고 한다.

 

실제로 찾아보면 ESLINT가 아닌 prettier에서 해결방법이 있다. 더 자세한 방법은 prettier 공식문서를 참고하기를 바란다.

 

 

3. 참고링크

오늘도 야근님 : Visual Studio Code 줄 바꿈

 

 

첫 업데이트 : 22. 10. 15

최근 수정 : 23. 01. 28

1) 운영체제에 대한 내용 추가