[Vue] should always be multi-word vue/multi-word-component-names 에러 해결 방법

 

Vue에서는 컴포넌트의 이름을 단일 단어가 아닌 두 개 이상의 단어를 조합하여 만드는 것을 추천한다고 합니다. 이유는 HTML의 요소와 혼동을 일으킬 수 있는 요소가 발생할 수 있어서 그렇다고 합니다.

 

ESLint를 설치한 경우 단일 단어로 입력했을 경우 에러를 발생시킵니다. 예를 들어 Menu.vue와 같이 작성 했을 경우 에러가 발생하며 TitleMenu.vue로 작성 했을 경우 에러가 발생하지 않습니다.

 

ESLint를 설치한 상황에서 단일 단어로 입력해도 에러가 발생하지 않도록 하는 방법에 대해 알아보도록 하겠습니다.

 

ESLint란?

ESLint란 ES + Lint의 합성어 입니다. ES 는 표준 자바스크립트(ECMA Javascript)를 말합니다.

Lint란 에러가 있는 코드에 표시를 달아두는 것을 말합니다.

 

위와 같이  should always be multi-word  vue/multi-word-component-names 에러가 발생 했을 경우의 해결 방법은 아래와 같습니다.

 

해결 방법

vue.config.js에서 lintOnSave의 값을 변경해주는 것입니다. 기본 값은 true로 되어 있는데 이를 false로 변경해주면 컴포넌트 단일 이름의 에러 인식을 막을 수 있습니다.