RN配置eslint规则

在ReactNative配置git hooks进行eslint检查一文中有详细介绍ReactNative项目怎么添加git hooks，使得在git commit之前对代码进行eslint检查，本文记录一下对应的eslint规则。

eslint实用规则

规则继承自@react-native-community，在此基础上进行一些自定义的rules配置，具体含义可以在eslint官网查看具体说明是示例

module.exports = {
  root: true,
  extends: ['@react-native-community'],
  rules: {
    // 'off' or 0 - 关闭规则
    // 'warn' or 1 - 将规则视为一个警告（不会影响退出码）
    // 'error' or 2 - 将规则视为一个错误 (退出码为1)
    'new-parens': [2], //当通过 new 关键字调用构造函数时，要求使用圆括号，以此提高代码的清晰度
    'no-const-assign': 2, //禁止修改const声明的变量
    'no-redeclare': 2, //禁止重复声明变量
    'no-spaced-func': 2, //函数调用时 函数名与()之间不能有空格
    'no-this-before-super': 2, //在调用super()之前不能使用this或super
    'no-delete-var': 2, //不能对var声明的变量使用delete操作符
    'no-dupe-keys': 2, //在创建对象字面量时不允许键重复
    'no-dupe-args': 2, //函数参数不能重复
    'no-irregular-whitespace': 2, //不规则的空白不允许
    'no-cond-assign': [2], //条件判断语句中不允许赋值操作
    'for-direction': [2], // for循环的死循环检查
    'react/jsx-no-duplicate-props': [2], //防止在JSX中重复的props
    'jsx-quotes': [2, 'prefer-double'], //强制在JSX属性（jsx-quotes）中一致使用双引号
    'no-undef': 2, //不能使用未定义的变量
    'no-duplicate-case': [2], //禁止出现重复的 case 标签
    'no-unreachable': [2], //禁止在return、throw、continue 和 break 语句之后出现不可达代码
    'no-constant-condition': [2], //禁止在if里面写死值并发布
    'no-func-assign': [2], //禁止对function重新赋值
    'no-invalid-regexp': [2], // 禁止 RegExp 构造函数中存在无效的正则表达式字符串
    'no-obj-calls': [2], //该规则禁止将 Math、JSON 和 Reflect 对象当作函数进行调用。
    'no-sparse-arrays': [2], //该规则禁止使用稀疏数组，也就是逗号之前没有任何元素的数组。该规则不适用于紧随最后一个元素的拖尾逗号的情况。[2,,3]这种
    'no-unexpected-multiline': [2], //该规则禁止使用令人困惑的多行表达式。https://cn.eslint.org/docs/rules/no-unexpected-multiline
    'constructor-super': [2], //该规则旨在标记无效或缺失的 super() 调用。
    'no-dupe-class-members': [2], // //类里面不允许相同声明
    'no-unsafe-finally': [2], //该规则禁止在 finally 语句块中出现 return、throw、break 和 continue 语句。它允许间接使用，比如在 function 或 class 的定义中。
    'use-isnan': [2], //要求调用 isNaN()检查 NaN
    'no-tabs': [2], //禁用 tab
    'no-alert': [2], //alert 经常被用于调试代码，部署到生产环境之前应该删除。
    'no-eval': [2], //禁止使用eval
    'no-extend-native': [2], //禁止拓展原生对象（比如不要直接修改原生的Promise、Array等对象）
    'no-multi-spaces': [2, { ignoreEOLComments: true }], //禁止多余的空格，忽略注释前面的
    'no-multi-str': [2], //禁止多行字符串
    //在 async function， return await 是没有用的 。
    'no-return-await': [2], // 因为 async function 的返回值总是包裹在 Promise.resolve，在 Promise resolve 或 reject 之前，return await 实际上不会做任何事情。
    'no-self-compare': [2], //禁止自身比较,几乎没有场景需要你比较变量本身。
    'no-unmodified-loop-condition': [2], //禁用一成不变的循环条件
    quotes: [2, 'single'], //引号类型 `` '' ''
    'no-unused-vars': [2], //不允许出现没使用的变量
    'no-var': [2], //不允许使用var
    //----------------------下面为代码风格
    //有一个数组元素换行就都换行，要不就都不换
    'array-element-newline': [2, { multiline: true }],
    'brace-style': [2, '1tbs', { allowSingleLine: true }],
    'no-use-before-define': [2, { variables: false, functions: false, classes: false }], //变量定义前禁止使用,忽略会自动提升的funtion、class和const变量
    'react/jsx-uses-vars': [2], // React组件import使用需要加上这个配置项

    //暂时先警告，后续禁止的规则， start
    eqeqeq: [1], //要求使用 === 和 !==
    curly: [1], // 此规则目的在于，通过确保代码块使用了大括号包裹以避免bug的发生，并且增加代码的清晰度（由于之前很多if后面没有用大括号，因此现在只给警告，等后续优化后可以禁止）
    camelcase: [1, { properties: 'always' }], //驼峰,允许的示例（KEY_VALUE  ,   keyValue  , keyValue1  ）
    'no-trailing-spaces': 1, //一行结束后面有空格就发出警告
    'block-spacing': [1, 'always'], //大括号前后空格要求相同
    'no-extra-bind': [1], //禁止不必要的函数绑定
    'prefer-arrow-callback': [1], //要求使用箭头函数作为回调
    'no-duplicate-imports': [1], //禁止重复导入
    'no-empty-pattern': [1], //禁止使用空解构模式
    'no-warning-comments': [1, { terms: ['todo', 'fixme'], location: 'start' }], //监测注释是否含有todo与fix
    'no-else-return': [1, { allowElseIf: true }], //该规则旨在突出含有 return 语句的 if 语句后的不必要的代码。因此，当else 语句出现在含有 return 语句的 if 语句之后，该规则将发出警告。
    'consistent-this': [1], //为this指定别名,只允许使用that
    'no-sequences': [1], //不允许使用逗号操作符
    //暂时先警告，后续禁止的规则， end

    'no-mixed-operators': [1], //禁止混合使用不同的操作符
    'dot-notation': [1], //尽可能使用.访问对象属性，不过有些时候确实需要使用['key']的方式访问，因此我们使用警告
    'linebreak-style': [1, 'unix'], //换行符按mac来
    'react/jsx-key': 1, //在数组或迭代器中验证JSX具有key属性
    'no-console': [1], // 没有console
    'react/jsx-boolean-value': 1, //在JSX建议布尔属性符号

    //缩进，默认2个空格，基于base之下在添加2个空格,独立配置：SwitchCase（三目运算符的问题，导致无法部分缩进有问题，暂时未解决，先忽略此规则）
    'indent-legacy': [0, 2, { ObjectExpression: 2, SwitchCase: 1, VariableDeclarator: 1 }],

    'array-bracket-spacing': [
      0,
      'always',
      {
        singleValue: false,
        objectsInArrays: true,
        arraysInArrays: true,
      },
    ],

    'lines-between-class-members': [0, 'always', { exceptAfterSingleLine: false }], //要求在类成员之间出现空行,不要 跳过对单行类成员之后的空行的检查
    'valid-jsdoc': [0, { requireReturn: false, requireReturnType: false }], //强制使用有效的 JSDoc 注释
    'arrow-parens': [0], // 该规则强制箭头函数的参数使用圆括号括起来，不论参数数量如何
    'require-await': [0], //禁止使用不带 await 表达式的 async 函数
    'prefer-destructuring': [0], //优先使用解构
    'quote-props': [0], //对象字面量中的属性名是否强制双引号
    'array-bracket-newline': [0], //括号换行
    'object-curly-newline': [0, { multiline: true }], //(默认)如果在属性内部或属性之间有换行符，就要求有换行符
    // 'react/jsx-uses-react': 'error',
    'no-extra-semi': [0], //禁用不必要的分号
    'no-magic-numbers': [0], //魔术数字是在代码中多次出现的没有明确含义的数字。不过由于前端项目中设置像素需要使用，并且逻辑代码和css代码是在同文件中，因此放开检测
    'no-extra-parens': [0], //除了JSX组件，其他地方不允许出现多余的圆括号
    'arrow-body-style': [0], //箭头函数强制使用大括号,会添加return  小心使用
    'no-invalid-this': [0], //禁止 this 关键字在类或类对象之外出现
    radix: [0], //强制在 parseInt() 使用基数参数.从 2 到 36，表示字符串的基数。例如指定 16 表示被解析值是十六进制数。请注意，10不是默认值！

    experimentalDecorators: [0], // 为vscode配置的属性，在某些情况下如果不配置这个，vscode编译器一直报错‘the 'experimentalDecorators' option to remove this warning.’
  },
};