如何使用弹出的CreateReact应用自定义ESLint规则

介绍

不管你喜欢空格还是制表符，分号还是不喜欢，单引号还是双引号，我们都同意代码库中一致性和清晰度的重要性。 Linting 是一种通过执行编码规则和标准来建立一致性和清晰度的方法。

使用 Create React App 创建的项目已经使用 ESLint 进行了 linting，并且已经使用合理的默认值进行了开箱即用的配置。对于大多数情况，这意味着您无需做任何其他事情，一切都会正常进行。在您想要自定义 linting 规则的情况下，以下文章应该会派上用场。

在本文中，您将探讨我们应该使用像 ESLint 这样的 linter 的原因以及如何在 Create React App 项目中自定义它。

先决条件

要完成本教程，您需要：

Node.js 的本地开发环境。关注【X7X】如何安装Node.js并创建本地开发环境【X76X】。

本教程已使用 Node v16.4.2、npm v7.19.1、react v17.0.2 和 eslint v7.11.0 进行了验证。

了解 Linting

编码总是为错误留有余地，尤其是对于像 JavaScript 这样松散类型的语言。通过在我们的代码编辑器和项目中实现 linter，我们甚至可以在执行代码之前发现错误，从而节省时间。

大多数流行的代码编辑器要么自动包含你正在使用的语言的 linter，要么提供多个扩展，以便你可以配置你喜欢如何在本地进行 lint。

虽然本地 linting 可以而且会节省我们的时间，但总有更大的图景——比如不同的代码编辑器和开发环境。

本文的重点是使用 ESLint 进行项目级 linting。

设置项目

让我们使用 Create React App 快速建立一个 React 项目。如果您不熟悉它并且需要一些帮助以开始使用，请参阅 Getting Comfortable Create React App。

首先，在终端运行：

npx create-react-app linter-demo

导航到目录：

cd linter-demo

然后启动应用程序：

npm start

瞧！我们现在有一个项目要测试。

弹出一个 Create React App 项目

像大多数开发中的东西一样，Create React App 几乎是魔法，直到你准备好进行一些细节的定制。

使用 Create React App 创建的项目中的默认设置的一个缺点是，您只能通过弹出或分叉项目来配置 ESLint，这对于大多数高级开发人员来说还有很多不足之处。遗憾的是，您无法集成 Prettier，更改规则以适应您的团队的风格，并且您被锁定在 Create React App 认为是最稳定的版本中，尽管哪些版本可能会解决您的独特问题。在灵活性方面还有很多不足之处。甚至有人抱怨和问题 Create React App 禁用了它建议遵循的规则。

要应用新配置，我们需要弹出。

警告：这篇文章专门用来指导你完成demo项目的弹出。如果您尝试弹出现有项目，请查阅文档以确保这是您的项目所需的操作过程，因为它是单向操作。

本质上，当我们弹出时，我们不再从 Create React App 内核获取我们项目的更新。不过，这当然不是世界末日，它允许更多的 linting 定制。

在终端运行：

npm run eject

确认提示，脚本将弹出您的项目。

添加到项目中的依赖项包括 @babel/core、babel-loader、babel-eslint、eslint、eslint-webpack-plugin 和 eslint-plugin-react .

eslint 是核心 JavaScript 短绒。
eslint-loader 告诉 webpack 你想在我们的构建中使用 eslint
babel-loader 用 webpack 转译我们的代码
babel-eslint 为有效的 ES6 代码提供 linting
eslint-plugin-react 扩展 ESLint 规则以涵盖 React

现在你有一个弹出的 Create React App 项目。

添加 ESLint 规则

ESLint 规则可以在各种文件中配置：.eslintrc.js、.eslintrc.cjs、.eslintrc.yaml、.eslintrc.yml、.eslintrc.json。对于这个演示，我们将修改现有的 package.json 文件。

如果我们不太清楚从哪里开始，像 eslint-config-airbnb 这样的风格指南允许我们配置我们的项目，类似于像 Airbnb 这样的行业领导者。为了实现他们的风格指南，我们需要做的就是安装相应的包。由于他们的规则一开始有点严格，我们将从更简单的东西开始。

在代码编辑器中打开 package.json 并将 rules 添加到 eslintConfig：

包.json

{
  "name": "linter-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    // ...
  },
  "scripts": {
    // ...
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "no-undef": [ 1 ]
    }
  },
  "browserslist": {
    // ...
  },
  "jest": {
    // ...
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}

此代码为 no-undef (no undefined) 定义了 rule。

发现错误

如果我们的项目中没有设置 linter，那么在编译代码之前很难发现错误。

你能找到我们在下面添加的错误吗？

应用程序.js

import React, { Component } from 'react';
import ReactLogo from './logo.svg';
import './App.css';

class Demo extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p classname="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

我们在 import 中更改了徽标的名称，但忘记在 src 属性中更改它。
我们还更改了我们的 class 名称，但忘记在 export 中更改它。

如果没有 linter，问题可能很难识别。正确的版本应该是这样的：

应用程序.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

使用 linter，会立即出现错误并提示我们存在大问题。就像拼写检查如何在您拼错单词时给出一条弯曲的红线一样，当出现错误时，linter 会给您一条弯曲的红线。

如果我们将鼠标悬停在相关的曲线上，linter 将为我们提供有关特定错误的更多信息，甚至提供有关该特定规则的更多信息的链接。

配置特定规则

