[Vue] should always be multi-word-component 에러 해결 방법 (ESLint 설정)

서론

---

컴포넌트를 만들때마다 하나의 단어로 만들면 아래의 에러가 발생하는 현상을 겪었다. 필자는 급한 김에 접두사에 My 또는 다른 단어를 합쳐 처리했는데 매번 이렇게 처리하는건 아닌것같아서 해결방법에 대해 정리하려한다.
 

---

 

에러 발생 문구

---

1:1 error Component name "Headline" should always be multi-word vue/multi-word-component-names ✖ 1 problem (1 error, 0 warnings)

전체 에러 본문 보기

Compiled with problems:
X

ERROR C:\Users\jkan.DESKTOP-IKN64I8\Desktop\vue_study\vue_fastcam\vue-web\src\components\Headline.vue 1:1 error Component name "Headline" should always be multi-word vue/multi-word-component-names ✖ 1 problem (1 error, 0 warnings)

vue에서는 컴포넌트의 이름을 항상 단일 단어가 아닌 두 개 이상의 단어를 조합하여 만드는 것을 추천한다고한다. HTML 요소와 혼동을 일으킬 수 있는 요소를 아예 제거하기 위해 vue에서는 두개의 단어 이상을 합쳐서 설정을 해야한다고 말한다.
 
ESLint를 설치한 필자 같은 경우 에러 내용을 예로 써보면 Headline이 아닌 MyHeadline 이런식으로 처리하면 해당 에러에서 벗어날 수 있다. 그러나 Headline같이 하나의 단어로 작성하고 싶을 수 있다. ESLint를 설치한 상황에서 어떻게 해야할까?
 
 

---

 

ESLint란?

---

우선 ESLint에 대해 간략히 알아보면,
ESLint는 ES + Lint의 합성어로
ES는 표준 자바스크립트 (ECMA Javascript)를 말하고,
Lint는 에러가 있는 코드에 표시를 달아놓는 것을 말한다.
 
그래서 ESLint를 사용하면 위 처럼 컴포넌트의 이름이 합성어가 아닐 경우 에러가 발생한다.
해결방법은 아래와 같다.
 

---

 

해결 방법

---

첫번째 방법(비추천)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    lintOnSave:false
})

vue.config.js에서 위 처럼 lintOnSave의 속성을 false로 바꾸어주면 컴포넌트 단일 이름의 에러 인식을 막을 수 있다.

두번째 방법(추천)
그러나 위 수정 방식은 eslint를 아예 꺼버리는 방식이다보니 다소 무식한 방법일 수 있다.
따라서, 만약 multi word component만 해결하고싶다면 .eslintrc에서 rules에 'vue/multi-word-component-names': 'off' 문구를 추가해주면 해당 속성만 off할 수 있다.