ESLint 설정하기

확장 플러그인인 ESLint를 소개하고, 사용하는 방법을 알아보겠습니다.

 

ESLint는 Javascript 문법을 검사해주는 에디터 확장 프로그램입니다.

사용법

Vue-cli가 3.x대 버전에서 ESLint를 사용해보겠습니다.

일단, app.vue에서 다음 코드를 입력하고, vue-cli를 실행해보았습니다.

터미널과 브라우저 모두 아래와 같이 ESLint의 에러로그가 발생합니다.

브라우저에는 overlay되어서 에러로그가 보이게 됩니다. 이럴 경우에는 개발을 할 수가 없게 됩니다.

브라우저의 에러로그 오버레이를 없애주는 설정을 하겠습니다.

설정 순서

1. 프로젝트 홈 경로 바로 밑에 vue.config.js라는 파일을 생성합니다.

2. 다음 코드를 작성합니다.

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

3. 마지막으로 vue-cli서버를 껏다가 다시 실행하고, 브라우저를 새로고침합니다.