뷰(Vue) 파일 추가 후, "Parsing error: No Babel config file detected for" 오류 해결 방법

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

---

Vue 파일을 신규 추가할 때 발생하는 오류

상황

VSCode로 Vue.js 프로젝트를 신규 생성한 후, 정상적으로 구동이 되는 것을 확인하였습니다.

components 폴더 하위에  vue 파일을 새롭게 추가하고 App.vue 파일에 연결하니 아래와 같은 오류가 발생하였습니다.

위 사진에서 안내되는 오류 메세지를 텍스트로 써보자면 아래와 같습니다.

 

Parsing error: No Babel config file detected for '신규 추가한 파일 관련 경로'

 

 

원인

Javascript 문법을 자동으로 검사해주는 VSCode의 Extensions 중 하나인 ESLint에서 설정 파일을 인식하는 부분에서 오류가 발생한 것으로 추측합니다.

찾아보니 인프런에서 Vue.js 강의로 유명한 캡틴 판교님의 강의에 질문이 등재된 이력이 있어서 원인과 해결방법을 참고하여 해결하였습니다. 

https://www.inflearn.com/questions/455705

 

 

해결 방법

다양한 해결 방법이 있겠지만 위 링크에서 소개된 해결 방법 2가지를 정리해보고자 합니다.

저의 경우 ESLint의 설정 파일을 수정하는 방법으로 진행하였습니다.

 

방법 1

VSCode에서 연 폴더를 Vue-Cli를 통해 생성한 프로젝트를 최상위로 엽니다.

 

 

방법 2

1. VSCode의 Extensions 메뉴에서 ESLint 항목의 설정(톱니바퀴 모양) 버튼을 클릭합니다.

2. 팝업된 Context-menu의 Extension Settings 메뉴를 클릭합니다.

 

3. ESLint의 Settings 파일이 열리면, 아래 이미지와 같이 'Edit in settings.json' 을 클릭합니다.

 

4. 열린 json 파일의 가장 아래에 아래 코드를 추가 후 저장합니다.

<!-- 기 작성된 코드 부분 -->
    , 
    
    "eslint.workingDirectories": [
        {"mode": "auto"}
    ]