Vue.js ESLint 구성

 

ESLint

 

ECMAScript/JavaScript 코드에서 코딩 품질과 스타일을 검사하는 정적 코드 분석 도구

 

설치 및 구성

 

1. 패키지 설치

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

2. 루트 경로에 .eslintrc.js 파일 생성 후 구성 옵션 추가

module.exports = {
  env: {
    browser: true,
    node: true,
  },
  extends: [
    // vue 코드 검사 규칙, 레벨이 높을수록 엄격함
    //'plugin:vue/vue3-essential', // Lv1
    "plugin:vue/vue3-strongly-recommended", // Lv2
    //'plugin:vue/vue3-recommended', // Lv3

    // js 코드 검사 규칙
    "eslint:recommended",
  ],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "vue/html-closing-bracket-newline": ["error", {
        "singleline": "never",
        "multiline": "always",
      }],
      "vue/html-self-closing": ["error", {
        "html": {
          "void": "always",
          "normal": "never",
          "component": "always"
        },
        "svg": "always",
        "math": "always"
    }]
  }
}

 

---

 

참고

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

User Guide | eslint-plugin-vue

 

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

List of available rules