react-native 规范代码Eslint

简介

ESLint 是由 Nicholas C. Zakas 编写的一个可扩展、每条规则独立、不内置编码风格、可自定义规则为理念的 Lint 工具。
在团队协作中，为避免低级错误的产生和统一代码的风格，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。EsLint帮助我们检查Javascript编程时的语法错误。比如：在Javascript应用中，你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码，找到bug并确保一定程度的JS语法书写的正确性。

集成步骤(开发工具VSCode)

第一步：

第一种：进入项目所在文件夹（根目录），执行如下命令行

npm install -g install-peerdeps
install-peerdeps --dev eslint-config-airbnb 

第二种：进入项目所在文件夹,执行如下命令行(会出现红色错误，不用管执行完5条)

npm install eslint --save-dev  
npm install eslint-config-airbnb --save-dev  // （airbnb的规则）  
npm install eslint-plugin-import --save-dev  
npm install eslint-plugin-jsx-a11y --save-dev  // （airbnb规则依赖于这个库）  
npm install eslint-plugin-react --save-dev

第二步：

然后在项目根目录安装babel-eslint

如果用到了es6的新语法, 需要安装babel-eslint,不然会把箭头函数识别成错误

npm i --save-dev babel-eslint

第三步：

在项目的根目录下创建文件.eslintrc.yml，内容如下，可根据需求修改：

extends: airbnb
parser: babel-eslint
env:
  es6: true
  browser: true
  node: true
  mocha: true
settings:
  import/resolver:
    node:
      moduleDirectory:
        - node_modules
        - ./
rules:
  arrow-body-style: 0
  max-len: 0
  no-console: 0
  vars-on-top: 0
  global-require: 0
  no-restricted-syntax: 0
  no-use-before-define: 0
  no-underscore-dangle: 0
  no-param-reassign: 0
  no-class-assign: 0
  no-extra-boolean-cast: 0
  no-nested-ternary: 0
  eol-last: 0
  radix: 0
  class-methods-use-this:
    - 0
  consistent-return: 0
  react/jsx-filename-extension:
    - error
    - extensions:
      - .jsx
      - .js
  comma-dangle:
    - error
    - functions: ignore
      imports: always-multiline
      exports: always-multiline
      objects: always-multiline
      arrays: always-multiline
  jsx-quotes:
    - 2
    - prefer-single
  react/jsx-sort-props: 0
  react/jsx-space-before-closing: 0
  react/prefer-stateless-function: 0
  react/jsx-no-bind: 0
  react/jsx-first-prop-new-line: 0
  react/react-in-jsx-scope: 0
  react/no-multi-comp: 0
  react/prop-types: 0
  react/self-closing-comp: 0
  react/jsx-boolean-value: 0
  import/no-extraneous-dependencies: 0
  import/prefer-default-export: 0
  import/no-unresolved: 0
  jsx-a11y/no-static-element-interactions: 0
  semi:
    - error
    - never
  react/no-string-refs: 0
  

特别注意，.eslintrc.yml文件中最后一行要留空行才会生效！

另附：

报警告：propType "xxx" is not required,but has no corresponding defaultProp declaration.(react/require-default-props)

class NavigatorDefault extends React.Component {
  static propTypes = {
    leftIcon: PropTypes.number, // 报警告：propType "leftIcon" is not required,but has no corresponding defaultProp declaration.(react/require-default-props)
  }
}

去掉红色警告办法：

.eslintrc.yml文件添加如下：

// 在正则rules:下添加
react/require-default-props: 0