像 ESLint 这样的 Linters 允许我们为我们希望代码的外观创建规则。这些规则包括从强制一致缩进 (indent) 到在大括号 (space-in-brackets) 中要求空格的任何内容。

ESLint 的驱动原则之一是它授权开发人员决定他们自己的规则，并且不强制或鼓励任何特定的标准。

所有规则都可以是必需的，用作警告，修改甚至禁用。在 ESLint 中，您不仅可以完全自定义单个规则，还可以禁用整个文件、一行，甚至只是与我们代码中特定行相关的规则。

我们都见过，甚至写过类似于以下示例的代码：

src/App.js

import React, { Component } from 'react';

import logo from './logo.svg';
import './App.css';

class App extends Component {
      render() {
return (
      <div className="App">

        <header className='App-header'>
          <img src={logo}
          className="App-logo"
          alt="logo" />
                    <h1
                    className="App-title">
            Welcome to React</h1>
        </header>
              <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

这段代码充满了不一致。狂野的缩进和间距使其难以阅读和理解。想象一下，如果代码库很大。挖掘代码似乎令人生畏、令人沮丧，并且可能会让你想请病假。

如果我们使用 linting 规则来防止这种情况，linter 会很快让我们知道这是不可接受的。

之前我们用一条规则修改了 package.json 文件。让我们添加一些更复杂的规则来观察我们的文件会发生什么：

包.json

{
  // ...
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "space-in-parens": [ 0, "always" ],
      "template-curly-spacing": [ 2, "always" ],
      "array-bracket-spacing": [ 2, "always" ],
      "object-curly-spacing": [ 2, "always" ],
      "computed-property-spacing": [ 2, "always" ],
      "no-multiple-empty-lines": [ 2, { "max": 1, "maxEOF": 0, "maxBOF": 0 } ],
      "quotes": [ 1, "single", "avoid-escape" ],
      "no-use-before-define": [ 2, { "functions": false } ],
      "semi": [0, "never"],
      "prefer-const": 1,
      "react/prefer-es6-class": 0,
      "react/jsx-filename-extension": 0,
      "react/jsx-curly-spacing": [ 2, "always" ],
      "react/jsx-indent": [ 2, 4 ],
      "react/prop-types": [ 1 ],
      "react/no-array-index-key": [ 1 ],
      "class-methods-use-this": [ 1 ],
      "no-undef": [ 1 ],
      "no-case-declarations": [ 1 ],
      "no-return-assign": [ 1 ],
      "no-param-reassign": [ 1 ],
      "no-shadow": [ 1 ],
      "camelcase": [ 1 ],
      "no-underscore-dangle" : [0, "always"]
    }
  }
  // ...
}

保存您的更改。

注意： 请务必关闭并重新打开您的 App.js 文件或重新加载编辑器窗口以查看反映的 linter 更改。

重新打开文件后，它应该显示以下错误：

花点时间研究进一步应用的五个规则：

quotes：允许您以三种方式之一定义字符串：单引号、双引号或反引号。
semi：强制或禁止分号
react/jsx-curly-spacing：在 JSX 道具和表达式中强制或禁止大括号内的空格
react/jsx-indent：验证缩进（空格、制表符）
no-undef：不允许未定义的变量

有关规则以及如何修改它们的更多信息，请查看 eslint 和 eslint-plugin-react 的规则。

修复多个错误

所以你有一个巨大的项目并且不知道ESLint，是吗？现在您正在 linting 并且对您看到的数百甚至数千个错误感到有些害怕？不要害怕！ ESLint 有一个功能，您可以在其中输入文件路径和 eslint --fix，它会自动修复每个不会在我们的项目中导致垃圾箱火灾的简单错误。

要在我们当前的项目中尝试此操作，请从您的终端运行以下命令：

./node_modules/eslint/bin/eslint.js --fix src/App.js

此命令显示还有一个错误：

虽然我们希望 eslint --fix 能够修复我们文件中的所有内容，但它有能力造成一些损害。所有项目都不是平等创建的，因此 ESLint 进行了一些修复。

最后一个错误，class-methods-use-this说得好点，类方法应该用this来引用当前类。我们稍后可能会想要更改它，但由于我们的项目是全新的，我们现在将忽略它。

我们可以通过三种不同的方式忽略这一点：

在整个项目中禁用规则
禁用该文件中的规则
禁用代码块上方行中的规则

因为这是我们可能希望在其他文件中使用的东西，所以我们不想在整个项目中禁用它，并且因为我们希望很容易找到它，所以我们将针对这个特定文件禁用它。

要禁用文件中的规则，请将以下注释添加到第一行：

src/App.js

/* eslint-disable class-methods-use-this */

重新运行该命令，它将忽略此规则。

结论

在本文中，您探讨了我们应该使用像 ESLint 这样的 linter 的原因以及如何在 Create React App 项目中自定义它。

我们与一些开发人员就 ESLint 如何为他们节省时间进行了头脑风暴，以下是我们提出的简短列表：

如果检测到任何错误，请停止构建。
强化好习惯。您是否使用了 var 而您可以使用 let 或 const？
帮助识别未使用或不必要的代码，从而实现精简的包。
提醒您使用对象破坏。
防止 undefined 变量。
潜在地识别丢失的文件或包。

既然我们已经为我们的项目定制了 ESLint 规则，我们就不需要再有制表符与空格的争论了！

此外，本文还讨论了通过从 Create React App 弹出来自定义 linting 规则，但也有使用 react-app-rewired 和 react-app-rewire-eslint 的替代解决方案。