.js 文件上的 eslint 错误

Question

我的代码库中充满了.js 文件，我正在对特定文件运行eslint。 我收到以下错误：

 1:8   error  'React' is defined but never used
                              no-unused-vars
1:27  error  Trailing spaces not allowed
                              no-trailing-spaces
2:1   error  'prop-types' should be listed in the project's dependencies. Run
'npm i -S prop-types' to add it  import/no-extraneous-dependencies
7:13  error  Arrow function used ambiguously with a conditional expression
                              no-confusing-arrow
11:3   error  Prop type `array` is forbidden
                              react/forbid-prop-types

我的.eslintrc.js

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
  },
  extends: [
    'airbnb',
    "plugin:react/recommended"
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
  },
  plugins: [
    'react'
  ],
  rules: {
    "react/jsx-uses-react": 1,
  },
};

我的Package.json

"devDependencies": {
    "@commitlint/cli": "^8.1.0",
    "@commitlint/config-conventional": "^8.1.0",
    "babel-cli": "6.18.0",
    "babel-plugin-dynamic-import-node": "1.0.0",
    "babel-plugin-react-intl": "2.2.0",
    "babel-plugin-react-transform": "2.0.2",
    "babel-plugin-transform-es2015-modules-commonjs": "6.18.0",
    "babel-plugin-transform-react-constant-elements": "6.9.1",
    "babel-plugin-transform-react-inline-elements": "6.8.0",
    "babel-plugin-transform-react-remove-prop-types": "0.2.11",
    "babel-preset-latest": "6.16.0",
    "babel-preset-react-hmre": "1.1.1",
    "circular-dependency-plugin": "2.0.0",
    "coveralls": "2.11.15",
    "css-loader": "^0.23.1",
    "enzyme": "^2.7.0",
    "eslint": "3.11.1",
    "eslint-config-airbnb": "13.0.0",
    "eslint-config-airbnb-base": "10.0.1",
    "eslint-import-resolver-webpack": "0.8.0",
    "eslint-plugin-import": "2.2.0",
    "eslint-plugin-jsx-a11y": "2.2.3",
    "eslint-plugin-react": "6.7.1",
    "eslint-plugin-redux-saga": "0.1.5",
    "eventsource-polyfill": "0.9.6",
    "exports-loader": "0.6.3",
    "file-loader": "^0.9.0",
    "html-loader": "0.4.4",
    "html-webpack-plugin": "2.24.1",
    "husky": "^3.0.5",
    "lint-staged": "^3.2.1",
    "ngrok": "2.2.4",
    "npm-run-all": "^4.1.5",
    "prettier": "^1.18.2",
    "standard-version": "^7.0.0",
    "webpack-dev-middleware": "^1.11.0",
    "webpack-hot-middleware": "^2.18.0"
}

我尝试了以下各种解决方案：

/*eslint-disable no-unused-vars*/
var React = require('react');
/*eslint-enable no-unused-vars*/

还有：

var React = require('react');    // eslint-disable-line no-unused-vars

但几乎无法处理 300-500 个文件。

期望解决.js文件中抛出的所有错误。

提前致谢。

Answer 1

npm install eslint-plugin-react --save-dev

在您的.eslintrc.json 中，在extends 下，包含以下插件：

{
 "plugins": [
    "react"
  ],
  "extends": ["eslint:recommended", "plugin:react/recommended"]
}

Answer 2

以下是每个错误的含义以及如何修复它们：

---

1:8 error 'React' is defined but never used:

Eslint no-unused-vars 规则无法识别 JSX 中使用的变量。 从此更改您的 eslint 规则：

rules: {
    "react/jsx-uses-react": 1,
},

到这里：

rules: {
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1
},

---

1:27 error Trailing spaces not allowed

您在行尾27 的某处有一个尾随空格，将其删除，错误就会消失。

---

2:1 error 'prop-types' should be listed in the project's dependencies. Run 'npm i -S prop-types' to add it

prop-types 未作为依赖项列在您的 package.json 中。就像错误所暗示的那样，这很容易解决。在您的终端中运行 npm i -S prop-types 以将其添加到您的 package.json。

---

7:13 error Arrow function used ambiguously with a conditional expression

如果不查看引发此错误的代码行，就很难修复这个问题。但我的猜测是您在arrow function 中使用conditional expression，如下所示：

const arrow = (boolean) => boolean ? true : false

将您的函数包装在括号中以解决此问题，如下所示：

const arrow = (boolean) => ( boolean ? true : false )

或者这个：

const arrow = (boolean) => { return boolean ? true : false }

---

11:3 error Prop typearrayis forbidden

Eslint 希望你在 prop-types 中使用 arrayOf 而不是 array：

类似这样的： arrayOf(string)