[Vue.js][Ch1][Vue 시작하기] Vue3 Webpack Template - ESLint 구성

ESLint (ES + Lint)

ES는 EcmaScript, 즉 자바스크립트를 의미. 

Lint는 보푸라기라는 뜻인데 프로그래밍 쪽에서는 에러가 있는 코드에 표시를 달아놓는 것을 의미.

즉, ESLint는 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 의미.

 

ESLint는 사용자가 직접 정의한대로 코드를 점검하고, 에러가 있으면 표시해준다. 

또한,  문법 에러뿐만 아니라 코딩 스타일도 정할 수 있어서 팀원끼리 협업을 할 때 좋다.

Vue.js에서 ESLint 사용하기

1.  eslint, eslint-plugin-vue, babel-eslint 패키지 설치

npm i -D eslint eslint-plugin-vue babel-eslint

2. 루트 경로에 .eslintrc.js 추가

• 구글에 vue 3 eslint 검색 > https://eslint.vuejs.org/user-guide/ 진입 > User Guide / Rules 참고
• 구글에 eslint rules 검색 >. https://eslint.org/docs/rules/ 진입 > 참고
  • 문서를 확인하여 내 입맛에 맞게, 내가 소속된 팀에 맞게 규칙을 설정할 수 있다.

module.exports = {
  env: {
    // 브라우저 환경에서 동작하는 전역개념, Node.js에서 동작하는 전역개념을 코드 검사할 것인지 설정 
    browser : true,
    node : true
  },
  extends: [
    /* vue
    * vue.js의 기본적인 규칙
    * - 'plugin:vue/vue3-essential',              // Lv1
    * - 'plugin:vue/vue3-strongly-recommended',   // Lv2
    * - 'plugin:vue/vue3-recommended',            // Lv3 : 가장 엄격
    */
    'plugin:vue/vue3-strongly-recommended',   // Lv2
    // js
    'eslint:recommended'    // eslint에서 권장하는 코드 규칙으로 JavaScript 문법 검사
  ],
  parserOptions: {    // 코드를 분석할 수 있는 분석기 지정
    parser : 'babel-eslint'   // ES6 이상의 문법을 구 버전의 브라우저에서도 동작할 수 있도록 ES5로 변경
  },
  // extends에 기본적인 규칙을 선언하였다면 rules에 안적어도 되지만, 규칙을 변경해야하는 상황이 생긴다면 선언해도 됨.
  rules: {

  }
}

• extends : ESLint 규칙을 정해주는 곳
• parserOptions : 타입 정보를 필요로 하는 규칙들을 사용하고 싶으면 설정해야 하는 속성

ESLint plugin:vue/vue3-strongly-recommended에 맞게 변경하면

HelloWorld.vue는 아래코드로 변경됨

<template>
  <img 
    src="~assets/logo.png" 
    alt="SEARCH" 
  >
</template>

내 입맛에 맞게 변경하려면

• 구글에 eslint plugin vue 검색 > https://eslint.vuejs.org/ 진입

나는 닫히는 꺽새괄호(>)를 줄바꿈처리하고 싶지 않다!

• vue/html-closing-bracket-newline 검색 > Options 확인

.eslintrc.js > rules 옵션 추가

rules: {
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "never"
    }]
}

나는 />를 선언하고 싶다!

• self 검색 > vue/html-self-closing 선택 > Options 확인

.eslintrc.js > rules 옵션 추가

"vue/html-self-closing": ["error", {
  "html": {
    "void": "always",
    "normal": "never",
    "component": "always"
  },
  "svg": "always",
  "math": "always"
}]

VS Code에서 파일을 저장할 때, ESLint 규칙에 맞게 자동 수정되게 설정

1. 모든 명령 표시(cmd + shift + p) > settings 검색 > Preferences : Open Settings(JSON) 진입

2. editor.codeActionsOnSave 옵션 추가

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