[Vue.js]VUE3 ESlint 오류 관련들

ESlint는 코드 작성시 문법 오류 및 버그 확인 뿐만아니라 협업간에 작업 스타일과 들여쓰기등 규칙이 틀리면 잔소리하는 VS Code 확장팩인데요. 조그만 규칙이 틀리면 오류라고 판단합니다.

 

오류가 다양해서 공부삼아 정리를 해보고자 합니다.

 

1. vue/no-multiple-template-root 오류

error  The template root requires exactly one element  vue/no-multiple-template-root

<template> 와 </templat> 안에 <div>로 한번 묶어주세요.

<template>
 <div> 
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
	<router-link to="/sass">Sass</router-link>
  </nav>
  <router-view/>
</div>
</template>

VUE2버전에서는 <template> 안에 반드시 <div>로 묶여있어야 에러가 나지 않습니다.

하지만 VUE3버전에서는 <template>안에 <div>로 묶여있지가 않는데, ESlint가 아직 버전업이 안되서 그렇다고 합니다.

 

2. .eslintrc.js 설정

module.exports = {
    "env": {
        "node": true,
		"commonjs": true,
        "es2021": true,
		"browser": true,
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
		
    },
	
};

"env": {         

     "node": true, 

     "commonjs": true,         

     "es2021": true, 

    "browser": true,    

},

 

"node": true 추가

 

3. vetur확장팩 삭제 (VUE3 사용자)

VUE3 사용자는 vetur 대신 volar을 사용하세요. vetur은 VUE2 버전때 많이 사용했는데 VUE3와 아직 호환성이 안맞아서 ESlint에서 오류로 잡아낼수 있습니다.

오류를 해결하는 방법은 다양하지만, 찾기가 쉽지가 않아 하나씩 업데이트 합니다.