Vue3 Cli로 생성된 프로젝트 / multi-word-component-names 오류 해결

에러 내용

 

Vue3 Cli로 생성된 프로젝트에서 Router 연습을 하던 중 아래와 같은 에러를 만났다.

 

 

Vue Router를 이용해 Home과 About 컴포넌트를 만들고 연결시켜주니 나타난 에러였다. 에러 내용을 보니 "Component name should always be multi-word => 컴포넌트의 이름은 항상 여러 단어로 되어야 한다." 라는 뜻이었다.

어리둥절 했다... 곧 바로 구글링!!

 

https://eslint.vuejs.org/rules/multi-word-component-names.html

vue/multi-word-component-names | eslint-plugin-vue

 

위와 같은 공식문서의 설명이 있었다. HTML의 예약어들이 한 단어로 되어있기 때문에 컴포넌트 이름과 HTML의 충돌을 방지하기 위해 여러 단어로 된 이름으로 지을 것을 권고하고 있다는 내용이었다.

그렇지만 여러 단어로 이름을 매번 지으면 너무 불편한걸?

 

해결 방법

 

공식 문서의 아래부분에 해결 방법이 있었다. 

 

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

 

이 내용을 추가해주라고 되어 있었다. 그러나 어디에 추가하라는 건지는 없었다. 다시 구글링.

검색해보니 .eslintrc.js 파일에 rules 부분에 추가하면 된다고 했다.

 

 

그러나 나는 직접 Webpack을 설정해서 사용한 게 아니라 Cli를 통해 기본값을 설정해놨기 때문에 eslint파일을 건드릴 수 없었다.

 

두 번째 해결 방법을 찾았다.

 

Cli로 Vue 프로젝트를 생성할 경우 자동으로 생기는 vue.config.js 파일에 'lintOnSave: false'를 추가하면 된다고 했다.

 

 

그러나 잘은 모르지만 이 방법은 lint를 아예 해제시켜버리는 것 같아서 사용하고 싶지 않았다. 그래서 다시 구글링.

 

최종적으로 내가 사용한 방법은 package.json 파일에 eslintConfig에 내용을 추가하는 방법이었다.

 

 

그랬더니 에러가 사라졌다. 오예!

 

참고로 공식문서에서 권장한 방법과 내가 사용한 방법이 약간 다른데,

 

공식문서

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

 

내가 사용한 방법

{
  "vue/multi-word-component-names": 0
  }]
}

 

공식문서 같은 경우에는 ignores에 에러를 무시하고 싶은 컴포넌트의 이름을 일일이 추가해서 사용하는 방법으로 권장되는 방법을 사용하되 예외를 두는 것이다. 내가 사용한 방법은 아예 multi-word 규칙을 꺼버리는 방법으로 필요에 맞춰서 사용하면 될 것 같다.

 

오늘의 에러 기록 끝~~~!