일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
- tomcat
- 웹 자동화
- .NET Core
- javascript
- 프록시 예제
- Vue.config
- 웹 크롤링
- 디자인 패턴 사례
- vue
- 리버스 프록시 예제
- vue3
- Visual Studio 2015 설치
- Visual Studio 재설치
- Visual Studio 패키지에 실패했습니다.
- Visual Studio 2015 강제 삭제
- Nginx Reverse Proxy
- Selenium 설치
- MSSQL 문자열
- Visual Studio 강제 삭제
- Vue3 configureWebpack
- Selenium 환경
- Visual Studio 2015 삭제
- spring
- MSSQL 동적 쿼리
- vue.js
- Tomcat Error
- SQLP
- .NET Core Proxy
- 업무 자동화
- Vue configureWebpack
- Today
- Total
금백조의 개발 블로그
[Vue.js]"Parsing error: No Babel config file detected for..." 에러 해결 방법 본문
[Vue.js]"Parsing error: No Babel config file detected for..." 에러 해결 방법
금백조 2023. 3. 4. 12:51[문제 발생]
평화롭게 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
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
eslint.org