[Vue.js][문제해결] error Delete `␍` prettier/prettier

팀 프로젝트를 깃허브에서 Pull 하고 실행했는데 아래와 같은 메시지가 포함된 에러가 발생했다. 이 문제는 OS별로 줄 바꿈 방식이 다르기 때문이라고 한다(macOS와 Linux는 LF, 윈도우는 CRLF가 기본값). prettier 2.0 이상에서는 LF를 사용하는데 윈도우에서는 엔터 키를 누를 경우 CRLF 방식으로 줄 바꿈이 이루어 지기 때문에 에러가 발생한다.

error  Delete `␍`  prettier/prettier

 

.eslintrc.js 파일에 아래 코드를 [그림 1]과 같이 추가하면, npm run serve 실행이 정상적으로 된다.

endOfLine: "auto"

 

[그림 1] rules에 endOfLine: "auto" 코드 추가

 

하지만 component의 코드 작성 후 저장하면 에러가 발생한다. 따라서 이에 추가하여 "Ctrl + ,"로 설정 진입 후 [그림 2]와 같이 Validate 검색 후 settings.json를 열고 아래 코드를 추가한다.

[그림 2] Validate 검색 후 settings.json

 

"eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "eslint.workingDirectories": [{ "mode": "auto" }],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": false,