.eslintrc文件配置 eslint-plugin-vue 插件

  • 解析器使用vue-eslint-parser,注意babel-eslint必須寫在parserOptions裏面,配置如下:
    parser: “vue-eslint-parser”,
    parserOptions: {
    parser: ‘babel-eslint’,
    sourceType: ‘module’
    },
  • 插件使用vue,配置如下:
    plugins: [ “vue” ],
  • eslint-plugin-vue插件有三種不同程度的規範:vue/vue3-essential、vue3-strongly-recommended、vue/vue3-recommended
    以vue/vue3-recommended為例, 擴展配置如 extends: [‘plugin:vue/recommended’]
  • 配置屬於自己的html格式化規則
module.exports = {
  root: true,
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  extends: ['plugin:vue/recommended', 'standard'],
  plugins: [
    "vue"
  ],
  // add your custom rules here
  'rules': {
    // allow debugger during development
    'no-debugger': (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'productionECSO') ? 2 : 0,

    /*  *************   eslint-plugin-vue  ————  Strongly Recommended    *****************  */

    // 自定義組件-屬性名稱-連接符
    // <MyComponent my-prop="prop" />    <-----        <MyComponent myProp="prop" />
    "vue/attribute-hyphenation": 0,

    // 自定義組件名稱 - 駝峯和連字符
    "vue/component-definition-name-casing": 0,

    // html 閉括號-換行
    "vue/html-closing-bracket-newline": [2, {
      "singleline": "never",
      "multiline": "always"
    }],

    // html 閉括號之前無空格
    "vue/html-closing-bracket-spacing": 2,

    // html 需要有結束標籤,除了自閉合標籤
    "vue/html-end-tags": 2,

    // 縮進
    "vue/html-indent": 2,

    // 屬性-引用-默認使用雙引號
    "vue/html-quotes": 0,

    // 自閉合標籤只能寫成這種形式  ---->   <YourComponent/>
    "vue/html-self-closing": 2,

    // 標籤裏面每行屬性的個數--默認為1
    "vue/max-attributes-per-line": [2, {
      "singleline": 4,
      "multiline": 4
    }],

   // 內容元素為多行,對稱換行
   "vue/multiline-html-element-content-newline": 0,
   // 內容元素為一行,換行
   "vue/singleline-html-element-content-newline": 0,

    // “Mustache”語法 (雙大括號) 必須有前後對稱的空格
    "vue/mustache-interpolation-spacing": 0,

    // 標籤裏面不允許多餘空格
    "vue/no-multi-spaces": 2,

    // 標籤內--屬性賦值--等號兩邊不允許空格
    "vue/no-spaces-around-equal-signs-in-attribute": 0,

    // v-for指令變量命名不允許歧義,比如:變量命令為l
    "vue/no-template-shadow": 0,

    // 一個文件導出一個組件
    "vue/one-component-per-file": 0,

    // props 接收的屬性名稱為駝峯形式
    "vue/prop-name-casing": 0,

    // props中如果沒有required,則需要提供默認屬性default
    "vue/require-default-prop": 0,

    // props 屬性需要聲明類型type
    "vue/require-prop-types": 0,

    // 默認使用冒號:,而不是v-bind:
    "vue/v-bind-style": 2,

    // 默認使用冒號@,而不是v-on:
    "vue/v-on-style": 2,

    // 默認使用冒號#,而不是v-slot:
    "vue/v-slot-style": 0,

    /*  *************   eslint-plugin-vue  ————  Recommended    *****************  */

    // 標籤裏面的屬性--順序
    "vue/attributes-order": 0,

    // <script>, <template> & <style> 標籤順序,默認: [["script", "template"], "style"]
    "vue/component-tags-order": 0,

    // <template>標籤中要有指令
    "vue/no-lone-template": 0,

    // 不允許使用v-html指令
    "vue/no-v-html": 0,

    // 綁定在 <slot> 的元素 ———— 插槽prop只能有一個參數
    "vue/no-multiple-slot-args": 0,

    // 組件聲明屬性的順序 ———— 默認順序:name、components、props、data、computed、watch、methods
    "vue/order-in-components": 0,

    // this 不允許出現在template中
    "vue/this-in-template": 2,

    /*  *************   eslint-plugin-vue  ————  Deprecated(已廢棄)    *****************  */
    // name屬性默認使用PascalCase帕斯卡命名法—— 首字母大寫,比如  name: 'MyComponent'
    "vue/name-property-casing": 0,

    /*  *************   eslint-plugin-vue  ————  Essential    *****************  */

    // props --  Array 或 Object,default屬性是個函數
    "vue/require-valid-default-prop": 2,

    /*  *************   新增 eslint 規則   *****************  */

    // 文件末尾保留一行空行
    'eol-last': 2,
    // 禁用行尾空白
    'no-trailing-spaces': 2,
    // 不允許多個空行
    'no-multiple-empty-lines': 2
  }
}