ESlint error가 화면을 덮지 않게 설정해보자

 

ESlint

ESlint error가 화면을 덮지 않게 하고 싶다. >>> 웹팩 devServer overlay 설정을 끈다.

 

npm run serve 이후, 

선언한 변수 중 사용되지 않은  변수가 있거나 등등의 사소한 실수가 있으면, eslint 에러가 화면을 덮는다.

이 부분은 웹팩 dev 기능 중 하나인데, 코드를 수정하는 중에 계속 화면을 덮는 에러를 x 를 눌러 꺼야한다는 점에서 매우 번거롭고 생산성을 저해한다.

아래 방법을 통해 eslint가 화면에 표시되지 않게 할 수 있다.

그 방법은 바로.. 웹팩 devServer overlay 를 끄는 것이다. 

 

 

1. new file > vue.config.js 파일을 생성한다. 

 

2. 생성하면 자동으로 이렇게 쓰여있는 파일이 생성되는데 

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,

});

 

3. 요 내용을 추가한다 

//vue.config.js 파일에 아무것도 없으면 
  devServer: {
    overlay: false
  },



//vue.config.js 최종
  module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    overlay: false
  },
}

//vue.config.js 파일에 이미 내용 있으면 

 devServer: {
    client: {
      overlay: false
    }
}  



//vue.config.js 최종
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    client: {
      overlay: false
  
    }
}  
});