[VSC] Delete `␍` eslint (prettier/prettier) Error 해결방법

맥 os 환경에서 vue 프로젝트를 만들고 window os에서 git clone을 받아 작업을 하려는데 아래와 같은 에러가 발생했다.

 

???

집에서 작업할땐 분명 에러가 안났는데 갑자기 왜 에러가 날까 싶었다.

찾아보니 Window와 UNIX/Linux 사이의 줄바꿈 방식 (endOfLine)에 대한 차이 때문이었다.

 

옛날에 쓰던 타자기 시절부터 있었던 용어라고 하는데 진짜 옛날 타자기를 생각하니 아래 방식이 이해가 된다.

 

- CR (Carriage Return) \r : 현재 커서를 줄 올림 없이 가장 앞으로 옮기는 동작

- LF (Line Feed) \n : 현재 커서는 그자리에 그대로 둔 상태에서 종이만 한 줄 올려서 줄을 바꾸는 동작

 

각 os별 default 줄바꿈 방식은 아래와 같다.

- window : CRLF (\r\n) 

- unix/linux : LF (\n) 

 

근데 줄바꿈을 할 때 굳이 2byte를 사용할 필요가 없기 때문에 메모리/스토리지 절약을 위해 CR 또는 LF만 사용하기도 했다고 한다.

 

해결방법

1. 아래처럼 VSC 의 맨 아랫 줄에 CRLF라고 되어 있을 것이다. end line 시퀀스의 끝 선택

 

 

2. CRLF 를 LF로 변경해주면 에러가 사라진다.

 

근데 문제는 파일 하나하나 일일이 눌러가며 바꿔줘야한다. 

근본적으로 해결하는 방법은 prettier 설정을 넣어주는 것이다.

 

3. .eslintrc.js 설정을 추가하자

'prettier/prettier' 속성에 endOfLine : 'auto' 를 추가해준다. 해결 완.

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    parser: '@babel/eslint-parser',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-unused-vars': 'warn',
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: true,
        useTabs: false,
        tabWidth: 2,
        trailingComma: 'all',
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
        endOfLine: 'auto', // 해당 부분 추가!
      },
    ],
  },
};