使用React类时ESlint出现问题，例如：'state'未定义。 (no-undef)

Question

我正在进行一个项目，当我在 MacBook 上克隆我的项目后，在 shell 中运行 yarn 安装包，并使用 atom . 打开我的 ATOM 后，ESLint 出现了一个“错误”。

例如，对于这段代码：

/*
 * Package Import
 */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';


/*
 * Code
 */
class UserDropdown extends Component {
  /*
   * PropTypes
   */
   static propTypes = {
     ... // Code 
   }


  /*
   * State
   */
   state = {
     ... // Code
   };

  /*
   * Actions
   */
   onLogOut = () => {
     ... // Code
   };

ESLint告诉我：

Error   ESLint  'propTypes' is not defined. (no-undef)  22:10
Error   ESLint  'state' is not defined. (no-undef)  32:3
Error   ESLint  'onLogOut' is not defined. (no-undef)   52:3

我仍在使用"babel-plugin-transform-class-properties": "^6.24.1"，并且我在我的brunch-config中声明它：

我的brunch-config.coffee

  plugins:
    babel:
      presets: ['latest', 'react']
      plugins: [
        'transform-class-properties'
        'transform-object-rest-spread'
      ]

我的.eslintrc

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "env": {
    "browser": true
  },
  "rules": {
    "brace-style": ["error", "stroustrup"],
    "no-param-reassign": ["error", { "props": false }],
    "no-mixed-operators": ["error", { "allowSamePrecedence": true }],
    "jsx-a11y/no-static-element-interactions": "off",
    "react/jsx-filename-extension": "off",
    "react/forbid-prop-types": "off",
    "react/no-unescaped-entities": "off",
    "linebreak-style": "off"
  },
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["app/"]
      }
    }
  }
}

我的 Packages.json 文件：

"devDependencies": {
"auto-reload-brunch": "^2.7.1",
"autoprefixer": "^6.7.7",
"babel-brunch": "^6.1.1",
"babel-eslint": "^7.2.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.24.1",
"babel-resolver": "^1.1.0",
"brunch": "^2.10.9",
"chai": "^3.5.0",
"enzyme": "^2.8.2",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-import-resolver-node": "^0.3.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",

我在使用两台电脑，其中在Linux上一切正常。有人有什么想法吗？如果需要更多代码来理解，我可以发送它。谢谢你！

- Alexandre Bourdeaud'hui

Answer 1

我曾经遇到过同样的问题，原因是我安装了ESLint 4。请检查您的package.json文件，确保它不像这样写："eslint": "^3.19.0 || ^4.3.0"。我正在使用create-react-app，但它尚未与ESLint 4兼容：https://github.com/facebookincubator/create-react-app/issues/2604

- jeanfredrik

---

你好，Fredrik！我使用的是3.19版本，但问题仍然存在。感谢您在GitHub上的反馈和链接。我可以看到，我的问题不仅仅是我一个人遇到的。因此，我正在等待新版本发布。也许我需要彻底卸载计算机上的ESLint以清除它，并安装ESLint 3.19的适当版本。谢谢！ - Alexandre Bourdeaud'hui

Answer 2

首先您需要将babel-eslint作为开发依赖项进行安装，然后在您的.eslintrc文件中添加：

"parser": "babel-eslint"

- zied hajsalah

---

抱歉，我忘记了我的packages.json文件，但是我在devDep中有它。 - Alexandre Bourdeaud'hui

所以也许 Atom 在运行 eslint 时使用了全局配置，请尝试全局安装 babel-eslint。 - zied hajsalah

Answer 3

升级 eslint。

npm i -D eslint@latest

- qinggangxu

Answer 4

我使用以下依赖项解决了这个问题：

package.json:

"dependencies": {
"react": "16.8.3",
"react-dom": "16.8.3",
"react-scripts": "2.1.8"
}

然后我做了：

yarn
npm install webpack@4.28.3
yarn start

而且它对我起作用了！

- mzalazar

Answer 5

我通过卸载 Node、Yarn 和 NPM 来解决了我的问题。我使用的是最新版本的 Node（实际上是 8.2.1，同样适用于 NPM 和 Yarn...）

所以在安装 Node LTS（6.11.1）后，我就没有遇到任何关于 ESLint 的问题，一切都很正常。

编辑：重新安装 Yarn（0.27.5）之后，这个问题又出现了 :thinking:

- Alexandre Bourdeaud'hui