[Vue.js] Component name "Login" should always be multi-word vue/multi-word-component-names 에러 해결 방법

Vue.js 에서 Login.vue 라는 컴포넌트 이름을 사용했더니 아래와 같은 에러가 났다.

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

 

vue 에서는 component 의 이름을 항상 단어의 조합으로 만들도록 추천한다.

예를 들면 Login.vue 같은 경우는 위처럼 multi-word-component-names 라는 에러가 난다.

이와 같이 에러가 나는 이유는 html 요소와 혼동을 일으키지 않기 위해서 라고 한다.

 

ESLint = ES + Lint

ES 는 ECMA Script, 즉 표준 javascript 를 의미하고,

Lint 는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다.

즉, ESLint는 자바스크립트 문법에 에러를 표시해주는 도구라고 생각하면 된다.

 

해결방법

package.json 의 rules 에 아래와 같이 해주고 npm run serve 하면 오류가 사라진다.

"vue/multi-word-component-names" : 0

 

 

참고: 후니의 개발이야기  https://islet4you.tistory.com/entry/ESLint-%EC%A0%81%EC%9A%A9%EC%8B%9C-multi-word-component-names-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95