[vue/error] Component name "~" should always be multi-word

1. 이슈

vue router 를 설치하고 새로운 컴포넌트 "index.vue" 를 생성하자 <template> 부분에서 오류가 났다.

터미널에서 다음과 같은 에러메세지를 확인 할 수 있었다.

> 에러 메세지

---

2. 원인

찾아보니 vue.js 는 컴포넌트 이름으로  2개 이상의 단어 조합을 권장한다고 한다.

"index" 라는 단일어 만들어서 vsCode의 확장프로그램 중 하나인 "ESLint"가 감지하고 컴파일 에러를 발생시킨 것이다.

 

>  VSCode 확장 : ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 

ESLint - Visual Studio Marketplace

ES : 표준 자바스크립트 ( ECMA Javascript )

Lint : 린트 또는 린터는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시를 달아놓기 위한 도구들을 가리킨다. 이 용어는 C 언어 소스 코드를 검사하는 유닉스 유틸리티에서 기원한다.

 

** lint의 사전적 의미는 '보푸라기' . 불필요하거나 문제의 소지가 있는 부분을 알려주고, 개선하라는 의미로 붙인 이름인 것 같다.

 

---

 

3. 해결방법

3-1. 컴포넌트 이름 수정

간단하게 권장 규칙을 따라서 복합어로 컴포넌트 이름을 수정하면된다.

다만, 나는 강의를 듣는 중이라 강사가 사용하는 기존 이름을 유지하고 싶었다. 

 

3-2. vue.config.js 수정

lintOnSave 속성을 false로 설정하면 컴포넌트 이름을 단일어로 생성해도 오류가 나지않는다.

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false
})

> 파일 위치