[Vue] 컴포넌트 다중 단어 네이밍 규칙 설정

Vue 프로젝트를 만들고, 코드를 컴포넌트화 시키거나 페이지를 만들기 위해

.vue 파일을 생성해서 name을 설정하다 보면

아래와 같은 오류가 발생합니다.

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

 

 

이 오류는 Vue.js의 linting 규칙 중 하나인 'vue/multi-word-component-names'를 사용하여 컴포넌트 이름을 다중 단어로 지정하도록 하는 규칙입니다. 기본값이 true이기 때문에 따로 설정해주지 않는 이상 name을 두 단어 이상으로 설정해주어야 합니다.

 

이 경우 package.json > eslintConfig > rules에 해당 설정을 아래와 같이 false로 바꿔주고 서버를 재구동하면 오류가 사라집니다.

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