vue.js + Vetur (VS Code Extension)로 설정하면 파일의 auto format에서 오류가 발생했습니다.

조금 사내 GUI를 만들어야 한다는 태스크가 실은 있었습니다.

하지만 잠시는 그다지 우선도도 높지 않아 방치하고 있었습니다만, 이제 재개할까라고 생각 여러가지 조사하고 있었습니다.

아니, 지금은 편리 해지고 있습니다. 3개월 전 정도는 이렇게 없었다고 생각하지만.

Vue.js install
create-nuxt-app 입니까? 아니 아니 슈퍼 편리. Vue.js + Element로 가자.

・・・입니다만, 신규 프로젝트를 만든 후, 페이지 편집 등을 실시해, autosave로 자동 성형이 걸린 순간부터는 빠져서 그 해결 방법의 메모.

덧붙여서 그 시점에서 넣었던 것은,

Vue.js Extension Pack

다만, 설치해 아무것도 하지 않으면 이하의 에러에 들어가는 모양.

멈춘 오류

뭔가 파일을 변경하고 save하면 자동 성형이 걸린다.

그러나 이 상태라면 npm run dev 가 에러를 토하고 이끼.

해결책

여기 을 보고 해결.

구체적으로 자신이 한 것은 이하의 점. ( Solutions 라고 쓰여 있는 곳 이후를 했다)

ESLint Extension 추가 설치

settings.json 에 다음을 더한다

  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "html",
    "css",
    "javascript",
    "javascriptreact",
    { "language": "vue", "autoFix": true },
    { "language": "vue-html", "autoFix": true }
  ],

package.json 에 다음을 더한다

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": "plugin:vue/recommended",
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

이제 해결되었습니다.

Vetur나 Prettier를 개별적으로 넣고 있는 분도 같은 문제에 빠진다고 생각하므로, 이것으로 해소하는 것이 아닐까 생각합니다.

도움이되면 다행입니다.