.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个文件都不能这样做。

errors是解决.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中使用的变量。从这里更改您的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

在您的package.json中，prop-types不会作为依赖项列出。正如错误所示，这个问题非常容易修复。在终端中运行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 type**array**is forbidden

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

如下所示：arrayOf(string)