[eslint] error Component name "Discount" should always be multi-word

Eslint와 같이 사용해서 발생하는 에러로, Vue에서는 컴포넌트 이름을 항상 단일 단어가 아닌 두 개 이상의 단어를 조합하여 만드는 것을 추천.

(HTML 요서와 혼동을 일으킬 수 있는 요소를 제거하기 위해서 두개의 단어 이상을 합쳐서 설정 권장)

 

* 해결방법:

1. vue/cli 를 사용해서 프로젝트를 만들면 생성되는 vue.config.js 파일을 하기와 같이 수정하고,

서버 재실행.

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
});

2. package.json 파일 내 "rules" 항목에 하기와 같이 추가하고,

서버 재실행.

"rules": {
   "vue/multi-word-component-names": "off"
}

 

3. eslintrc.js 파일이 있는 경우에는:

하기와 같이 추가.

"rules" : {
    "vue/multi-word-component-names": ["error", {
        "ignores": ['default'] // default는 모든파일에 적용, 'login', 'Header' 등 특정 파일만 지정할 수도 있음.
    }]
}