Vue Style Guide Recommended와 Javascript Standard ESlint 설정

일단 Vue Cli 프로젝트를 만들고 나서, vue 기반 js standard config 확장판을 설치해야 한다.

npm i @vue/eslint-config-standard

그 후에 eslint의 config를 바꿔야 한다.

package.json 혹은 eslintrc.js에서 eslintConfig를 변경한다.

"eslintConfig": {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/vue3-**recommended**",  // recommended로 vue style guide 수정
    "eslint:recommended",
    **"@vue/eslint-config-standard"**  // js standard 확장판 사용
  ],
  "parserOptions": {
    "parser": "@babel/eslint-parser"
  },
  "rules": {}
},

이렇게 extends를 설정하면, 두 개의 설정이 잘 동작하는 것을 알 수 있다.

다만, 만약 두 설정이 충돌되는 때는 어떤 것이 우선 적용되는지 그게 궁금하기는 하다.