ESLint 설정시 overlay 감추기

ESLint 브라우저 overlay 문제

Vue CLI 설치시 ESLint(린트) 필수지만, 큰 불편사항이 있다.

ESLint에서 설정된(지향하는) 코드 패턴이 아닌 경우 에러가 발생되는데 특히, 사용되지 않는 변수(var) 선언시 ESLint에서 오류가 발생되고, 브라우저에 오류내용이 overlay 되면서 생산성 저해되는 부분이 있어 ESLint 설정을 변경하는 법을 찾아봄

 

overlay 숨기고, 단 ESLint의 오류 내용은 보고싶다.

관련 내용을 찾아보니 캡틴형님께서 이해하기 쉽게 내용 설명과 해결방법을 설명해 놓았는데, 내용은 간단하다.

1. vue.config.js를 사용하여 overlay: false 처리하면

2. 터미널에서는 오류내용이 기존 처럼 출력되지만

3. 브라우저에서는 오류 내용이 overlay되지 않음

vue.config.js

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

 

그래서

의외로 간단함, 진작 이렇게 하면 될텐대 위 방법 전에는 빈 변수값을 삭제하거나 주석 처리 또는 console.log() 등으로 overlay되지 않도록 처리했기에 불편한점 많았다.

역시, 불편하다 싶으면 참지 말고 구글링 적절한 판단인듯

참조 : https://www.youtube.com/watch?v=eQ8ugBZhrfY