vue.js 사용 시 스트레스 받게하는 공백 스페이스 에러 해결하기

vue3버전을 설치하는 과정에서 메뉴얼로 설치하면서

 

ESLint를 스탠다드?로 설정하고 프로젝트를 진행하는데

계속해서 {} 사용시 혹은 function() 사용시에 띄어쓰기 1칸만 더 해도 에러가 발생해서

 

실제 에러를 잡는 것보다 더 많은 시간을 스페이스바 지우는 일에 쓰게 되었다.

물론 중구난방으로 규칙없이 쓰는것을 잡기 위해 좋은 방법이 될 수 있지만

공부하고있는 입장에서 여간 귀찮은게 아니다.

 

혹시 나와같은 문제를 겪고 있는데 vue3버전 이상을 설치한 사람이 있다면

 

해당 프로젝트 최상위에 보면 vue.config.js라는 파일이 있을 것이다.

해당 파일이 없다면 생성해도 된다.

 

뷰3버전부터는 해당 파일로 설정을 온 오프 관리할 수 있도록 해줬기 때문에

 

해당 파일을 열어서

 

아래와 같이 작성하고 저장해주자

 

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

 

저기서 lintOnSave가 바로 저장 시 검사를 하냐 마냐를 결정하는 코드이다.

 

기본이 true로 설정되어있으니 해당 값을 false로 수정해주고 저장한다음

 

서버를 껏다 다시 켜보면

 

스페이스바를 내마음대로해도 아주 잘 작동하고

 

에러도 더이상 나오지 않는다!