Vue 프로젝트에 ESlint 적용

 

 

eslint/eslint-plugin-vue 설치

npm i -D eslint eslint-plugin-vue

 

루트 경로에 .eslintrc.json 파일 생성

{
  "env": {
    "browser": true, // window에서 사용하는 전역 객체 허용
    "node": true // node에서 사용하는 전역 api 허용
  },
  "extends": [
    "eslint:recommented",
    "plugin:vue/vue3-recommended"
  ]
}

json으로 작성했지만 js로도 작성이 가능하다.

extends에서는 일단 eslint와 vue plugin의 추천 설정을 기본으로 작성했다.

 

 

VSCode 확장프로그램 설치

.eslintrc.json에서 설정한 규칙이 적용될 수 있게 확장프로그램을 설치한다.

 

Open Settings 설정

view - commend palette (ctrl+shift+p) 를 누른 후

json을 검색했을 때 나오는 Open Settings에서 설정을 해 줄 수 있다.

 

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

 

위의 내용을 작성하면 파일 저장 시 설정한 eslint규칙대로 수정이 될 수 있게 해준다.

 

 

rules 설정

설정한 추천 규칙 외에 추가로 적용하고 싶은 규칙들이 있다면

rules옵션에서 추가할 수 있다.

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": ["eslint:recommended", "plugin:vue/vue3-recommended"],
  "rules":{
  	// 이곳에 작성
  }
}

 

 

rules 추가

{
  "env": {
    "browser": true, // window에서 사용하는 전역 객체 사용
    "node": true // node에서 사용하는 전역 api 사용
  },
  "extends": ["eslint:recommended", "plugin:vue/vue3-recommended"],
  "rules":{
    "semi":["error", "always"], // 코드 끝 세미콜론 사용
    "quotes":["error", "single"], // 싱글 quotes 사용
    "vue/html-closing-bracket-newline": ["error", { 
      "singleline": "never",
      "multiline": "never" // multiline의 닫힘 태그 부분에 엔터 적용 X
    }],
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "always", // img태그 작성시 뒤에 자동 슬래시
        "normal": "never", // 빈 div태그 작성시 self closing X
        "component": "always"
      },
      "svg": "always",
      "math": "always"
    }]
  }
}

 

vue에서의 eslint rules는 공식문서에서 추가로 확인해 볼 수 있다.