如何在React中使用ESLint（附代码）在本教程中，我想指导你为React设置ESLint。为了了解Webpack和

在本教程中，我想指导你为React设置ESLint。为了了解Webpack和ESLint的基本设置，你应该浏览一下前面的教程。它还将告诉你ESLint给你的项目带来的代码风格改进的所有好处。

Webpack和Babel for React ESLint

首先，你需要确保你的*.babelrc*（或者package.json，如果你的Babel配置在这里的话）支持JSX，而且前面的教程中为ESLint提供的Webpack插件也已经安装。在你的Webpack构建中使用ESLint是很重要的，它可以为你的每一个运行Webpack的npm脚本强制执行你的代码风格。此外，Webpack还需要了解React（JSX）的情况：

...
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ["babel-loader"]
    }
  ]
  ...
  plugins: [new ESLintPlugin()],
  ...
};

这就是你需要为React介绍的第一个ESLint规则的一切。

React的ESLint规则

之前，你已经读到过有预配置的ESLint配置。也许你已经使用了Airbnb配置，它已经为React提供了规则。如果没有，简单回顾一下，你将如何为你的ESLint配置引入Airbnb风格指南。首先，安装Airbnb配置，以及它的所有同伴依赖：

npx install-peerdeps --dev eslint-config-airbnb

之后，你可以在ESLint的*.eslintrc*配置文件中引入它：

{
  "parser": "@babel/eslint-parser",
  "extends": ["airbnb"]
}

这就是了。在运行你的使用Webpack的npm启动脚本后，你应该在你的命令行上看到所有的ESLint违规行为，关于React但也包括JavaScript。如果你安装了IDE/编辑器扩展/插件，你也应该在那里看到ESLint违规。

Airbnb的ESLint配置只是许多流行的预配置ESLint规则集中的一个。如果你只是想在React上加倍努力，你可能想检查一下React的ESLint插件。它带有很多来自React社区的推荐。然而，如果你需要一个完整的ESLint解决方案，除了JavaScript之外，你可以使用Airbnb的代码风格建议。