.js 文件上的 eslint 错误

Question

My codebase is full of .js files and I am running eslint on a particular file. I get below errors:

 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

My .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,
  },
};

My 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"
}

I tried with various solutions below:

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

And:

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

but can't do it for almost 300-500 files.

expectations is to resolve all the errors thrown in .js files.

Thanks in advance.

Answer 1

Here is what each of those errors mean and how to fix them:

---

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

Eslint no-unused-vars rule doesn't recognise variables used in JSX. Change your eslint rules from this:

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

To this:

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

---

1:27 error Trailing spaces not allowed

You have a trailing space somewhere on line 27 at the end of your line, remove it and the error should go away.

---

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

prop-types isn't listed in your package.json as a dependency. This one is pretty straight forward to fix, like the error suggests. Run npm i -S prop-types in your terminal to add it to your package.json .

---

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

It's quite hard to fix this one without seeing the line of code where this error throws from. But my guess is that you are using a conditional expression in an arrow function , something like this:

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

Wrap your function in parens to fix this issue like this:

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

Or this:

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

---

11:3 error Prop type array is forbidden

Eslint wants you to use arrayOf instead of array in your prop-types :

Something like this: arrayOf(string)

Answer 2

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

In your .eslintrc.json , under extends, include the following plugin:

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