vue 프로젝트 생성 및 Lint 적용하기(3) - eslint 룰 설정 및 오류 제거하기

지난편에 이어서 진행한다. 

vue 프로젝트 생성 및 Lint 적용하기(2) - Lint 설정하기

일단 비쥬얼 스튜디오코드 를 종료했다가 새창으로 연다.

 

파일- 폴더열기를 통해 front 프로젝트가 있는 폴더를 열어서 재실행해준다.

 

이렇게 새로 창을 열어주는 이유는 작업영역을 front 폴더에 위치해 주기 위해서이다. 안그러면 나중에 이상한 오류가 나서 굉장히 곤란하다. ex) Can't not found Module Cannot find module 'eslint-plugin-vue'

 

 

참고자료 : https://joshua1988.github.io/web-development/vuejs/boost-productivity/

Vue.js 개발 생산성을 높여주는 도구 3가지

• 터미널에 아래와 같이 입력 실행 해준다 
• 플러그인 설치

 npm i eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue --save-dev

 

• .eslintrc.js 내용을 하단에 내용으로 바꿔치기한다.

 

 

 

• Package.json 파일 열어서 script부분에 아래 코드로 교체

{
    "lint": "eslint --ext .js,.vue src",	  // 문법체크
    "fix": "eslint --fix --ext .js,.vue src" 	 // 자동 fix 
}

//터미널에
yarn lint // 문법검사
yarn fix // 자동 포맷팅 해줌

 

• F1 눌러서 사용자작업영역 실행후 아래 내용 입력

저 파일을 열면 된다.

        위에 내용을 입력하면 된다.                            저장시 자동으로 lint 시켜주는 기능이다.

 

    // 코드 저장시 자동으로 formatting 해준다.
    "editor.formatOnSave": false,	
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

 

이제 세팅이 완료되었다.

 

아무 vue 파일이나 클릭해서 들어가자 

빨간줄이 있지만 저장을 하면 자동으로 수정이 된다.

eslint가 적용된 모습이다. 

 

이로써 vue 프로젝트 구현을 위한 기본 세팅이 끝났다 다음편에서는 디자인프레임워크 적용 및 node.js와 통신을 하는 방법을 써야겠다.