react-native01： 配置eslint

1、下载插件

"babel-eslint": "^10.0.2", //必须下载
"eslint": "^6.0.1", //必须下载
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.18.0", //必须下载
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.14.2", //必须下载

vscode必须先装eslint的插件

eslint.png

2、在项目的根目录下面建一个.eslintrc.js文件
里面的代码如下：

module.exports = {
  // 环境里定义了一组预定义的全局变量
  "env": {
      "browser": true,
      "commonjs": true,
      "es6": true
  },
  // extends属性表示启用一系列核心规则，若有plugins属性表示同时启用插件的核心规则
  "extends": [
      "eslint:recommended",
      'plugin:react/recommended'
  ],
  // 设置解析器
  "parser": "babel-eslint",
  // 解析器选项
  "parserOptions": {
      // 表示一些附加特性的对象, 支持JSX
      "ecmaFeatures": {
          "jsx": true
      },
      // ECMAScript的版本
      "ecmaVersion": 2018,
      "sourceType": "module"
  },
  // 支持使用的第三方插件，在使用插件之前，你必须使用 npm 安装它。
  "plugins": [
      "react"
  ],
  // 规则配置
  "rules": {
      "indent": ["off","tab"],
      "linebreak-style": [ "off","windows"],
      "react/jsx-indent-props": ["error",  4],
      "react/no-direct-mutation-state": 2,
      "no-unused-vars":1,//变量定义未使用
      "no-console":2, //禁止出现console
      "no-use-before-define":2//不允许在变量定义之前使用
  }
};

效果如下：

image.png

参考文章：https://blog.csdn.net/zeping891103/article/details/85923084