[Vue.js]"Parsing error: No Babel config file detected for..." 에러 해결 방법

[문제 발생]

 

평화롭게 Vue를 학습하려고 프로젝트를 생성함과 동시에 App.vue 파일에서 다음과 같은 에러를 만났다.

 

Parsing error: No Babel config file detected for [프로젝트 경로]\src\App.vue. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.

 

개발 환경

- VS Code (Extension : ESLint, Vetur, Vue 3 Snippets)

- Vue3

 

느낌이 쌔하지만 해결해보자!!!

 

---

 

[원인]

 

vue-eslint-parser 파서에 의해 발생. App.vue가 Babel에 처리하는 형식으로 변환되지 않아서 발생함.

 

Babel?

• 최신 문법을 이전 버전의 브라우저에서도 동작할 수 있는 버전의 자바스크립트 코드로 변환해주는 도구

ESLint?

• 자바스크립트 코드에서 잠재적인 오류를 찾고, 일관된 코딩 스타일을 유지하기 위한 정적 코드 분석 도구

 

[해결책]

 

프로젝트 루트 경로에 .eslintrc.js 파일을 생성 후 아래와 같이 config를 설정함.

module.exports = {
    root: true,
    env: {
      node: true,
    },
    extends: [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
    ],
    parserOptions: {
      parser: "@babel/eslint-parser",
      requireConfigFile: false,
    },
  }

 

[더 알아보기]

 

.eslintrc.js 파일에 아래와 같이 rule을 추가하여 일관된 코딩 스타일을 유지하고 Product에 배포되어야 하지 않을 코드들을 사전에 방지할 수 있다.

module.exports = {
    root: true,
    env: {
      node: true,
    },
    extends: [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
    ],
    parserOptions: {
      parser: "@babel/eslint-parser",
      requireConfigFile: false,
    },
    rules: {
      "no-console": "warn",//console.log 사용 시 경고
      "no-unused-vars": "warn",//할당되지 않은 변수 있을 시 경고
    },
  }

 

rules의 더 많은 옵션을 알고 싶다면 아래의 공식 문서를 참고

https://eslint.org/docs/latest/rules/

Rules Reference - ESLint - Pluggable JavaScript Linter