[Vue.js 오류] Component name "" should always be multi-word

강의를 듣다가 component 부분에서 에러가 났다.

알아보니 component에 단일 단어가 아닌 두 가지 이상 단어 (파스칼케이스)를 사용하라는 vue에 계략이었고

나는 그 계략에 넘어가지 않을 것이다.

 

---

 

해결법 1.

주석문추가

eslint-disable-next-line

//eslint-disable-next-line 

위에 주석문을 적어주면 해결이 되었지만

매번 component 마다 해줄 순 없는 노릇이다.

---

해결법 2.

ESLint 설정

 

ESLint 가 뭐냐면

ECMA Script + Lint 다

쉽게 설명하면 코딩하다가 규칙을 어기면 에러를 띄어주는 도구라고 생각하면 된다

 

 

참고사이트다.

https://eslint.vuejs.org/rules/multi-word-component-names.html

아래의 코드를 .eslintrc.js에 집어넣으면 무시할 수 있다고 한다.

{
  "vue/multi-word-component-names": ["error", {
    "ignores": []
  }]
}

 

.eslintrc.js 는 프로젝트 안에 없고 따로 설치해줘야 한다.

솔직히 너무 귀찮았다. 간단한 프로젝트인데 npm으로 ESLint를 설치하면서 까지 하고 싶지 않았다.

 

 

그래서 더 쉬운 방법을 찾아냈다.

프로젝트에 package.json 에서 "rules" 안에 아래의 코드를 넣어주면 된다.

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

에러는 사라졌지만 찝찝하다.

 

그냥 Vue의 규칙을 어기지 말고 하란대로 하는 게 맞는 거 같다.