企业级项目之ESlint(Vue,React)配置推荐

基础配置

eslint配置

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

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

避免某些文件进行eslint校验

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

  /build/**
  /node_modules/**
  /dist/**
  /docs/**
  # 忽略当前目录下为js的文件的语法检查
  #*.js
  

执行校验

• npx eslint --ext .js,.jsx,.tsx,.ts,.css,.scss src

VUE项目如何配置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"
    }
  };
  

自定义配置

• 一般我们都会根据公司的前端规范去自定义一些配置,我会把注释加上以便大家理解
• 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',
    },
}

React项目如何配置ESlint

• typescript-eslint doc

TS+ESlint基础配置

• npm install typescript eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript -D
• add .eslintrc.js文件
• 配置完成后npx eslint .测试配置是否成功

配置

• parser: '@typescript-eslint/parser’告诉 ESLint 使用@typescript-eslint/parser你安装的包来解析你的源文件。
  这是必需的，否则 ESLint 会在尝试解析 TypeScript 代码时抛出错误，就像它是常规 JavaScript 一样。
• plugins: [‘@typescript-eslint’]告诉 ESLint 将@typescript-eslint/eslint-plugin包作为插件加载。
  这允许您在代码库中使用 typescript-eslint 的规则。
• extends: [ … ]告诉 ESLint 你的配置扩展了给定的配置。
• eslint:recommended是 ESLint 内置的“推荐”配置——它开启了一组小而合理的规则，这些规则会针对众所周知的最佳实践进行检查。
  plugin:@typescript-eslint/recommended是我们的“推荐”配置——它就像eslint:recommended，除了它只打开来自我们特定于 TypeScript 的插件的规则

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

项目中的eslint配置

• .eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
    jest: true,
    commonjs: true,
  },
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint", "react", "import"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  settings: {
    react: {
      pragma: "createElement", // Pragma to use, default to "React"
    },
  },
  parserOptions: {
    sourceType: "module",
    ecmaVersion: 6,
    ecmaFeatures: {
      jsx: true,
      generators: true,
      experimentalObjectRestSpread: true,
    },
  },
   // 列举不需要检查的全局对象
  globals: {
    __weex_data__: true,
    WXEnvironment: true,
  },
    /* 
      "off"或者0    //关闭规则关闭
      "warn"或者1    //在打开的规则作为警告（不影响退出代码）
      "error"或者2    //把规则作为一个错误（退出代码触发时为1） 
  */
  rules: {
    "@typescript-eslint/camelcase": [
      "error",
      {
        properties: "never",
      },
    ],
    "no-console": "warn",
  },
};