[Vue.js] Vu ESLint 에러 'multi-word-component-names' 해결 방법 총정리

소개

Vue.js로 개발하다 보면, 컴포넌트 이름이 단일 단어일 경우 ESLint에서 다음과 같은 에러가 발생할 수 있습니다:

"Component name ~ should always be multi-word."

이는 Vue의 공식 스타일 가이드에 따라, 컴포넌트 이름을 두 단어 이상의 조합으로 작성하도록 권장하기 때문입니다. 하지만 특정 상황에서는 이 규칙을 무시하거나 비활성화해야 할 필요가 있을 수 있습니다.
이 글에서는 vue/multi-word-component-names 규칙을 비활성화하거나 무시하는 다양한 방법을 정리했습니다.
또한, 이 규칙의 존재 이유와, 개발 상황에 맞게 이를 활용하는 방법까지 자세히 다룹니다.

---

Vue.js ESLint "Component name ~ should always be multi-word" 에러 해결 방법

1. 간단히 해결하기: lintOnSave 옵션 비활성화

Vue CLI를 사용하는 프로젝트에서는 vue.config.js 파일의 lintOnSave 옵션을 false로 설정하면 ESLint 검사를 완전히 비활성화할 수 있습니다.
다음은 설정 예제입니다

// vue.config.js
const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, // vue/multi-word-component-names 무시
});

 

이 설정을 적용하면 프로젝트 전체의 ESLint 검사가 비활성화되며, vue/multi-word-component-names 에러도 더 이상 발생하지 않습니다.
⚠️ 주의: 이 방법은 프로젝트 전반의 모든 ESLint 규칙을 비활성화하므로 코드 품질 관리가 어려워질 수 있습니다.

---

2. 특정 규칙만 비활성화하기

ESLint의 다른 규칙은 유지하고, vue/multi-word-component-names 규칙만 비활성화하려면 .eslintrc.js 파일에서 해당 규칙을 끌 수 있습니다.

// .eslintrc.js
module.exports = {
  rules: {
    "vue/multi-word-component-names": "off", // 단일 단어 컴포넌트 이름 허용
  },
};

이 방법은 vue/multi-word-component-names 규칙만 비활성화하므로, 다른 ESLint 규칙은 그대로 적용됩니다.

---

3. 특정 컴포넌트만 예외 처리하기

모든 컴포넌트에 대해 규칙을 끄는 대신, 특정 컴포넌트에 대해서만 예외 처리를 설정할 수도 있습니다.
이 경우, vue/multi-word-component-names 규칙에서 특정 컴포넌트를 무시하도록 설정합니다.

// .eslintrc.js
module.exports = {
  rules: {
    "vue/multi-word-component-names": ["error", {
      ignores: ["Home", "About"], // Home.vue와 About.vue는 허용
    }],
  },
};

위 예시는 Home.vue와 About.vue 파일에 대해 단일 단어 이름을 허용합니다.

---

4. ESLint를 완전히 끄고 싶다면?

ESLint 검사가 불필요하다고 판단되면 전체적으로 끌 수도 있습니다.
다음 방법을 사용할 수 있습니다:

1. vue.config.js 설정

// vue.config.js
lintOnSave: false;

1. 실행 명령어로 ESLint 무시

npm run serve --no-lint

⚠️ 주의: ESLint를 완전히 끄면 코드 품질 관리가 어려워질 수 있으므로 꼭 필요한 경우에만 사용하세요.

---

5. 멀티 워드 네이밍 규칙을 따르는 것이 좋은 이유

Vue.js에서 컴포넌트 이름을 두 단어 이상의 조합으로 작성하도록 권장하는 이유는 다음과 같습니다:

1. HTML 요소와의 충돌 방지
   HTML 표준 태그(예: <div>, <button>)와 혼동될 가능성을 줄입니다.
2. 가독성과 명확성 향상
   컴포넌트의 역할과 의미를 더 명확히 전달합니다.
3. 유지보수 용이
   대규모 프로젝트에서 일관성을 유지하고 관리하기 쉽습니다.

따라서 가능하다면 Vue의 스타일 가이드를 준수하여 멀티 워드 네이밍을 사용하는 것을 권장합니다.

---

결론 및 추천

• 가능하면 Vue의 스타일 가이드에 따라 멀티 워드 네이밍 규칙을 따르세요.
• 특정 상황에서만 이 규칙을 무시하려면 .eslintrc.js 파일에서 규칙을 비활성화하거나 특정 컴포넌트에 대해 예외 처리를 설정하세요.
• 개발 편의를 위해 전체 ESLint 검사를 끄고 싶다면 lintOnSave: false 옵션을 활용할 수 있습니다.