[Vue.js] ESLint 화면 에러 오버레이 처리하기

Vue CLI로 프로젝트를 생성하고 나서 Vue 개발을 진행하다 보면 다음과 같은 화면을 많이 마주할 것이다.

 

뭐 대충 이런 에러메시지를 화면 전체에 띄워서 "당장 이 에러를 수정하지 않으면 너의 어플리케이션은 너또한 건드릴 수 없을 것이야" 라는 직접적인 표시로 보인다..

 

하지만 내가 이 에러는 마주하는 이유는 바로....

 

선언된 var a 라는 변수가 10을 할당받았는데... 이걸 사용하지 않아서 발생하는 에러이다.

단지 warn 정도일 뿐 에러는 아니라는 것이다.

 

그런데도 ESLint라는 녀석은 이걸 아주 강력하게 잡고 개발하는데 생산성을 엄청나게!!! 저하시키곤 한다.

 

이걸 수정하고 나면 다시 화면을 왔다 갔다하는 시간이 너무 아깝다!!!

 

ESLint 에러 해결

현재 이 프로젝트는 vue create을 막 마친 상태이고 created() 만 추가하여 저렇게 에러를 내도록 한 상황이다.

 

뷰 js는 특정 이름의 설정파일을 가지게 되는데. 그중 하나가 vue.config.js 라는 명칭이다.

프로젝트 루트폴더에 vue.config.js라는 파일을 추가하자

 

- vue.config.js

module.exports = {
  devServer: {
    overlay: false
  }
}

- 화면 위에 떠서 아무것도 클릭하지 못하게 만드는 것을 오버레이라고 하는데, 이것을 true/false로 껏다 켰다 할 수 있다.

- 단지 화면에 노출되는 에러를 없애는 것 뿐이지 콘솔에는 여전히 에러가 뜨는 것을 확인할 수 있다.