react中eslint+pre-commit使用

提交代码时，如何避免将一些不符合校验的代码提交到远端呢，可以借助工具husky 和 lint-staged。
第一步：安装eslint相关和包

第二步：安装lint-staged、husky、pre-commit

npm install --save-dev lint-staged husky pre-commit

第三步：配置package.json

第四步：新建.eslintrc.js

/**
 * AlloyTeam ESLint 规则
 *
 * 包含所有 ESLint 规则
 * 使用 babel-eslint 作为解析器
 *
 * @fixable 表示此配置支持 --fix
 * @off 表示此配置被关闭了，并且后面说明了关闭的原因
 */

module.exports = {
    parser: 'babel-eslint',
    parserOptions: {
        ecmaVersion: 2017,
        sourceType: 'module',
        ecmaFeatures: {
            // @TODO Deprecated https://eslint.org/docs/user-guide/configuring#deprecated
            experimentalObjectRestSpread: true,
            jsx: true,
            modules: true
        }
    },
    env: {
        browser: true,
        node: true,
        commonjs: true,
        es6: true
    },
    // 以当前目录为根目录，不再向上查找 .eslintrc.js
    root: true,
    rules: {
        //
        //
        // 可能的错误
        // 这些规则与 JavaScript 代码中可能的语法错误或逻辑错误有关
        //
        // 禁止 for 循环出现方向错误的循环，比如 for (i = 0; i < 10; i--)
        'for-direction': 'error',
        // getter 必须有返回值，并且禁止返回空，比如 return;
        'getter-return': [
            'error',
            {
                allowImplicit: false
            }
        ],
        // 禁止将 await 写在循环里，因为这样就无法同时发送多个异步请求了
        // @off 要求太严格了，有时需要在循环中写 await
        'no-await-in-loop': 'off',
        // 禁止与负零进行比较
        'no-compare-neg-zero': 'error',
        // 禁止在测试表达式中使用赋值语句，除非这个赋值语句被括号包起来了
        'no-cond-assign': [
            'error',
            'except-parens'
        ],
        // 禁止使用 console
        // @off console 的使用很常见
        'no-console': 'error',
        // 禁止将常量作为分支条件判断中的测试表达式，但允许作为循环条件判断中的测试表达式
        'no-constant-condition': [
            'error',
            {
                checkLoops: false
            }
        ],
        // 禁止在正则表达式中出现 Ctrl 键的 ASCII 表示，即禁止使用 /\x1f/
        // @off 几乎不会遇到这种场景
        'no-control-regex': 'off',
        // @fixable 禁止使用 debugger
        'no-debugger': 'error',
        // 禁止在函数参数中出现重复名称的参数
        'no-dupe-args': 'error',
        // 禁止在对象字面量中出现重复名称的键名
        'no-dupe-keys': 'error',
        // 禁止在 switch 语句中出现重复测试表达式的 case
        'no-duplicate-case': 'error',
        // 禁止出现空代码块，允许 catch 为空代码块
        'no-empty': [
            'error',
            {
                allowEmptyCatch: true
            }
        ],
        // 禁止在正则表达式中使用空的字符集 []
        'no-empty-character-class': 'error',
        // 禁止将 catch 的第一个参数 error 重新赋值
        'no-ex-assign': 'error',
        // @fixable 禁止不必要的布尔类型转换，比如 !! 或 Boolean
        'no-extra-boolean-cast': 'error',
        // @fixable 禁止函数表达式中出现多余的括号，比如 let foo = (function () { return 1 })
        'no-extra-parens': [
            'error',
            'functions'
        ],
        // @fixable 禁止出现多余的分号
        'no-extra-semi': 'error',
        // 禁止将一个函数声明重新赋值，如：
        // function foo() {}
        // foo = bar
        'no-func-assign': 'error',
        // 禁止在 if 代码块内出现函数声明
        'no-inner-declarations': [
            'error',
            'both'
        ],
        // 禁止在 RegExp 构造函数中出现非法的正则表达式
        'no-invalid-regexp': 'error',
        // 禁止使用特殊空白符（比如全角空格），除非是出现在字符串、正则表达式或模版字符串中
        'no-irregular-whitespace': [
            'error',
            {
                skipStrings: true,
                skipComments: false,
                skipRegExps: true,
                skipTemplates: true
            }
        ],
        // 禁止将 Math, JSON 或 Reflect 直接作为函数调用
        'no-obj-calls': 'error',
        // 禁止使用 hasOwnProperty, isPrototypeOf 或 propertyIsEnumerable
        // @off hasOwnProperty 比较常用
        'no-prototype-builtins': 'off',
        // @fixable 禁止在正则表达式中出现连续的空格，必须使用 /foo {3}bar/ 代替
        'no-regex-spaces': 'error',
        // 禁止在数组中出现连续的逗号，如 let foo = [,,]
        'no-sparse-arrays': 'error',
        // 禁止在普通字符串中出现模版字符串里的变量形式，如 'Hello ${name}!'
        'no-template-curly-in-string': 'error',
        // 禁止出现难以理解的多行表达式，如：
        // let foo = bar
        // [1, 2, 3].forEach(baz);
        'no-unexpected-multiline': 'error',
        // 禁止在 return, throw, break 或 continue 之后还有代码
        'no-unreachable': 'error',
        // 禁止在 finally 中出现 return, throw, break 或 continue
        'no-unsafe-finally': 'error',
        // @fixable 禁止在 in 或 instanceof 操作符的左侧使用感叹号，如 if (!key in object)
        'no-unsafe-negation': 'error',
        // 必须使用 isNaN(foo) 而不是 foo === NaN
        'use-isnan': 'error',
        // 注释必须符合 jsdoc 的规范
        // @off jsdoc 要求太严格
        'valid-jsdoc': 'off',
        // typeof 表达式比较的对象必须是 'undefined', 'object', 'boolean', 'number', 'string', 'function' 或 'symbol'
        'valid-typeof': 'error',



        //
        //
        // 最佳实践
        // 这些规则通过一些最佳实践帮助你避免问题
        //
        // setter 必须有对应的 getter，getter 可以没有对应的 setter
        'accessor-pairs': [
            'error',
            {
                setWithoutGet: true,
                getWithoutSet: false
            }
        ],
        // 数组的方法除了 forEach 之外，回调函数必须有返回值
        'array-callback-return': 'error',
        // 将 var 定义的变量视为块作用域，禁止在块外使用
        'block-scoped-var': 'error',
        // 在类的非静态方法中，必须存在对 this 的引用
        // @off 太严格了
        'class-methods-use-this': 'off',
        // 禁止函数的循环复杂度超过 20，https://en.wikipedia.org/wiki/Cyclomatic_complexity
        'complexity': [
            'error',
            {
                max: 20
            }
        ],
        // 禁止函数在不同分支返回不同类型的值
        // @off 太严格了
        'consistent-return': 'off',
        // @fixable if 后面必须要有 {，除非是单行 if
        'curly': [
            'error',
            'multi-line',
            'consistent'
        ],
        // switch