[vue.js] Error : vue/multi-word-component-names

구성 요소 이름 "스피너"는 항상 다중 단어 vue/multi-word-component-name이어야 합니다. 라는 error가 떴다.

---

이 에러는 Eslint와 같이 사용할 때 발생하는 에러인데,

vue에서 component명을 만들 때 반드시 단어의 조합(CmmMenu)으로 지어야 한다는 의미이다.

이는 html 태그와 헷갈리지 않게 하려고 그렇게 설정해놨다고 한다.

 

해결하려면 경고메세지와 같이 컴포넌트명을 단어의 조합으로 바꿔도 되지만

 

<해결방법>

이 에러가 아에 안뜨게 하려면, vue.config.js 파일에 lintOnSave: false를 추가해주면 된다.

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

 

이렇게 바꿔준 후에 npm run serve 를 이미 돌리고 있다면 서버를 끄고 다시 재실행 해야한다.

---

추가적으로 eslintrc.js 파일이 없어서 위와 같이 해결했으나

만약 eslintrc.js 파일이 존재한다면 아래와 같이 추가해주면 된다.

rules : {
    "vue/multi-word-component-names": ["error", {
        "ignores": ['default']
    }]
}

default는 모든 파일에 적용이고 직접 'Main', 'Header'처럼 특정 파일만 지정해줄 수 있다.