企业级项目之VUE-ESlint配置推荐

eslint配置

• 这三个错误级别可以允许你细粒度的控制 ESLint 是如何应用规则

  “off” or 0 - 关闭规则
  “warn” or 1 - 将规则视为一个警告（不会影响退出码）
  “error” or 2 - 将规则视为一个错误 (退出码为1)

默认配置

• 正常用脚手架创建完项目，就会有.eslintrc.js文件
• 里面的默认配置

  module.exports = {
    root: true,
    env: {
      node: true
    },
    extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
    parserOptions: {
      parser: "babel-eslint"
    },
    rules: {
      "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
      "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
    }
  };
  

自定义配置

• 一般我们都会根据公司的前端规范去自定义一些配置,我会把注释加上以便大家理解
• eslint-rules
• eslint-plugin-vue-rules

强制vue属性排序

// 强制vue属性排序
‘vue/attributes-order’: [
‘warn’,
{
order: [
‘DEFINITION’,
‘LIST_RENDERING’,
‘CONDITIONALS’,
‘RENDER_MODIFIERS’,
‘GLOBAL’,
‘UNIQUE’,
‘TWO_WAY_BINDING’,
‘OTHER_DIRECTIVES’,
‘OTHER_ATTR’,
‘EVENTS’,
‘CONTENT’,
],
alphabetical: true, //字母排序
},
],

• 该规则强制组件属性排序。在Vue样式指南中指定了默认顺序，该顺序为：

  DEFINITION 例如'is'，'v-is'
  LIST_RENDERING 例如“ v-for item in items”
  CONDITIONALS 例如“ v-if”，“ v-else-if”，“ v-else”，“ v-show”，“ v-cloak”
  RENDER_MODIFIERS 例如“ v-once”，“ v-pre”
  GLOBAL 例如'id'
  UNIQUE 例如“ ref”，“ key”，“ v-slot”，“ slot”
  TWO_WAY_BINDING 例如'v-model'
  OTHER_DIRECTIVES 例如“ v-custom-directive”
  OTHER_ATTR 例如'custom-prop =“ foo”'，'v-bind：prop =“ foo”'，'：prop =“ foo”'
  EVENTS 例如'@ click =“ functionCall”'，'v-on =“ event”'
  CONTENT 例如“ v-text”，“ v-html”
  

• 默认顺序

  		<template>
  		  <!-- ✓ GOOD -->
  		  <div
  		    is="header"
  		    v-for="item in items"
  		    v-if="!visible"
  		    v-once
  		    id="uniqueID"
  		    ref="header"
  		    v-model="headerData"
  		    my-prop="prop"
  		    @click="functionCall"
  		    v-text="textContent">
  		  </div>
  		  <div
  		    v-for="item in items"
  		    v-if="!visible"
  		    prop-one="prop"
  		    :prop-two="prop"
  		    prop-three="prop"
  		    @click="functionCall"
  		    v-text="textContent">
  		  </div>
  		  <div
  		    prop-one="prop"
  		    :prop-two="prop"
  		    prop-three="prop">
  		  </div>
  		
  		  <!-- ✗ BAD -->
  		  <div
  		    ref="header"
  		    v-for="item in items"
  		    v-once
  		    id="uniqueID"
  		    v-model="headerData"
  		    my-prop="prop"
  		    v-if="!visible"
  		    is="header"
  		    @click="functionCall"
  		    v-text="textContent">
  		  </div>
  		</template>
  

强制vue组件内排序

‘vue/order-in-components’: [
‘warn’,
{
order: [
‘el’,
‘name’,
‘parent’,
‘functional’,
[‘delimiters’, ‘comments’],
[‘components’, ‘directives’, ‘filters’],
‘extends’,
‘mixins’,
‘inheritAttrs’,
‘model’,
[‘props’, ‘propsData’],
‘data’,
‘computed’,
‘watch’,
‘LIFECYCLE_HOOKS’,
‘methods’,
[‘template’, ‘render’],
‘renderError’,
],
},
],

• 此规则确保您保持组件中属性的声明顺序。

 "vue/order-in-components": ["warn", {
   "order": [
     "el",
     "name",
     "key",
     "parent",
     "functional",
     ["delimiters", "comments"],
     ["components", "directives", "filters"],
     "extends",
     "mixins",
     "inheritAttrs",
     "model",
     ["props", "propsData"],
     "data",
     "computed",
     "watch",
     "LIFECYCLE_HOOKS",
     "methods",
     ["template", "render"],
     "renderError"
   ]
 }]

• order（(string | string[])[]）…属性的顺序。元素是属性名称或以下组之一：
  • LIFECYCLE_HOOKS：Vue生命周期事件，按它们被调用的顺序

强制禁止template中含有this关键字

 'vue/this-in-template': 'warn',

• 防止this在Vue模板中使用。

  <template>
    <!-- ✓ GOOD -->
    <a :href="url">
      {
       
       { text }}
    </a>
    
    <!-- ✗ BAD -->
    <a :href="this.url">
      {
       
       { this.text }}
    </a>
  </template>
  

项目中的eslint配置

• .eslintrc.js 文件

module.exports = {
    root: true,
    env: {
        node: true,
    },
    extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
    parserOptions: {
        parser: 'babel-eslint',
    },
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-unused-vars': 0,

        // 强制vue属性排序
        'vue/attributes-order': [
            'warn',
            {
                order: [
                    'DEFINITION',
                    'LIST_RENDERING',
                    'CONDITIONALS',
                    'RENDER_MODIFIERS',
                    'GLOBAL',
                    'UNIQUE',
                    'TWO_WAY_BINDING',
                    'OTHER_DIRECTIVES',
                    'OTHER_ATTR',
                    'EVENTS',
                    'CONTENT',
                ],
                alphabetical: true, //字母顺序
            },
        ],
        // 强制vue组件内排序
        'vue/order-in-components': [
            'warn',
            {
                order: [
                    'el',
                    'name',
                    'parent',
                    'functional',
                    ['delimiters', 'comments'],
                    ['components', 'directives', 'filters'],
                    'extends',
                    'mixins',
                    'inheritAttrs',
                    'model',
                    ['props', 'propsData'],
                    'data',
                    'computed',
                    'watch',
                    'LIFECYCLE_HOOKS',
                    'methods',
                    ['template', 'render'],
                    'renderError',
                ],
            },
        ],
        // 强制禁止template中含有this关键字
        'vue/this-in-template': 'warn',
    },
}

避免某些文件进行eslint校验

• .eslintignore 文件
• 有时候项目中某些文件不需要校验，可以在这个文件配置，类似.gitignore文件：git上传忽略一样

  /build/**
  /coverage/**
  /docs/**
  /jsdoc/**
  /templates/**
  /tests/bench/**
  /tests/fixtures/**
  /tests/performance/**
  /tmp/**
  /tools/internal-rules/node_modules/**
  test.js
  !.eslintrc.js