[vue] Vue eslint 규칙 설정

Vue3 프로젝트를 생성하고 실행시키는 중 아래와 같은 에러를 발견하였다.

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR  Error: Build failed with errors.

작업을 하다보면 Vue 규칙을 지키기 어렵다.

npm install --save-dev eslint eslint-plugin-vue@next

위 명령어를 입력하여 eslint-plugin을 받은 뒤

프로젝트 내에 .eslintignore 파일과 .eslintrc.js 파일을 추가한다.

 

.eslintignore 

/build/
/config/
/dist/
/*.js

.eslintrc.js

module.exports = {
  root: true,
  parserOptions: {
    parser: "babel-eslint",
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  extends: [
    "standard",
    "plugin:vue/recommended"
  ],
  plugins: [
    "html",
    "standard",
    "vue"
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

 

이후, package.json 파일에서 

eslintConfig 로 묶여져 있는 영역의

"extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
위 부분을 
아래와 같이 변경한다.
"extends": [
      "eslint:recommended",
      "plugin:vue/recommended"
    ],