Web Pack Template - ESLint

사용하는 이유: 코드의 일관성을 유지하기 위해서 사용

 

공식 사이트 

https://eslint.vuejs.org/user-guide/#installation

User Guide | eslint-plugin-vue

https://eslint.org/docs/rules/

List of available rules

 

ESLint 패키지 설치

명령어: npm i -D eslint eslint-plugin-vue babel-eslint

 

packge.json 파일에서 확인

 

루트 경로에 .eslintrc.js 파일을 생성

module.exports = {
  env: {
    // 브라우저와 node.js 환경에서 동작하기 위해서 설정
    browser: true,
    node: true
  },
  extends: [
    // 코드검사를 진행할 규칙을 정의
    // vue
    //'plugin:vue/vue3-essential', //Lv1
    'plugin:vue/vue3-strongly-recommended', //Lv2
    //"plugin:vue/strongly-recommended",
    //'plugin:vue/vue3-recommended', //Lv3
    // js
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    // 기존 규칙을 수정해야 할 때 입력
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "never"
    }],

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

 

규칙에 어긋나게 작성하였을 때 자동으로 수정되도록 설정

ctrl + shilft + p -> settings.json

아래 코드를 하단에 입력

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

 

참고: https://sunmon.github.io/vscode-eslint-prettier-setting/

vscode에 eslint와 prettier 설정하기 | NOT_NULL