ESLint 报告 'React' is not defined-JavaScript中文网-JavaScript教程资源分享门户

在前端开发过程中，我们常常依赖于 React，以便快速开发出优质的应用程序。但是，你是否遇到过在使用 ESLint 进行代码检查时，出现 'React' is not defined 的错误提示呢？这是因为 ESLint 不能自己识别 React，需要安装相应的插件进行支持。本篇文章将为你介绍如何解决 'React is not defined' 错误，让你的代码检查更加准确、高效。

ESLint 简介

ESLint 是一款能够帮助你检查 JavaScript 代码中的问题的工具。它可以使用不同的插件和配置文件来执行各种检查。通过编写自定义规则，将代码检查自动化，包括语法，代码风格和代码安全性等。ESLint 不仅支持基本的 JavaScript 语法，还支持 JSX 和 Flow 语法。

安装 React 插件

在解决 ESLint 报错之前，我们需要先安装 React 插件。React 插件可通过 npm 包管理器安装。在控制台输入以下命令即可进行安装：

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

安装成功后，你需要在你的配置文件中配置该插件。配置文件可以是.eslintrc.js / .eslintrc.json / .eslintrc.yaml 或 .eslintrc.yml 文件。为了方便演示，我们以 .eslintrc.js 作为示例来进行代码演示和解析。

配置 ESLint

在配置文件中添加如下代码：

module.exports = {
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "react/prop-types": 0
  }
};

我们需要在 extends 数组中添加 plugin:react/recommended，来告诉 ESLint 我们要使用 React 插件提供的规则以及推荐的配置。同时，在 plugins 中添加 react 插件。

添加完成后，你可以重新运行 ESLint 检查你的代码，你就会发现 React is not defined 的错误已经不再出现了。

常见配置

当然，实际项目中，我们需要根据具体情况进行配置。下面介绍一些常见的配置：

配置 React 版本

如果你是使用 React 16 或更高版本进行开发，你可以通过 parserOptions 进行相关配置。其中 JSX 支持可以打开，同时项目中你也需要安装相关版本的 babel 。

{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
    },
  }
}

配置忽略文件或目录

在项目中，一些文件或目录我们可能不需要进行代码检查。例如，node_modules 中的文件，babel 的编译文件或一些测试文件等。可以在配置文件中添加以下设置：

{
  "ignorePatterns": [
    "node_modules",
    "build",
    "coverage",
    "config-overrides.js",
    "serviceWorker.js",
    "registerServiceWorker.js",
    "src/setupProxy.js"
  ]
}

配置错误级别

我们可以使用不同的错误级别来告诉 ESLint 当前的规则是否应该被视为严重的问题。默认使用的是 error 级别，如果你想将警告级别降低，可以使用 warn。

{
  "rules": {
    "no-console": 1
  }
}

配置规则

你可以在 rules 中配置你自己的规则。部分规则可能会影响到你在编写 React 组件时的编码习惯，例如，你可能会关心你的组件是否在没有必要的情况下增加了不必要的更新等。

{
  "rules": {
    "react/no-unescaped-entities": 0,
    "react/no-unused-state": 1,
    "react/no-unknown-property": 2,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
  }
}

例如上述配置，react/no-unused-state 这条规则将被视为警告级别，并代表了它允许有一些不必要的 state。

总结

本文中，我们分享了如何安装 React 插件、配置文件和常见的配置方法，以解决 ESLint 报错 React is not defined 的问题。通过配置，ESLint 会自动帮助我们检查代码，使我们可以更加快速、高效地进行前端开发。

下面是完整的 .eslintrc.js 文件：

module.exports = {
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "react/prop-types": 0
  }
};

欢迎在评论区留言与我分享你对 ESLint 的看法和使用经验！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b4b1f5add4f0e0ffd915ba