[Vue] error : Component name should always be multi-word 오류 해결 방법

오류 발생 삐용삐용

 

 

위와 같은 오류는 ESLint 사용 시 볼 수 있는 오류 중 하나이다.

 

 

 

ESLint는 ES + Lint이다.

 

ES는 EcmaScript, 즉 자바스크립트를 의미하며,

Lint는 프로그래밍에서는 에러가 있는 코드에 표시를 해주는 것을 의미한다.

 

 

한 마디로 자바 스크립트 코드 중 문제가 될 만한 문법 등을 식별하기 위한 분석 도구라는 것이다.

 

 

 

그래서 저 오류 코드는 왜 발생하냐?!

 

Vue에서 컴포넌트 이름을 설정할 때 반드시 두 단어 이상의 조합으로 설정하도록 제한해 두었기 때문이다.

 

 

 

HTML 태그와 헷갈리지 않게 하려고 그랬다고 한다....지만.....

 

일단 클론코딩을 진행하는 중이었기에 조합하지 않고도 사용할 수 있도록 환경을 설정해야겠는걸 ^^7

 

 

 

 

 

 

[ 해결 방법 ]

 

 

 

1. vue.config.js 파일에서 해결

 

 

해당 경우는 @vue/cli를 활용해 프로젝트를 만들었을 경우이다.

( 나 또한 이 경우에 속했다. )

 

 

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

 

vue.config.js 파일로 이동해  lintOnSave : false  를 위와 같이 추가해준다.

 

--> 작동이 잘 된다. 굿 b

 

 

 

 

2. package.json 파일에서 해결

 

 

다음으로는 json 파일로 가서 해결하는 법이다. 

( 이 경우에도 속했다. )

 

"rules": {
   "vue/multi-word-component-names": "off"
}

 

 

 

package.json 파일로 이동해 "rules" 라는 항목에 위 코드를 추가해주면 된다.

 

 

--> 역시나 작동이 잘 되더라.

 

 

 

 

 

3. eslintrc.js 파일에서 해결

 

 

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

 

 

해당 파일로 이동해 위 코드를 추가해주면 해결된다.

 

이 파일은 없어서 해보지는 못했다. 나중에 써먹을슈됴 

 

 

 

 

아 참!!

위 방법들을 시도해보고 나서 꼭 npm run serve를 재실행해야한다!!!!

( 다른 프로젝트 하다가 오류났길래 해봤는데 재실행 안하고 왜 이번에는 안되는거지..? 이러고 있었다 바보🥲 )