2.1.3 规范

changelog

npm install -g conventional-changelog-cli

1
2
3

修改package.json文件，在script中添加

{
  "scripts": {
    "version": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
  }
}

1
2
3
4
5

做一次提交来试试看:

git add .
git commit -m "feat: 添加生成changelog功能"

1
2
3

然后运行：

npm run version

之后看到 CHANGELOG.md 文件有了我们的提交日志

eslint 引入

yarn add eslint eslint-plugin-react babel-eslint --dev
or  
npm install eslint eslint-plugin-react babel-eslint --save-dev

1
2
3

2.项目根目录下创建 .eslintrc.js

"off" or 0 - turn the rule off
"warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
"error" or 2 - turn the rule on as an error (exit code is 1 when triggered)

module.exports = {
  root: true, // 以当前目录为根目录，不再向上查找 .eslintrc.js
  parserOptions: {
    parser: "babel-eslint"
  },
  env: {
    browser: true,
    node: true,
    commonjs: true,
    es6: true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  plugins: ["react"],
  // add your custom rules here
  rules: {
     // 禁止 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': 'off',
        // 禁止将常量作为分支条件判断中的测试表达式，但允许作为循环条件判断中的测试表达式
        '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 语句必须有 default
        // @off 太严格了
        'default-case': 'off',
        // @fixable 链式调用的时候，点号必须放在第二行开头处，禁止放在第一行结尾处
        'dot-location': [
            'error',
            'property'
        ],
        // @fixable 禁止出现 foo['bar']，必须写成 foo.bar
        // @off 当需要写一系列属性的时候，可以更统一
        'dot-notation': 'off',
        // @fixable 必须使用 === 或 !==，禁止使用 == 或 !=，与 null 比较时除外
        'eqeqeq': [
            'error',
            'always',
            {
                null: 'ignore'
            }
        ],
        // for in 内部必须有 hasOwnProperty
        'guard-for-in': 'error',
        // 禁止使用 alert
        // @off alert 很常用
        'no-alert': 'off',
        // 禁止使用 caller 或 callee
        'no-caller': 'error',
        // switch 的 case 内有变量定义的时候，必须使用大括号将 case 内变成一个代码块
        'no-case-declarations': 'error',
        // 禁止在正则表达式中出现形似除法操作符的开头，如 let a = /=foo/
        // @off 有代码高亮的话，在阅读这种代码时，也完全不会产生歧义或理解上的困难
        'no-div-regex': 'off',
        // @fixable 禁止在 else 内使用 return，必须改为提前结束
        // @off else 中使用 return 可以使代码结构更清晰
        'no-else-return': 'off',
        // 不允许有空函数，除非是将一个空函数设置为某个项的默认值
        'no-empty-function': [
            'error',
            {
                allow: [
                    'functions',
                    'arrowFunctions'
                ]
            }
        ],
        // 禁止解构中出现空 {} 或 []
        'no-empty-pattern': 'error',
        // 禁止使用 foo == null 或 foo != null，必须使用 foo === null 或 foo !== null
        // @off foo == null 用于判断 foo 不是 undefined 并且不是 null，比较常用，故允许此写法
        'no-eq-null': 'off',
        // 禁止使用 eval
        'no-eval': 'error',
        // 禁止修改原生对象
        'no-extend-native': 'error',
        // @fixable 禁止出现没必要的 bind
        'no-extra-bind': 'error',
        // @fixable 禁止出现没必要的 label
        'no-extra-label': 'error',
        // switch 的 case 内必须有 break, return 或 throw
        'no-fallthrough': 'error',
        // @fixable 表示小数时，禁止省略 0，比如 .5
        'no-floating-decimal': 'error',
        // 禁止对全局变量赋值
        'no-global-assign': 'error',
        // @fixable 禁止使用 !! ~ 等难以理解的运算符
        // 仅允许使用 !!
        'no-implicit-coercion': [
            'error',
            {
                allow: [
                    '!!'
                ]
            }
        ],
        // 禁止在全局作用域下定义变量或申明函数
        'no-implicit-globals': 'error',
        // 禁止在 setTimeout 或 setInterval 中传入字符串，如 setTimeout('alert("Hi!")', 100);
        'no-implied-eval': 'error',
        // 禁止在类之外的地方使用 this
        // @off this 的使用很灵活，事件回调中可以表示当前元素，函数也可以先用 this，等以后被调用的时候再 call
        'no-invalid-this': 'off',
        // 禁止使用 __iterator__
        'no-iterator': 'error',
        // 禁止使用 label
        'no-labels': 'error',
        // 禁止使用没必要的 {} 作为代码块
        'no-lone-blocks': 'error',
        // 禁止在循环内的函数中出现循环体条件语句中定义的变量，比如：
        // for (var i = 0; i < 10; i++) {
        //     (function () { return i })();
        // }
        'no-loop-func': 'error',
        // 禁止使用 magic numbers
        // @off 太严格了
        'no-magic-numbers': 'off',
        // @fixable 禁止出现连续的多个空格，除非是注释前，或对齐对象的属性、变量定义、import 等
        'no-multi-spaces': [
            'error',
            {
                ignoreEOLComments: true,
                exceptions: {
                    Property: true,
                    BinaryExpression: false,
                    VariableDeclarator: true,
                    ImportDeclaration: true
                }
            }
        ],
        // 禁止使用 \ 来换行字符串
        'no-multi-str': 'error',
        // 禁止直接 new 一个类而不赋值
        'no-new': 'error',
        // 禁止使用 new Function，比如 let x = new Function("a", "b", "return a + b");
        'no-new-func': 'error',
        // 禁止使用 new 来生成 String, Number 或 Boolean
        'no-new-wrappers': 'error',
        // 禁止使用 0 开头的数字表示八进制数
        'no-octal': 'error',
        // 禁止使用八进制的转义符
        'no-octal-escape': 'error',
        // 禁止对函数的参数重新赋值
        'no-param-reassign': 'error',
        // 禁止使用 __proto__
        'no-proto': 'error',
        // 禁止重复定义变量
        'no-redeclare': 'error',
        // 禁止使用指定的对象属性
        // @off 它用于限制某个具体的 api 不能使用
        'no-restricted-properties': 'off',
        // 禁止在 return 语句里赋值
        'no-return-assign': [
            'error',
            'always'
        ],
        // 禁止在 return 语句里使用 await
        'no-return-await': 'error',
        // 禁止出现 location.href = 'javascript:void(0)';
        'no-script-url': 'error',
        // 禁止将自己赋值给自己
        'no-self-assign': 'error',
        // 禁止将自己与自己比较
        'no-self-compare': 'error',
        // 禁止使用逗号操作符
        'no-sequences': 'error',
        // 禁止 throw 字面量，必须 throw 一个 Error 对象
        'no-throw-literal': 'error',
        // 循环内必须对循环条件的变量有修改
        'no-unmodified-loop-condition': 'error',
        // 禁止无用的表达式
        'no-unused-expressions': [
            'error',
            {
                allowShortCircuit: true,
                allowTernary: true,
                allowTaggedTemplates: true
            }
        ],
        // @fixable 禁止出现没用的 label
        'no-unused-labels': 'error',
        // 禁止出现没必要的 call 或 apply
        'no-useless-call': 'error',
        // 禁止出现没必要的字符串连接
        'no-useless-concat': 'error',
        // 禁止出现没必要的转义
        // @off 转义可以使代码更易懂
        'no-useless-escape': 'off',
        // @fixable 禁止没必要的 return
        // @off 没必要限制 return
        'no-useless-return': 'off',
        // 禁止使用 void
        'no-void': 'error',
        // 禁止注释中出现 TODO 和 FIXME
        // @off TODO 很常用
        'no-warning-comments': 'off',
        // 禁止使用 with
        'no-with': 'error',
        // Promise 的 reject 中必须传入 Error 对象，而不是字面量
        'prefer-promise-reject-errors': 'error',
        // parseInt 必须传入第二个参数
        'radix': 'error',
        // async 函数中必须存在 await 语句
        // @off async function 中没有 await 的写法很常见，比如 koa 的示例中就有这种用法
        'require-await': 'off',
        // var 必须在作用域的最前面
        // @off var 不在最前面也是很常见的用法
        'vars-on-top': 'off',
        // @fixable 立即执行的函数必须符合如下格式 (function () { alert('Hello') })()
        'wrap-iife': [
            'error',
            'inside',
            {
                functionPrototypeMethods: true
            }
        ],
        // @fixable 必须使用 if (foo === 5) 而不是 if (5 === foo)
        'yoda': [
            'error',
            'never',
            {
                onlyEquality: true
            }
        ],



        // 严格模式
        // 这些规则与严格模式指令有关
        //
        // @fixable 禁止使用 'strict';
        'strict': [
            'error',
            'never'
        ],



        //
        //
        // 变量
        // 这些规则与变量申明有关
        //
        // 变量必须在定义的时候赋值
        // @off 先定义后赋值很常见
        'init-declarations': 'off',
        // 禁止 catch 的参数名与定义过的变量重复
        // @off 太严格了
        'no-catch-shadow': 'off',
        // 禁止使用 delete
        'no-delete-var': 'error',
        // 禁止 label 名称与定义过的变量重复
        'no-label-var': 'error',
        // 禁止使用指定的全局变量
        // @off 它用于限制某个具体的变量名不能使用
        'no-restricted-globals': 'off',
        // 禁止变量名与上层作用域内的定义过的变量重复
        // @off 很多时候函数的形参和传参是同名的
        'no-shadow': 'off',
        // 禁止使用保留字作为变量名
        'no-shadow-restricted-names': 'error',
        // 禁止使用未定义的变量
        'no-undef': [
            'error',
            {
                typeof: false
            }
        ],
        // @fixable 禁止将 undefined 赋值给变量
        'no-undef-init': 'error',
        // 禁止对 undefined 重新赋值
        'no-undefined': 'error',
        // 定义过的变量必须使用
        'no-unused-vars': [
            'error',
            {
                vars: 'all',
                args: 'none',
                caughtErrors: 'none',
                ignoreRestSiblings: true
            }
        ],
        // 变量必须先定义后使用
        'no-use-before-define': [
            'error',
            {
                functions: false,
                classes: false,
                variables: false
            }
        ],



        //
        //
        // Node.js 和 CommonJS
        // 这些规则与在 Node.js 中运行的代码或浏览器中使用的 CommonJS 有关
        //
        // callback 之后必须立即 return
        // @off Limitations 太多了
        'callback-return': 'off',
        // require 必须在全局作用域下
        // @off 条件加载很常见
        'global-require': 'off',
        // callback 中的 error 必须被处理
        'handle-callback-err': 'error',
        // 禁止直接使用 Buffer
        'no-buffer-constructor': 'error',
        // 相同类型的 require 必须放在一起
        // @off 太严格了
        'no-mixed-requires': 'off',
        // 禁止直接 new require('foo')
        'no-new-require': 'error',
        // 禁止对 __dirname 或 __filename 使用字符串连接
        'no-path-concat': 'error',
        // 禁止使用 process.env.NODE_ENV
        // @off 使用很常见
        'no-process-env': 'off',
        // 禁止使用 process.exit(0)
        // @off 使用很常见
        'no-process-exit': 'off',
        // 禁止使用指定的模块
        // @off 它用于限制某个具体的模块不能使用
        'no-restricted-modules': 'off',
        // 禁止使用 node 中的同步的方法，比如 fs.readFileSync
        // @off 使用很常见
        'no-sync': 'off',



        //
        //
        // 风格问题
        // 这些规则与代码风格有关，所以是非常主观的
        //
        // @fixable 配置数组的中括号内前后的换行格式
        // @off 配置项无法配制成想要的样子
        'array-bracket-newline': 'off',
        // @fixable 数组的括号内的前后禁止有空格
        'array-bracket-spacing': [
            'error',
            'never'
        ],
        // @fixable 配置数组的元素之间的换行格式
        // @off 允许一行包含多个元素，方便大数量的数组的书写
        'array-element-newline': 'off',
        // @fixable 代码块如果在一行内，那么大括号内的首尾必须有空格，比如 function () { alert('Hello') }
        'block-spacing': [
            'error',
            'always'
        ],
        // @fixable if 与 else 的大括号风格必须一致
        // @off else 代码块可能前面需要有一行注释
        'brace-style': 'off',
        // 变量名必须是 camelcase 风格的
        // @off 很多 api 或文件名都不是 camelcase
        'camelcase': 'off',
        // @fixable 注释的首字母必须大写
        // @off 没必要限制
        'capitalized-comments': 'off',
        // @fixable 对象的最后一个属性末尾必须有逗号
        // @off 没必要限制
        'comma-dangle': 'off',
        // @fixable 逗号前禁止有空格，逗号后必须要有空格
        'comma-spacing': [
            'error',
            {
                'before': false,
                'after': true
            }
        ],
        // @fixable 禁止在行首写逗号
        'comma-style': [
            'error',
            'last'
        ],
        // @fixable 用作对象的计算属性时，中括号内的首尾禁止有空格
        'computed-property-spacing': [
            'error',
            'never'
        ],
        // 限制 this 的别名
        // @off 没必要限制
        'consistent-this': 'off',
        // @fixable 文件最后一行必须有一个空行
        // @off 没必要限制
        'eol-last': 'off',
        // @fixable 函数名和执行它的括号之间禁止有空格
        'func-call-spacing': [
            'error',
            'never'
        ],
        // 函数赋值给变量的时候，函数名必须与变量名一致
        'func-name-matching': [
            'error',
            'always',
            {
                includeCommonJSModuleExports: false
            }
        ],
        // 函数必须有名字
        // @off 没必要限制
        'func-names': 'off',
        // 必须只使用函数声明或只使用函数表达式
        // @off 没必要限制
        'func-style': 'off',
        // 禁止使用指定的标识符
        // @off 它用于限制某个具体的标识符不能使用
        'id-blacklist': 'off',
        // 限制变量名长度
        // @off 没必要限制变量名长度
        'id-length': 'off',
        // 限制变量名必须匹配指定的正则表达式
        // @off 没必要限制变量名
        'id-match': 'off',
        // @fixable 一个缩进必须用四个空格替代
        'indent': [
            'error',
            4,
            {
                SwitchCase: 1,
                flatTernaryExpressions: true
            }
        ],
        // @fixable jsx 中的属性必须用双引号
        'jsx-quotes': [
            'error',
            'prefer-double'
        ],
        // @fixable 对象字面量中冒号前面禁止有空格，后面必须有空格
        'key-spacing': [
            'error',
            {
                beforeColon: false,
                afterColon: true,
                mode: 'strict',
            }
        ],
        // @fixable 关键字前后必须有空格
        'keyword-spacing': [
            'error',
            {
                before: true,
                after: true
            }
        ],
        // 单行注释必须写在上一行
        // @off 没必要限制
        'line-comment-position': 'off',
        // @fixable 限制换行符为 LF 或 CRLF
        // @off 没必要限制
        'linebreak-style': 'off',
        // @fixable 注释前后必须有空行
        // @off 没必要限制
        'lines-around-comment': 'off',
        // 代码块嵌套的深度禁止超过 5 层
        'max-depth': [
            'error',
            5
        ],
        // 限制一行的长度
        // @off 现在编辑器已经很智能了，不需要限制一行的长度
        'max-len': 'off',
        // 限制一个文件最多的行数
        // @off 没必要限制
        'max-lines': 'off',
        // 回调函数嵌套禁止超过 3 层，多了请用 async await 替代
        'max-nested-callbacks': [
            'error',
            3
        ],
        // 函数的参数禁止超过 7 个
        'max-params': [
            'error',
            7
        ],
        // 限制函数块中的语句数量
        // @off 没必要限制
        'max-statements': 'off',
        // 限制一行中的语句数量
        // @off 没必要限制
        'max-statements-per-line': 'off',
        // 三元表达式必须得换行
        // @off 三元表达式可以随意使用
        'multiline-ternary': 'off',
        // new 后面的类名必须首字母大写
        'new-cap': [
            'error',
            {
                newIsCap: true,
                capIsNew: false,
                properties: true
            }
        ],
        // @fixable new 后面的类必须有小括号
        'new-parens': 'error',
        // 链式调用必须换行
        // @off 没必要限制
        'newline-per-chained-call': 'off',
        // 禁止使用 Array 构造函数
        'no-array-constructor': 'error',
        // 禁止使用位运算
        // @off 位运算很常见
        'no-bitwise': 'off',
        // 禁止使用 continue
        // @off continue 很常用
        'no-continue': 'off',
        // 禁止在代码后添加内联注释
        // @off 内联注释很常用
        'no-inline-comments': 'off',
        // @fixable 禁止 else 中只有一个单独的 if
        // @off 单独的 if 可以把逻辑表达的更清楚
        'no-lonely-if': 'off',
        // 禁止混用不同的操作符，比如 let foo = a && b < 0 || c > 0 || d + 1 === 0
        // @off 太严格了，可以由使用者自己去判断如何混用操作符
        'no-mixed-operators': 'off',
        // 禁止混用空格和缩进
        'no-mixed-spaces-and-tabs': 'error',
        // 禁止连续赋值，比如 a = b = c = 5
        // @off 没必要限制
        'no-multi-assign': 'off',
        // @fixable 禁止出现超过三行的连续空行
        'no-multiple-empty-lines': [
            'error',
            {
                max: 3,
                maxEOF: 1,
                maxBOF: 1
            }
        ],
        // 禁止 if 里面有否定的表达式，比如：
        // if (a !== b) {
        //     doSomething();
        // } else {
        //     doSomethingElse();
        // }
        // @off 否定的表达式可以把逻辑表达的更清楚
        'no-negated-condition': 'off',
        // 禁止使用嵌套的三元表达式，比如 a ? b : c ? d : e
        // @off 没必要限制
        'no-nested-ternary': 'off',
        // 禁止直接 new Object
        'no-new-object': 'error',
        // 禁止使用 ++ 或 --
        // @off 没必要限制
        'no-plusplus': 'off',
        // 禁止使用特定的语法
        // @off 它用于限制某个具体的语法不能使用
        'no-restricted-syntax': 'off',
        // 禁止使用 tabs
        'no-tabs': 'error',
        // 禁止使用三元表达式
        // @off 三元表达式很常用
        'no-ternary': 'off',
        // @fixable 禁止行尾有空格
        'no-trailing-spaces': 'error',
        // 禁止变量名出现下划线
        // @off 下划线在变量名中很常用
        'no-underscore-dangle': 'off',
        // @fixable 必须使用 !a 替代 a ? false : true
        // @off 后者表达的更清晰
        'no-unneeded-ternary': 'off',
        // @fixable 禁止属性前有空格，比如 foo. bar()
        'no-whitespace-before-property': 'error',
        // @fixable 禁止 if 后面不加大括号而写两行代码
        'nonblock-statement-body-position': [
            'error',
            'beside',
            {
                overrides: {
                    while: 'below'
                }
            }
        ],
        // @fixable 大括号内的首尾必须有换行
        'object-curly-newline': [
            'error',
            {
                multiline: true,
                consistent: true
            }
        ],
        // @fixable 对象字面量只有一行时，大括号内的首尾必须有空格
        'object-curly-spacing': [
            'error',
            'always',
            {
                arraysInObjects: true,
                objectsInObjects: false
            }
        ],
        // @fixable 对象字面量内的属性每行必须只有一个
        // @off 没必要限制
        'object-property-newline': 'off',
        // 禁止变量申明时用逗号一次申明多个
        'one-var': [
            'error',
            'never'
        ],
        // @fixable 变量申明必须每行一个
        'one-var-declaration-per-line': [
            'error',
            'always'
        ],
        // @fixable 必须使用 x = x + y 而不是 x += y
        // @off 没必要限制
        'operator-assignment': 'off',
        // @fixable 需要换行的时候，操作符必须放在行末，比如：
        // let foo = 1 +
        //     2
        // @off 有时放在第二行开始处更易读
        'operator-linebreak': 'off',
        // @fixable 代码块首尾必须要空行
        // @off 没必要限制
        'padded-blocks': 'off',
        // @fixable 限制语句之间的空行规则，比如变量定义完之后必须要空行
        // @off 没必要限制
        'padding-line-between-statements': 'off',
        // @fixable 对象字面量的键名禁止用引号括起来
        // @off 没必要限制
        'quote-props': 'off',
        // @fixable 必须使用单引号，禁止使用双引号
        'quotes': [
            'error',
            'single',
            {
                avoidEscape: true,
                allowTemplateLiterals: true
            }
        ],
        // 必须使用 jsdoc 风格的注释
        // @off 太严格了
        'require-jsdoc': 'off',
        // @fixable 结尾必须有分号
        'semi': [
            'error',
            'always',
            {
                omitLastInOneLineBlock: true
            }
        ],
        // @fixable 一行有多个语句时，分号前面禁止有空格，分号后面必须有空格
        'semi-spacing': [
            'error',
            {
                before: false,
                after: true
            }
        ],
        // @fixable 分号必须写在行尾，禁止在行首出现
        'semi-style': [
            'error',
            'last'
        ],
        // 对象字面量的键名必须排好序
        // @off 没必要限制
        'sort-keys': 'off',
        // 变量申明必须排好序
        // @off 没必要限制
        'sort-vars': 'off',
        // @fixable if, function 等的大括号之前必须要有空格，比如 if (a) {
        'space-before-blocks': [
            'error',
            'always'
        ],
        // @fixable function 的小括号之前必须要有空格
        'space-before-function-paren': [
            'error',
            {
                anonymous: 'ignore',
                named: 'never',
                asyncArrow: 'always'
            }
        ],
        // @fixable 小括号内的首尾禁止有空格
        'space-in-parens': [
            'error',
            'never'
        ],
        // @fixable 操作符左右必须有空格，比如 let sum = 1 + 2;
        'space-infix-ops': 'error',
        // @fixable new, typeof 等后面必须有空格，++, -- 等禁止有空格，比如：
        // let foo = new Person();
        // bar = bar++;
        'space-unary-ops': [
            'error',
            {
                words: true,
                nonwords: false
            }
        ],
        // @fixable 注释的斜线或 * 后必须有空格
        'spaced-comment': [
            'error',
            'always',
            {
                block: {
                    exceptions: [
                        '*'
                    ],
                    balanced: true
                }
            }
        ],
        // @fixable case 的冒号前禁止有空格，冒号后必须有空格
        'switch-colon-spacing': [
            'error',
            {
                after: true,
                before: false
            }
        ],
        // @fixable 模版字符串的 tag 之后禁止有空格，比如 tag`Hello World`
        'template-tag-spacing': [
            'error',
            'never'
        ],
        // @fixable 文件开头禁止有 BOM
        'unicode-bom': [
            'error',
            'never'
        ],
        // @fixable 正则表达式必须有括号包起来
        // @off 没必要限制
        'wrap-regex': 'off',



        //
        //
        // ECMAScript 6
        // 这些规则与 ES6（即通常所说的 ES2015）有关
        //
        // @fixable 箭头函数能够省略 return 的时候，必须省略，比如必须写成 () => 0，禁止写成 () => { return 0 }
        // @off 箭头函数的返回值，应该允许灵活设置
        'arrow-body-style': 'off',
        // @fixable 箭头函数只有一个参数的时候，必须加括号
        // @off 应该允许灵活设置
        'arrow-parens': 'off',
        // @fixable 箭头函数的箭头前后必须有空格
        'arrow-spacing': [
            'error',
            {
                before: true,
                after: true
            }
        ],
        // constructor 中必须有 super
        'constructor-super': 'error',
        // @fixable generator 的 * 前面禁止有空格，后面必须有空格
        'generator-star-spacing': [
            'error',
            {
                before: false,
                after: true
            }
        ],
        // 禁止对定义过的 class 重新赋值
        'no-class-assign': 'error',
        // @fixable 禁止出现难以理解的箭头函数，比如 let x = a => 1 ? 2 : 3
        'no-confusing-arrow': [
            'error',
            {
                allowParens: true
            }
        ],
        // 禁止对使用 const 定义的常量重新赋值
        'no-const-assign': 'error',
        // 禁止重复定义类
        'no-dupe-class-members': 'error',
        // 禁止重复 import 模块
        'no-duplicate-imports': 'error',
        // 禁止使用 new 来生成 Symbol
        'no-new-symbol': 'error',
        // 禁止 import 指定的模块
        // @off 它用于限制某个具体的模块不能使用
        'no-restricted-imports': 'off',
        // 禁止在 super 被调用之前使用 this 或 super
        'no-this-before-super': 'error',
        // @fixable 禁止出现没必要的计算键名，比如 let a = { ['0']: 0 };
        'no-useless-computed-key': 'error',
        // 禁止出现没必要的 constructor，比如 constructor(value) { super(value) }
        'no-useless-constructor': 'error',
        // @fixable 禁止解构时出现同样名字的的重命名，比如 let { foo: foo } = bar;
        'no-useless-rename': 'error',
        // @fixable 禁止使用 var
        'no-var': 'error',
        // @fixable 必须使用 a = {b} 而不是 a = {b: b}
        // @off 没必要强制要求
        'object-shorthand': 'off',
        // @fixable 必须使用箭头函数作为回调
        // @off 没必要强制要求
        'prefer-arrow-callback': 'off',
        // @fixable 申明后不再被修改的变量必须使用 const 来申明
        // @off 没必要强制要求
        'prefer-const': 'off',
        // 必须使用解构
        // @off 没必要强制要求
        'prefer-destructuring': 'off',
        // @fixable 必须使用 0b11111011 而不是 parseInt('111110111', 2)
        // @off 没必要强制要求
        'prefer-numeric-literals': 'off',
        // 必须使用 ...args 而不是 arguments
        // @off 没必要强制要求
        'prefer-rest-params': 'off',
        // @fixable 必须使用 ... 而不是 apply，比如 foo(...args)
        // @off  apply 很常用
        'prefer-spread': 'off',
        // @fixable 必须使用模版字符串而不是字符串连接
        // @off 字符串连接很常用
        'prefer-template': 'off',
        // generator 函数内必须有 yield
        'require-yield': 'error',
        // @fixable ... 的后面禁止有空格
        'rest-spread-spacing': [
            'error',
            'never'
        ],
        // @fixable import 必须按规则排序
        // @off 没必要强制要求
        'sort-imports': 'off',
        // 创建 Symbol 时必须传入参数
        'symbol-description': 'error',
        // @fixable ${name} 内的首尾禁止有空格
        'template-curly-spacing': [
            'error',
            'never'
        ],
        // @fixable yield* 后面必须要有空格
        'yield-star-spacing': [
            'error',
            'after'
        ],

        // -------------------------react---------------------
        // 布尔值类型的 propTypes 的 name 必须为 is 或 has 开头
        // @off 不强制要求写 propTypes
        'react/boolean-prop-naming': 'off',
        // 一个 defaultProps 必须有对应的 propTypes
        // @off 不强制要求写 propTypes
        'react/default-props-match-prop-types': 'off',
        // 组件必须有 displayName 属性
        // @off 不强制要求写 displayName
        'react/display-name': 'off',
        // 禁止在自定义组件中使用一些指定的 props
        // @off 没必要限制
        'react/forbid-component-props': 'off',
        // 禁止使用一些指定的 elements
        // @off 没必要限制
        'react/forbid-elements': 'off',
        // 禁止使用一些指定的 propTypes
        // @off 不强制要求写 propTypes
        'react/forbid-prop-types': 'off',
        // 禁止直接使用别的组建的 propTypes
        // @off 不强制要求写 propTypes
        'react/forbid-foreign-prop-types': 'off',
        // 禁止使用数组的 index 作为 key
        // @off 太严格了
        'react/no-array-index-key': 'off',
        // 禁止使用 children 做 props
        'react/no-children-prop': 'error',
        // 禁止使用 dangerouslySetInnerHTML
        // @off 没必要限制
        'react/no-danger': 'off',
        // 禁止在使用了 dangerouslySetInnerHTML 的组建内添加 children
        'react/no-danger-with-children': 'error',
        // 禁止使用已废弃的 api
        'react/no-deprecated': 'error',
        // 禁止在 componentDidMount 里面使用 setState
        // @off 同构应用需要在 didMount 里写 setState
        'react/no-did-mount-set-state': 'off',
        // 禁止在 componentDidUpdate 里面使用 setState
        'react/no-did-update-set-state': 'error',
        // 禁止直接修改 this.state
        'react/no-direct-mutation-state': 'error',
        // 禁止使用 findDOMNode
        'react/no-find-dom-node': 'error',
        // 禁止使用 isMounted
        'react/no-is-mounted': 'error',
        // 禁止在一个文件创建两个组件
        // @off 有一个 bug https://github.com/yannickcr/eslint-plugin-react/issues/1181
        'react/no-multi-comp': 'off',
        // 禁止在 PureComponent 中使用 shouldComponentUpdate
        'react/no-redundant-should-component-update': 'error',
        // 禁止使用 ReactDOM.render 的返回值
        'react/no-render-return-value': 'error',
        // 禁止使用 setState
        // @off setState 很常用
        'react/no-set-state': 'off',
        // 禁止拼写错误
        'react/no-typos': 'error',
        // 禁止使用字符串 ref
        'react/no-string-refs': 'error',
        // 禁止在组件的内部存在未转义的 >, ", ' 或 }
        'react/no-unescaped-entities': 'error',
        // @fixable 禁止出现 HTML 中的属性，如 class
        'react/no-unknown-property': 'error',
        // 禁止出现未使用的 propTypes
        // @off 不强制要求写 propTypes
        'react/no-unused-prop-types': 'off',
        // 定义过的 state 必须使用
        // @off 没有官方文档，并且存在很多 bug： https://github.com/yannickcr/eslint-plugin-react/search?q=no-unused-state&type=Issues&utf8=%E2%9C%93
        'react/no-unused-state': 'off',
        // 禁止在 componentWillUpdate 中使用 setState
        'react/no-will-update-set-state': 'error',
        // 必须使用 Class 的形式创建组件
        'react/prefer-es6-class': [
            'error',
            'always'
        ],
        // 必须使用 pure function
        // @off 没必要限制
        'react/prefer-stateless-function': 'off',
        // 组件必须写 propTypes
        // @off 不强制要求写 propTypes
        'react/prop-types': 'off',
        // 出现 jsx 的地方必须 import React
        // @off 已经在 no-undef 中限制了
        'react/react-in-jsx-scope': 'off',
        // 非 required 的 prop 必须有 defaultProps
        // @off 不强制要求写 propTypes
        'react/require-default-props': 'off',
        // 组件必须有 shouldComponentUpdate
        // @off 没必要限制
        'react/require-optimization': 'off',
        // render 方法中必须有返回值
        'react/require-render-return': 'error',
        // @fixable 组件内没有 children 时，必须使用自闭和写法
        // @off 没必要限制
        'react/self-closing-comp': 'off',
        // @fixable 组件内方法必须按照一定规则排序
        'react/sort-comp': 'error',
        // propTypes 的熟悉必须按照字母排序
        // @off 没必要限制
        'react/sort-prop-types': 'off',
        // style 属性的取值必须是 object
        'react/style-prop-object': 'error',
        // HTML 中的自闭和标签禁止有 children
        'react/void-dom-elements-no-children': 'error',
        // @fixable 布尔值的属性必须显式的写 someprop={true}
        // @off 没必要限制
        'react/jsx-boolean-value': 'off',
        // @fixable 自闭和标签的反尖括号必须与尖括号的那一行对齐
        'react/jsx-closing-bracket-location': [
            'error',
            {
                nonEmpty: false,
                selfClosing: 'line-aligned'
            }
        ],
        // @fixable 结束标签必须与开始标签的那一行对齐
        // @off 已经在 jsx-indent 中限制了
        'react/jsx-closing-tag-location': 'off',
        // @fixable 大括号内前后禁止有空格
        'react/jsx-curly-spacing': [
            'error',
            {
                when: 'never',
                attributes: {
                    allowMultiline: true
                },
                children: true,
                spacing: {
                    objectLiterals: 'never'
                }
            }
        ],
        // @fixable props 与 value 之间的等号前后禁止有空格
        'react/jsx-equals-spacing': [
            'error',
            'never'
        ],
        // 限制文件后缀
        // @off 没必要限制
        'react/jsx-filename-extension': 'off',
        // @fixable 第一个 prop 必须得换行
        // @off 没必要限制
        'react/jsx-first-prop-new-line': 'off',
        // handler 的名称必须是 onXXX 或 handleXXX
        // @off 没必要限制
        'react/jsx-handler-names': 'off',
        // @fixable jsx 的 children 缩进必须为四个空格
        'react/jsx-indent': [
            'error',
            4
        ],
        // @fixable jsx 的 props 缩进必须为四个空格
        'react/jsx-indent-props': [
            'error',
            4
        ],
        // 数组中的 jsx 必须有 key
        'react/jsx-key': 'error',
        // @fixable 限制每行的 props 数量
        // @off 没必要限制
        'react/jsx-max-props-per-line': 'off',
        // jsx 中禁止使用 bind
        // @off 太严格了
        'react/jsx-no-bind': 'off',
        // 禁止在 jsx 中使用像注释的字符串
        'react/jsx-no-comment-textnodes': 'error',
        // 禁止出现重复的 props
        'react/jsx-no-duplicate-props': 'error',
        // 禁止在 jsx 中出现字符串
        // @off 没必要限制
        'react/jsx-no-literals': 'off',
        // 禁止使用 target="_blank"
        // @off 没必要限制
        'react/jsx-no-target-blank': 'off',
        // 禁止使用未定义的 jsx elemet
        'react/jsx-no-undef': 'error',
        // 禁止使用 pascal 写法的 jsx，比如 <TEST_COMPONENT>
        'react/jsx-pascal-case': 'error',
        // @fixable props 必须排好序
        // @off 没必要限制
        'react/jsx-sort-props': 'off',
        // @fixable jsx 的开始和闭合处禁止有空格
        'react/jsx-tag-spacing': [
            'error',
            {
                closingSlash: 'never',
                beforeSelfClosing: 'always',
                afterOpening: 'never'
            }
        ],
        // jsx 文件必须 import React
        'react/jsx-uses-react': 'error',
        // 定义了的 jsx element 必须使用
        'react/jsx-uses-vars': 'error',
        // @fixable 多行的 jsx 必须有括号包起来
        // @off 没必要限制
        'react/jsx-wrap-multilines': 'off'
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177

3.项目根目录下新建 .eslintignore,添加忽略检查的目录或者文件

.DS_Store
node_modules/

build

dist
docs
src/serviceWorker.js

1
2
3
4
5
6
7
8

4.修改 package.json

"lint": "eslint --ext .js --ext .jsx src/",
"lint-fix": "eslint --fix --ext .js --ext .jsx src/", // 可以自动修复的

1
2

eslint 不检测这行代码 // eslint-disable-line  
eslint 不检测这个文件，在开头 /* eslint-disable */

1
2

5.vscode 配置
- setting.json 参考配置（接的安装插件）

{
    "view-in-browser.customBrowser": "chrome",
    "editor.tabSize": 2,
    "editor.fontSize": 16,

    "files.associations": {
        "*.vue":"html"
    },
    "editor.formatOnPaste": true,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.snippetSuggestions": "top",
    "workbench.colorTheme": "Monokai",
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.options": {
        "plugins": [
            "html"
        ]
    },
    "eslint.autoFixOnSave": true,
    "window.restoreWindows": "all",
    "javascript.format.enable": false,
    "prettier.singleQuote": true,
    // 点击保存时，根据 eslint 规则自定修复，同时集成 prettier 到 eslint 中
    "prettier.eslintIntegration": true,
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

遇到问题

1 .'import' and 'export' may appear only with 'sourceType: module'

# .eslintrc.js 中设置下面的就可以了
 "parserOptions": {
    "sourceType": "module"
  },

1
2
3
4

参考：ssues#10397

2 .Eslint 全局变量报错 xxx is not defined

如：jquery中的 $ 同样适用。
/* global $ */

/* global 全局变量 */ 这样就可以了


也可以在 eslint 配置文件找那个配置全局变量

1
2
3
4
5
6
7

1. error Parsing error: Unexpected token ..

experimentalObjectRestSpread // 被废弃，使用ecmaVersion 代替，配置了可以，去掉有报错了

parserOptions: {
    parser: "babel-eslint",
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true // 被废弃，使用ecmaVersion 代替
    },
    "sourceType": "module"
  },

1
2
3
4
5
6
7
8
9

最终配置 React 项目的ESLint的校验规则如下所示：

module.exports = {
  root: true, // 以当前目录为根目录，不再向上查找 .eslintrc.js
  parserOptions: {
    parser: "babel-eslint", // --脚本解析--, EsLint默认使用esprima做脚本解析
    ecmaVersion: 6, // https://eslint.org/docs/user-guide/configuring#deprecated 中说experimentalObjectRestSpread 被废弃，有ecmaVersion 代替
    sourceType: "module", // 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
    /*
    ecmaFeatures - 这是个对象，表示你想使用的额外的语言特性:
      globalReturn - 允许在全局作用域下使用 return 语句
      impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
      jsx - 启用 JSX
      experimentalObjectRestSpread - 启用对实验性的 object rest/spread properties //的支持。(重要：这是一个实验性的功能,在未来可能会改变明显。
    */
    ecmaFeatures: {
      experimentalObjectRestSpread: true, // 支持扩展运算符
      jsx: true,
      arrowFunctions: true, // 后来不支持箭头函数，就加了这个，但还是报错
      classes: true,
      modules: true,
      defaultParams: true
    }
  },
  // --环境定义--
  env: {
    browser: true,
    node: true,
    commonjs: true,
    es6: true
  },
  //--定义全局变量--
  globals: {

  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  // 配置第三方插件
  plugins: [
    "react"
  ],
  /*
  <!--配置规则-->
    <!--"off" 或 0 - 关闭规则-->
    <!--"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)-->
    <!--"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)-->
  */
  // add your custom rules here
  rules: {
    // 禁止 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': 'off',
    // 禁止将常量作为分支条件判断中的测试表达式，但允许作为循环条件判断中的测试表达式
    '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 语句必须有 default
    // @off 太严格了
    'default-case': 'off',
    // @fixable 链式调用的时候，点号必须放在第二行开头处，禁止放在第一行结尾处
    'dot-location': [
      'error',
      'property'
    ],
    // @fixable 禁止出现 foo['bar']，必须写成 foo.bar
    // @off 当需要写一系列属性的时候，可以更统一
    'dot-notation': 'off',
    // @fixable 必须使用 === 或 !==，禁止使用 == 或 !=，与 null 比较时除外
    'eqeqeq': [
      'error',
      'always',
      {
        null: 'ignore'
      }
    ],
    // for in 内部必须有 hasOwnProperty
    'guard-for-in': 'error',
    // 禁止使用 alert
    // @off alert 很常用
    'no-alert': 'off',
    // 禁止使用 caller 或 callee
    'no-caller': 'error',
    // switch 的 case 内有变量定义的时候，必须使用大括号将 case 内变成一个代码块
    'no-case-declarations': 'error',
    // 禁止在正则表达式中出现形似除法操作符的开头，如 let a = /=foo/
    // @off 有代码高亮的话，在阅读这种代码时，也完全不会产生歧义或理解上的困难
    'no-div-regex': 'off',
    // @fixable 禁止在 else 内使用 return，必须改为提前结束
    // @off else 中使用 return 可以使代码结构更清晰
    'no-else-return': 'off',
    // 不允许有空函数，除非是将一个空函数设置为某个项的默认值
    'no-empty-function': [
      'error',
      {
        allow: [
          'functions',
          'arrowFunctions'
        ]
      }
    ],
    // 禁止解构中出现空 {} 或 []
    'no-empty-pattern': 'error',
    // 禁止使用 foo == null 或 foo != null，必须使用 foo === null 或 foo !== null
    // @off foo == null 用于判断 foo 不是 undefined 并且不是 null，比较常用，故允许此写法
    'no-eq-null': 'off',
    // 禁止使用 eval
    'no-eval': 'error',
    // 禁止修改原生对象
    'no-extend-native': 'error',
    // @fixable 禁止出现没必要的 bind
    'no-extra-bind': 'error',
    // @fixable 禁止出现没必要的 label
    'no-extra-label': 'error',
    // switch 的 case 内必须有 break, return 或 throw
    'no-fallthrough': 'error',
    // @fixable 表示小数时，禁止省略 0，比如 .5
    'no-floating-decimal': 'error',
    // 禁止对全局变量赋值
    'no-global-assign': 'error',
    // @fixable 禁止使用 !! ~ 等难以理解的运算符
    // 仅允许使用 !!
    'no-implicit-coercion': [
      'error',
      {
        allow: [
          '!!'
        ]
      }
    ],
    // 禁止在全局作用域下定义变量或申明函数
    'no-implicit-globals': 'error',
    // 禁止在 setTimeout 或 setInterval 中传入字符串，如 setTimeout('alert("Hi!")', 100);
    'no-implied-eval': 'error',
    // 禁止在类之外的地方使用 this
    // @off this 的使用很灵活，事件回调中可以表示当前元素，函数也可以先用 this，等以后被调用的时候再 call
    'no-invalid-this': 'off',
    // 禁止使用 __iterator__
    'no-iterator': 'error',
    // 禁止使用 label
    'no-labels': 'error',
    // 禁止使用没必要的 {} 作为代码块
    'no-lone-blocks': 'error',
    // 禁止在循环内的函数中出现循环体条件语句中定义的变量，比如：
    // for (var i = 0; i < 10; i++) {
    //     (function () { return i })();
    // }
    'no-loop-func': 'error',
    // 禁止使用 magic numbers
    // @off 太严格了
    'no-magic-numbers': 'off',
    // @fixable 禁止出现连续的多个空格，除非是注释前，或对齐对象的属性、变量定义、import 等
    'no-multi-spaces': [
      'error',
      {
        ignoreEOLComments: true,
        exceptions: {
          Property: true,
          BinaryExpression: false,
          VariableDeclarator: true,
          ImportDeclaration: true
        }
      }
    ],
    // 禁止使用 \ 来换行字符串
    'no-multi-str': 'off',
    // 禁止直接 new 一个类而不赋值
    'no-new': 'error',
    // 禁止使用 new Function，比如 let x = new Function("a", "b", "return a + b");
    'no-new-func': 'error',
    // 禁止使用 new 来生成 String, Number 或 Boolean
    'no-new-wrappers': 'error',
    // 禁止使用 0 开头的数字表示八进制数
    'no-octal': 'error',
    // 禁止使用八进制的转义符
    'no-octal-escape': 'error',
    // 禁止对函数的参数重新赋值
    'no-param-reassign': 'error',
    // 禁止使用 __proto__
    'no-proto': 'error',
    // 禁止重复定义变量
    'no-redeclare': 'error',
    // 禁止使用指定的对象属性
    // @off 它用于限制某个具体的 api 不能使用
    'no-restricted-properties': 'off',
    // 禁止在 return 语句里赋值
    'no-return-assign': [
      'error',
      'always'
    ],
    // 禁止在 return 语句里使用 await
    'no-return-await': 'error',
    // 禁止出现 location.href = 'javascript:void(0)';
    'no-script-url': 'error',
    // 禁止将自己赋值给自己
    'no-self-assign': 'error',
    // 禁止将自己与自己比较
    'no-self-compare': 'error',
    // 禁止使用逗号操作符
    'no-sequences': 'error',
    // 禁止 throw 字面量，必须 throw 一个 Error 对象
    'no-throw-literal': 'error',
    // 循环内必须对循环条件的变量有修改
    'no-unmodified-loop-condition': 'error',
    // 禁止无用的表达式
    'no-unused-expressions': [
      'error',
      {
        allowShortCircuit: true,
        allowTernary: true,
        allowTaggedTemplates: true
      }
    ],
    // @fixable 禁止出现没用的 label
    'no-unused-labels': 'error',
    // 禁止出现没必要的 call 或 apply
    'no-useless-call': 'error',
    // 禁止出现没必要的字符串连接
    'no-useless-concat': 'error',
    // 禁止出现没必要的转义
    // @off 转义可以使代码更易懂
    'no-useless-escape': 'off',
    // @fixable 禁止没必要的 return
    // @off 没必要限制 return
    'no-useless-return': 'off',
    // 禁止使用 void
    'no-void': 'error',
    // 禁止注释中出现 TODO 和 FIXME
    // @off TODO 很常用
    'no-warning-comments': 'off',
    // 禁止使用 with
    'no-with': 'error',
    // Promise 的 reject 中必须传入 Error 对象，而不是字面量
    'prefer-promise-reject-errors': 'error',
    // parseInt 必须传入第二个参数
    'radix': 'error',
    // async 函数中必须存在 await 语句
    // @off async function 中没有 await 的写法很常见，比如 koa 的示例中就有这种用法
    'require-await': 'off',
    // var 必须在作用域的最前面
    // @off var 不在最前面也是很常见的用法
    'vars-on-top': 'off',
    // @fixable 立即执行的函数必须符合如下格式 (function () { alert('Hello') })()
    'wrap-iife': [
      'error',
      'inside',
      {
        functionPrototypeMethods: true
      }
    ],
    // @fixable 必须使用 if (foo === 5) 而不是 if (5 === foo)
    'yoda': [
      'error',
      'never',
      {
        onlyEquality: true
      }
    ],

    // ------------严格模式-----------------
    // 这些规则与严格模式指令有关
    //
    // @fixable 禁止使用 'strict';
    'strict': [
      'error',
      'never'
    ],

    // -------------变量--------------------
    // 这些规则与变量申明有关
    //
    // 变量必须在定义的时候赋值
    // @off 先定义后赋值很常见
    'init-declarations': 'off',
    // 禁止 catch 的参数名与定义过的变量重复
    // @off 太严格了
    'no-catch-shadow': 'off',
    // 禁止使用 delete
    'no-delete-var': 'error',
    // 禁止 label 名称与定义过的变量重复
    'no-label-var': 'error',
    // 禁止使用指定的全局变量
    // @off 它用于限制某个具体的变量名不能使用
    'no-restricted-globals': 'off',
    // 禁止变量名与上层作用域内的定义过的变量重复
    // @off 很多时候函数的形参和传参是同名的
    'no-shadow': 'off',
    // 禁止使用保留字作为变量名
    'no-shadow-restricted-names': 'error',
    // 禁止使用未定义的变量
    'no-undef': [
      'error',
      {
        typeof: false
      }
    ],
    // @fixable 禁止将 undefined 赋值给变量
    'no-undef-init': 'error',
    // 禁止对 undefined 重新赋值
    'no-undefined': 'error',
    // 定义过的变量必须使用
    'no-unused-vars': [
      'error',
      {
        vars: 'all',
        args: 'none',
        caughtErrors: 'none',
        ignoreRestSiblings: true
      }
    ],
    // 变量必须先定义后使用
    'no-use-before-define': [
      'error',
      {
        functions: false,
        classes: false,
        variables: false
      }
    ],

    // ----------------Node.js 和 CommonJS------------------
    // 这些规则与在 Node.js 中运行的代码或浏览器中使用的 CommonJS 有关
    //
    // callback 之后必须立即 return
    // @off Limitations 太多了
    'callback-return': 'off',
    // require 必须在全局作用域下
    // @off 条件加载很常见
    'global-require': 'off',
    // callback 中的 error 必须被处理
    'handle-callback-err': 'error',
    // 禁止直接使用 Buffer
    'no-buffer-constructor': 'error',
    // 相同类型的 require 必须放在一起
    // @off 太严格了
    'no-mixed-requires': 'off',
    // 禁止直接 new require('foo')
    'no-new-require': 'error',
    // 禁止对 __dirname 或 __filename 使用字符串连接
    'no-path-concat': 'error',
    // 禁止使用 process.env.NODE_ENV
    // @off 使用很常见
    'no-process-env': 'off',
    // 禁止使用 process.exit(0)
    // @off 使用很常见
    'no-process-exit': 'off',
    // 禁止使用指定的模块
    // @off 它用于限制某个具体的模块不能使用
    'no-restricted-modules': 'off',
    // 禁止使用 node 中的同步的方法，比如 fs.readFileSync
    // @off 使用很常见
    'no-sync': 'off',

    // ------------------风格问题--------------------
    // 这些规则与代码风格有关，所以是非常主观的
    //
    // @fixable 配置数组的中括号内前后的换行格式
    // @off 配置项无法配制成想要的样子
    'array-bracket-newline': 'off',
    // @fixable 数组的括号内的前后禁止有空格
    'array-bracket-spacing': [
      'error',
      'never'
    ],
    // @fixable 配置数组的元素之间的换行格式
    // @off 允许一行包含多个元素，方便大数量的数组的书写
    'array-element-newline': 'off',
    // @fixable 代码块如果在一行内，那么大括号内的首尾必须有空格，比如 function () { alert('Hello') }
    'block-spacing': [
      'error',
      'always'
    ],
    // @fixable if 与 else 的大括号风格必须一致
    // @off else 代码块可能前面需要有一行注释
    'brace-style': 'off',
    // 变量名必须是 camelcase 风格的
    // @off 很多 api 或文件名都不是 camelcase
    'camelcase': 'off',
    // @fixable 注释的首字母必须大写
    // @off 没必要限制
    'capitalized-comments': 'off',
    // @fixable 对象的最后一个属性末尾必须有逗号
    // @off 没必要限制
    'comma-dangle': 'off',
    // @fixable 逗号前禁止有空格，逗号后必须要有空格
    'comma-spacing': [
      'error',
      {
        'before': false,
        'after': true
      }
    ],
    // @fixable 禁止在行首写逗号
    'comma-style': [
      'error',
      'last'
    ],
    // @fixable 用作对象的计算属性时，中括号内的首尾禁止有空格
    'computed-property-spacing': [
      'error',
      'never'
    ],
    // 限制 this 的别名
    // @off 没必要限制
    'consistent-this': 'off',
    // @fixable 文件最后一行必须有一个空行
    // @off 没必要限制
    'eol-last': 'off',
    // @fixable 函数名和执行它的括号之间禁止有空格
    'func-call-spacing': [
      'error',
      'never'
    ],
    // 函数赋值给变量的时候，函数名必须与变量名一致
    'func-name-matching': [
      'error',
      'always',
      {
        includeCommonJSModuleExports: false
      }
    ],
    // 函数必须有名字
    // @off 没必要限制
    'func-names': 'off',
    // 必须只使用函数声明或只使用函数表达式
    // @off 没必要限制
    'func-style': 'off',
    // 禁止使用指定的标识符
    // @off 它用于限制某个具体的标识符不能使用
    'id-blacklist': 'off',
    // 限制变量名长度
    // @off 没必要限制变量名长度
    'id-length': 'off',
    // 限制变量名必须匹配指定的正则表达式
    // @off 没必要限制变量名
    'id-match': 'off',
    // @fixable 一个缩进必须用两个空格替代
    'indent': [
      'error',
      2,
      {
        SwitchCase: 1,
        flatTernaryExpressions: true
      }
    ],
    // @fixable jsx 中的属性必须用双引号
    'jsx-quotes': [
      'error',
      'prefer-double'
    ],
    // @fixable 对象字面量中冒号前面禁止有空格，后面必须有空格
    'key-spacing': [
      'error',
      {
        beforeColon: false,
        afterColon: true,
        mode: 'strict',
      }
    ],
    // @fixable 关键字前后必须有空格
    'keyword-spacing': [
      'error',
      {
        before: true,
        after: true
      }
    ],
    // 单行注释必须写在上一行
    // @off 没必要限制
    'line-comment-position': 'off',
    // @fixable 限制换行符为 LF 或 CRLF
    // @off 没必要限制
    'linebreak-style': 'off',
    // @fixable 注释前后必须有空行
    // @off 没必要限制
    'lines-around-comment': 'off',
    // 代码块嵌套的深度禁止超过 5 层
    'max-depth': [
      'error',
      5
    ],
    // 限制一行的长度
    // @off 现在编辑器已经很智能了，不需要限制一行的长度
    'max-len': 'off',
    // 限制一个文件最多的行数
    // @off 没必要限制
    'max-lines': 'off',
    // 回调函数嵌套禁止超过 3 层，多了请用 async await 替代
    'max-nested-callbacks': [
      'error',
      3
    ],
    // 函数的参数禁止超过 7 个
    'max-params': [
      'error',
      7
    ],
    // 限制函数块中的语句数量
    // @off 没必要限制
    'max-statements': 'off',
    // 限制一行中的语句数量
    // @off 没必要限制
    'max-statements-per-line': 'off',
    // 三元表达式必须得换行
    // @off 三元表达式可以随意使用
    'multiline-ternary': 'off',
    // new 后面的类名必须首字母大写
    'new-cap': [
      'error',
      {
        newIsCap: true,
        capIsNew: false,
        properties: true
      }
    ],
    // @fixable new 后面的类必须有小括号
    'new-parens': 'error',
    // 链式调用必须换行
    // @off 没必要限制
    'newline-per-chained-call': 'off',
    // 禁止使用 Array 构造函数
    'no-array-constructor': 'error',
    // 禁止使用位运算
    // @off 位运算很常见
    'no-bitwise': 'off',
    // 禁止使用 continue
    // @off continue 很常用
    'no-continue': 'off',
    // 禁止在代码后添加内联注释
    // @off 内联注释很常用
    'no-inline-comments': 'off',
    // @fixable 禁止 else 中只有一个单独的 if
    // @off 单独的 if 可以把逻辑表达的更清楚
    'no-lonely-if': 'off',
    // 禁止混用不同的操作符，比如 let foo = a && b < 0 || c > 0 || d + 1 === 0
    // @off 太严格了，可以由使用者自己去判断如何混用操作符
    'no-mixed-operators': 'off',
    // 禁止混用空格和缩进
    'no-mixed-spaces-and-tabs': 'error',
    // 禁止连续赋值，比如 a = b = c = 5
    // @off 没必要限制
    'no-multi-assign': 'off',
    // @fixable 禁止出现超过三行的连续空行
    'no-multiple-empty-lines': [
      'error',
      {
        max: 3,
        maxEOF: 1,
        maxBOF: 1
      }
    ],
    // 禁止 if 里面有否定的表达式，比如：
    // if (a !== b) {
    //     doSomething();
    // } else {
    //     doSomethingElse();
    // }
    // @off 否定的表达式可以把逻辑表达的更清楚
    'no-negated-condition': 'off',
    // 禁止使用嵌套的三元表达式，比如 a ? b : c ? d : e
    // @off 没必要限制
    'no-nested-ternary': 'off',
    // 禁止直接 new Object
    'no-new-object': 'error',
    // 禁止使用 ++ 或 --
    // @off 没必要限制
    'no-plusplus': 'off',
    // 禁止使用特定的语法
    // @off 它用于限制某个具体的语法不能使用
    'no-restricted-syntax': 'off',
    // 禁止使用 tabs
    'no-tabs': 'error',
    // 禁止使用三元表达式
    // @off 三元表达式很常用
    'no-ternary': 'off',
    // @fixable 禁止行尾有空格
    'no-trailing-spaces': 'error',
    // 禁止变量名出现下划线
    // @off 下划线在变量名中很常用
    'no-underscore-dangle': 'off',
    // @fixable 必须使用 !a 替代 a ? false : true
    // @off 后者表达的更清晰
    'no-unneeded-ternary': 'off',
    // @fixable 禁止属性前有空格，比如 foo. bar()
    'no-whitespace-before-property': 'error',
    // @fixable 禁止 if 后面不加大括号而写两行代码
    'nonblock-statement-body-position': [
      'error',
      'beside',
      {
        overrides: {
          while: 'below'
        }
      }
    ],
    // @fixable 大括号内的首尾必须有换行
    'object-curly-newline': [
      'error',
      {
        multiline: true,
        consistent: true
      }
    ],
    // @fixable 对象字面量只有一行时，大括号内的首尾必须有空格
    'object-curly-spacing': [
      'error',
      'always',
      {
        arraysInObjects: true,
        objectsInObjects: false
      }
    ],
    // @fixable 对象字面量内的属性每行必须只有一个
    // @off 没必要限制
    'object-property-newline': 'off',
    // 禁止变量申明时用逗号一次申明多个
    'one-var': [
      'error',
      'never'
    ],
    // @fixable 变量申明必须每行一个
    'one-var-declaration-per-line': [
      'error',
      'always'
    ],
    // @fixable 必须使用 x = x + y 而不是 x += y
    // @off 没必要限制
    'operator-assignment': 'off',
    // @fixable 需要换行的时候，操作符必须放在行末，比如：
    // let foo = 1 +
    //     2
    // @off 有时放在第二行开始处更易读
    'operator-linebreak': 'off',
    // @fixable 代码块首尾必须要空行
    // @off 没必要限制
    'padded-blocks': 'off',
    // @fixable 限制语句之间的空行规则，比如变量定义完之后必须要空行
    // @off 没必要限制
    'padding-line-between-statements': 'off',
    // @fixable 对象字面量的键名禁止用引号括起来
    // @off 没必要限制
    'quote-props': 'off',
    // @fixable 必须使用单引号，禁止使用双引号
    'quotes': [
      'error',
      'single',
      {
        avoidEscape: true,
        allowTemplateLiterals: true
      }
    ],
    // 必须使用 jsdoc 风格的注释
    // @off 太严格了
    'require-jsdoc': 'off',
    // @fixable 结尾必须有分号
    'semi': [
      'error',
      'always',
      {
        omitLastInOneLineBlock: true
      }
    ],
    // @fixable 一行有多个语句时，分号前面禁止有空格，分号后面必须有空格
    'semi-spacing': [
      'error',
      {
        before: false,
        after: true
      }
    ],
    // @fixable 分号必须写在行尾，禁止在行首出现
    'semi-style': [
      'error',
      'last'
    ],
    // 对象字面量的键名必须排好序
    // @off 没必要限制
    'sort-keys': 'off',
    // 变量申明必须排好序
    // @off 没必要限制
    'sort-vars': 'off',
    // @fixable if, function 等的大括号之前必须要有空格，比如 if (a) {
    'space-before-blocks': [
      'error',
      'always'
    ],
    // @fixable function 的小括号之前必须要有空格
    'space-before-function-paren': [
      'error',
      {
        anonymous: 'ignore',
        named: 'never',
        asyncArrow: 'always'
      }
    ],
    // @fixable 小括号内的首尾禁止有空格
    'space-in-parens': [
      'error',
      'never'
    ],
    // @fixable 操作符左右必须有空格，比如 let sum = 1 + 2;
    'space-infix-ops': 'error',
    // @fixable new, typeof 等后面必须有空格，++, -- 等禁止有空格，比如：
    // let foo = new Person();
    // bar = bar++;
    'space-unary-ops': [
      'error',
      {
        words: true,
        nonwords: false
      }
    ],
    // @fixable 注释的斜线或 * 后必须有空格
    'spaced-comment': [
      'error',
      'always',
      {
        block: {
          exceptions: [
            '*'
          ],
          balanced: true
        }
      }
    ],
    // @fixable case 的冒号前禁止有空格，冒号后必须有空格
    'switch-colon-spacing': [
      'error',
      {
        after: true,
        before: false
      }
    ],
    // @fixable 模版字符串的 tag 之后禁止有空格，比如 tag`Hello World`
    'template-tag-spacing': [
      'error',
      'never'
    ],
    // @fixable 文件开头禁止有 BOM
    'unicode-bom': [
      'error',
      'never'
    ],
    // @fixable 正则表达式必须有括号包起来
    // @off 没必要限制
    'wrap-regex': 'off',
    //
    //
    // ECMAScript 6
    // 这些规则与 ES6（即通常所说的 ES2015）有关
    //
    // @fixable 箭头函数能够省略 return 的时候，必须省略，比如必须写成 () => 0，禁止写成 () => { return 0 }
    // @off 箭头函数的返回值，应该允许灵活设置
    'arrow-body-style': 'off',
    // @fixable 箭头函数只有一个参数的时候，必须加括号
    // @off 应该允许灵活设置
    'arrow-parens': 'off',
    // @fixable 箭头函数的箭头前后必须有空格
    'arrow-spacing': [
      'error',
      {
        before: true,
        after: true
      }
    ],
    // constructor 中必须有 super
    'constructor-super': 'error',
    // @fixable generator 的 * 前面禁止有空格，后面必须有空格
    'generator-star-spacing': [
      'error',
      {
        before: false,
        after: true
      }
    ],
    // 禁止对定义过的 class 重新赋值
    'no-class-assign': 'error',
    // @fixable 禁止出现难以理解的箭头函数，比如 let x = a => 1 ? 2 : 3
    'no-confusing-arrow': [
      'error',
      {
        allowParens: true
      }
    ],
    // 禁止对使用 const 定义的常量重新赋值
    'no-const-assign': 'error',
    // 禁止重复定义类
    'no-dupe-class-members': 'error',
    // 禁止重复 import 模块
    'no-duplicate-imports': 'error',
    // 禁止使用 new 来生成 Symbol
    'no-new-symbol': 'error',
    // 禁止 import 指定的模块
    // @off 它用于限制某个具体的模块不能使用
    'no-restricted-imports': 'off',
    // 禁止在 super 被调用之前使用 this 或 super
    'no-this-before-super': 'error',
    // @fixable 禁止出现没必要的计算键名，比如 let a = { ['0']: 0 };
    'no-useless-computed-key': 'error',
    // 禁止出现没必要的 constructor，比如 constructor(value) { super(value) }
    'no-useless-constructor': 'error',
    // @fixable 禁止解构时出现同样名字的的重命名，比如 let { foo: foo } = bar;
    'no-useless-rename': 'error',
    // @fixable 禁止使用 var
    'no-var': 'error',
    // @fixable 必须使用 a = {b} 而不是 a = {b: b}
    // @off 没必要强制要求
    'object-shorthand': 'off',
    // @fixable 必须使用箭头函数作为回调
    // @off 没必要强制要求
    'prefer-arrow-callback': 'off',
    // @fixable 申明后不再被修改的变量必须使用 const 来申明
    // @off 没必要强制要求
    'prefer-const': 'off',
    // 必须使用解构
    // @off 没必要强制要求
    'prefer-destructuring': 'off',
    // @fixable 必须使用 0b11111011 而不是 parseInt('111110111', 2)
    // @off 没必要强制要求
    'prefer-numeric-literals': 'off',
    // 必须使用 ...args 而不是 arguments
    // @off 没必要强制要求
    'prefer-rest-params': 'off',
    // @fixable 必须使用 ... 而不是 apply，比如 foo(...args)
    // @off  apply 很常用
    'prefer-spread': 'off',
    // @fixable 必须使用模版字符串而不是字符串连接
    // @off 字符串连接很常用
    'prefer-template': 'off',
    // generator 函数内必须有 yield
    'require-yield': 'error',
    // @fixable ... 的后面禁止有空格
    'rest-spread-spacing': [
      'error',
      'never'
    ],
    // @fixable import 必须按规则排序
    // @off 没必要强制要求
    'sort-imports': 'off',
    // 创建 Symbol 时必须传入参数
    'symbol-description': 'error',
    // @fixable ${name} 内的首尾禁止有空格
    'template-curly-spacing': [
      'error',
      'never'
    ],
    // @fixable yield* 后面必须要有空格
    'yield-star-spacing': [
      'error',
      'after'
    ],
    // -------------------------react---------------------
    // 布尔值类型的 propTypes 的 name 必须为 is 或 has 开头
    // @off 不强制要求写 propTypes
    'react/boolean-prop-naming': 'off',
    // 一个 defaultProps 必须有对应的 propTypes
    // @off 不强制要求写 propTypes
    'react/default-props-match-prop-types': 'off',
    // 组件必须有 displayName 属性
    // @off 不强制要求写 displayName
    'react/display-name': 'off',
    // 禁止在自定义组件中使用一些指定的 props
    // @off 没必要限制
    'react/forbid-component-props': 'off',
    // 禁止使用一些指定的 elements
    // @off 没必要限制
    'react/forbid-elements': 'off',
    // 禁止使用一些指定的 propTypes
    // @off 不强制要求写 propTypes
    'react/forbid-prop-types': 'off',
    // 禁止直接使用别的组建的 propTypes
    // @off 不强制要求写 propTypes
    'react/forbid-foreign-prop-types': 'off',
    // 禁止使用数组的 index 作为 key
    // @off 太严格了
    'react/no-array-index-key': 'off',
    // 禁止使用 children 做 props
    'react/no-children-prop': 'error',
    // 禁止使用 dangerouslySetInnerHTML
    // @off 没必要限制
    'react/no-danger': 'off',
    // 禁止在使用了 dangerouslySetInnerHTML 的组建内添加 children
    'react/no-danger-with-children': 'error',
    // 禁止使用已废弃的 api
    'react/no-deprecated': 'error',
    // 禁止在 componentDidMount 里面使用 setState
    // @off 同构应用需要在 didMount 里写 setState
    'react/no-did-mount-set-state': 'off',
    // 禁止在 componentDidUpdate 里面使用 setState
    'react/no-did-update-set-state': 'error',
    // 禁止直接修改 this.state
    'react/no-direct-mutation-state': 'error',
    // 禁止使用 findDOMNode
    'react/no-find-dom-node': 'error',
    // 禁止使用 isMounted
    'react/no-is-mounted': 'error',
    // 禁止在一个文件创建两个组件
    // @off 有一个 bug https://github.com/yannickcr/eslint-plugin-react/issues/1181
    'react/no-multi-comp': 'off',
    // 禁止在 PureComponent 中使用 shouldComponentUpdate
    'react/no-redundant-should-component-update': 'error',
    // 禁止使用 ReactDOM.render 的返回值
    'react/no-render-return-value': 'error',
    // 禁止使用 setState
    // @off setState 很常用
    'react/no-set-state': 'off',
    // 禁止拼写错误
    'react/no-typos': 'error',
    // 禁止使用字符串 ref
    'react/no-string-refs': 'error',
    // 禁止在组件的内部存在未转义的 >, ", ' 或 }
    'react/no-unescaped-entities': 'error',
    // @fixable 禁止出现 HTML 中的属性，如 class
    'react/no-unknown-property': 'error',
    // 禁止出现未使用的 propTypes
    // @off 不强制要求写 propTypes
    'react/no-unused-prop-types': 'off',
    // 定义过的 state 必须使用
    // @off 没有官方文档，并且存在很多 bug： https://github.com/yannickcr/eslint-plugin-react/search?q=no-unused-state&type=Issues&utf8=%E2%9C%93
    'react/no-unused-state': 'off',
    // 禁止在 componentWillUpdate 中使用 setState
    'react/no-will-update-set-state': 'error',
    // 必须使用 Class 的形式创建组件
    'react/prefer-es6-class': [
      'error',
      'always'
    ],
    // 必须使用 pure function
    // @off 没必要限制
    'react/prefer-stateless-function': 'off',
    // 组件必须写 propTypes
    // @off 不强制要求写 propTypes
    'react/prop-types': 'off',
    // 出现 jsx 的地方必须 import React
    // @off 已经在 no-undef 中限制了
    'react/react-in-jsx-scope': 'off',
    // 非 required 的 prop 必须有 defaultProps
    // @off 不强制要求写 propTypes
    'react/require-default-props': 'off',
    // 组件必须有 shouldComponentUpdate
    // @off 没必要限制
    'react/require-optimization': 'off',
    // render 方法中必须有返回值
    'react/require-render-return': 'error',
    // @fixable 组件内没有 children 时，必须使用自闭和写法
    // @off 没必要限制
    'react/self-closing-comp': 'off',
    // @fixable 组件内方法必须按照一定规则排序
    'react/sort-comp': 'error',
    // propTypes 的熟悉必须按照字母排序
    // @off 没必要限制
    'react/sort-prop-types': 'off',
    // style 属性的取值必须是 object
    'react/style-prop-object': 'error',
    // HTML 中的自闭和标签禁止有 children
    'react/void-dom-elements-no-children': 'error',
    // @fixable 布尔值的属性必须显式的写 someprop={true}
    // @off 没必要限制
    'react/jsx-boolean-value': 'off',
    // @fixable 自闭和标签的反尖括号必须与尖括号的那一行对齐
    'react/jsx-closing-bracket-location': [
      'error',
      {
        nonEmpty: false,
        selfClosing: 'line-aligned'
      }
    ],
    // @fixable 结束标签必须与开始标签的那一行对齐
    // @off 已经在 jsx-indent 中限制了
    'react/jsx-closing-tag-location': 'off',
    // @fixable 大括号内前后禁止有空格
    'react/jsx-curly-spacing': [
      'error',
      {
        when: 'never',
        attributes: {
          allowMultiline: true
        },
        children: true,
        spacing: {
          objectLiterals: 'never'
        }
      }
    ],
    // @fixable props 与 value 之间的等号前后禁止有空格
    'react/jsx-equals-spacing': [
      'error',
      'never'
    ],
    // 限制文件后缀
    // @off 没必要限制
    'react/jsx-filename-extension': 'off',
    // @fixable 第一个 prop 必须得换行
    // @off 没必要限制
    'react/jsx-first-prop-new-line': 'off',
    // handler 的名称必须是 onXXX 或 handleXXX
    // @off 没必要限制
    'react/jsx-handler-names': 'off',
    // @fixable jsx 的 children 缩进必须为四个空格
    'react/jsx-indent': [
      'error',
      2
    ],
    // @fixable jsx 的 props 缩进必须为四个空格
    'react/jsx-indent-props': [
      'error',
      2
    ],
    // 数组中的 jsx 必须有 key
    'react/jsx-key': 'error',
    // @fixable 限制每行的 props 数量
    // @off 没必要限制
    'react/jsx-max-props-per-line': 'off',
    // jsx 中禁止使用 bind
    // @off 太严格了
    'react/jsx-no-bind': 'off',
    // 禁止在 jsx 中使用像注释的字符串
    'react/jsx-no-comment-textnodes': 'error',
    // 禁止出现重复的 props
    'react/jsx-no-duplicate-props': 'error',
    // 禁止在 jsx 中出现字符串
    // @off 没必要限制
    'react/jsx-no-literals': 'off',
    // 禁止使用 target="_blank"
    // @off 没必要限制
    'react/jsx-no-target-blank': 'off',
    // 禁止使用未定义的 jsx elemet
    'react/jsx-no-undef': 'error',
    // 禁止使用 pascal 写法的 jsx，比如 <TEST_COMPONENT>
    'react/jsx-pascal-case': 'error',
    // @fixable props 必须排好序
    // @off 没必要限制
    'react/jsx-sort-props': 'off',
    // @fixable jsx 的开始和闭合处禁止有空格
    'react/jsx-tag-spacing': [
      'error',
      {
        closingSlash: 'never',
        beforeSelfClosing: 'always',
        afterOpening: 'never'
      }
    ],
    // jsx 文件必须 import React
    'react/jsx-uses-react': 'error',
    // 定义了的 jsx element 必须使用
    'react/jsx-uses-vars': 'error',
    // @fixable 多行的 jsx 必须有括号包起来
    // @off 没必要限制
    'react/jsx-wrap-multilines': 'off'
  }
};

问题

1.1 箭头函数不支持，每次运行报错 Parsing error: Unexpected token

配置了 eslint ，可是还是报错,应该是 babel 的配置问题

于是 新建了 .babelrc 文件，增加配置；
运行 报错  Multiple configuration files found. Please remove one:

发现 package.json 里面配置的 babel,

于是配置 babel,

yarn add babel-preset-es2015 babel-preset-stage-0 --dev

"babel": {
    "presets": [
      "react-app",
      "es2015",
      "stage-0"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
    }

可是又出现：
Plugin/Preset files are not allowed to export objects, only functions.

原因：babel版本冲突，6和7版本改动较大，存在兼容问题

解决办法:

将babel版本全部升级为7，或者将版本全部降到6

https://github.com/babel/babel-upgrade

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

参考

← 2.1.2 Redux 使用 2.1.4 react router 使用 →

# 2.1.3 规范

# changelog

# eslint 引入

# 遇到问题

# 最终配置 React 项目的ESLint的校验规则如下所示：

# 问题

# 参考

2.1.3 规范

changelog

eslint 引入

遇到问题

最终配置 React 项目的ESLint的校验规则如下所示：

问题

参考