[Solved] Vue Component name multi-word 에러 전체 해제하기

매번 Vue Project 생성 할 때 마다 발생하는 multi-word 컴포넌트 네이밍 에러를 해결하는 방법을 정리해보자.

원인

원인은 당연하게도 Component 네이밍을 하나의 단어로 했기 때문이다. 

 

해결책

해결책은 공식 홈페이지에 나와있다. 참고링크: https://eslint.vuejs.org/rules/multi-word-component-names.html

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

 

공식 홈페이지에서는 ignores에 배열로 내가 원하는 컴포넌트 네임을 하나씩 넣어주라고 한다.

package.json 파일에 eslintConfig 부분을 수정해주면 되는데,

아래코드는 Streaming.vue라는 컴포넌트의 multi-word 네이밍 규칙을 무시하기 위한 코드이다.

하지만 내가 원하는 건 이렇게 하나씩 넣어주는 것이 아니라 해당 규칙 자체를 무시하는 것이었다. 바로 아래로 내려가보자.

//...
"eslintConfig": {
    "root": true,
    "env": {
        "node": true
    },
    "extends": [
        "plugin:vue/vue3-essential",
        "eslint:recommended"
    ],
    "parserOptions": {
        "parser": "@babel/eslint-parser"
    },
    "rules": {
        "vue/multi-word-component-names": [
            "error",
            {
                "ignores": [
                    "Header"
                ]
            }
        ],
      "no-unused-vars": "off"
    }
},
//...

 

 

근데, 프로젝트 전체에서 multi-word 네이밍 규칙을 없애고 싶다면?

아래처럼 "off"로 설정해주면 된다. 간단!

참고로 어떤 블로그에서는 ignores: ["default"]로 넣어주면 전체 적용이 된다고 했지만, 나의 경우 작동 되지 않았다.

"rules": {
      "vue/multi-word-component-names": "off",
      "no-unused-vars": "off"
}