[VueJS] Error : vue/multi-word-component-names

https://simplevue.gitbook.io/intro/02.-component

02. Component 구성해보기 - simpleVue

위 과정을 따라 하다 보면 아래와 같은 에러가 발생한다.

Component name "Menu" should always be multi-word vue/multi-word-component-names

쉽게 따라 해 보라고 해놓곤 두 번째 챕터부터 에러가 발생해 따라 할 수 없는 안타까운 상황이 발생해 버렸다.

 

이 에러는 Eslint와 같이 사용할 때 발생하는 에러인데, vue에서 component명을 만들 때 반드시 단어의 조합(CmmMenu)으로 지어야 한다는 의미이다.

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

 

그렇다면 당연히 단어의 조합으로 만들면 되겠지만 우선 저 simpleVue를 따라 하기 위해 저 에러를 무시(?) 하는 방법에 대해 배워보자.

 

vue/cli를 사용해서 프로젝트를 만들었다면 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'처럼 특정 파일만 지정해줄 수 있다.