如何使用弹出式创建 React 应用程序自定义 ESLint 规则

介绍

无论您是否喜欢空格或标签,半色彩或没有,单个或双重引文,我们都可以同意在代码库中的一致性和清晰度的重要性。

使用Create React App创建的项目已经在ESLint上运行并配置了合理的默认值框。对于大多数情况下,这意味着你没有其他事情要做,一切都会起作用。

在本文中,您将探索为什么我们应该使用 ESLint 这样的灯泡,以及如何在创建 React 应用程序项目中定制它。

前提条件

要完成本教程,您将需要:

Node.js 的本地开发环境遵循如何安装 Node.js 并创建本地开发环境。

本教程是用 Node v16.4.2, npm v7.19.1, react v17.0.2 和 eslint v7.11.2 进行验证的。

了解林肯

编码总是留下错误的余地,特别是在JavaScript等轻松打字的语言中。通过在我们的代码编辑器和项目中实现一个启动器,我们可以通过在执行代码之前发现错误来节省时间。

大多数流行的代码编辑器会自动为您所使用的语言添加一个链接,或者提供多个扩展,以便您可以配置您喜欢在本地进行链接的方式。

虽然本地编辑可以并将节省时间,但总有更大的画面 - 比如不同的代码编辑器和开发环境。

本文的重点将是与ESLint相关的项目级链接。

创建项目

如果您不熟悉 React 项目,并且需要一些帮助,请参阅 Getting Comfortable with Create React App。

首先,在终端运行:

1npx create-react-app linter-demo

导航到目录:

1cd linter-demo

然后开始应用:

1npm start

Voila!我们现在有一个项目要测试。

创建 React App 项目

像大多数在开发中的东西一样,‘Create React App’几乎是神奇的,直到你准备好进入一些粗糙的定制。

使用 Create React App 创建项目的默认功能的一个缺点是,您只能通过驱逐或扭曲项目来配置ESLint,这对于大多数先进的开发者来说留下了许多可取之处。不幸的是,您无法集成 Prettier,更改规则以适应您的团队的风格,并且您被锁定在Create React App版本中,尽管发布会可能会解决您的独特问题,但它仍然留下了许多可取之处在灵活性方面。

要应用新的配置,我们将需要排除。

<$>[警告] 警告: 本文专门旨在指导您通过驱逐演示项目。如果您试图驱逐现有项目,请参阅文档以确保这是您项目所需的行动过程,因为这是一个单向操作。

基本上,当我们退出时,我们不再从Create React App核心获得我们项目的更新,但这肯定不是世界末日,而且它允许更多的链接定制。

在终端运行:

1npm run eject

确认提示,脚本将驱逐您的项目。

在该项目中添加的依赖性包括@babel/core,babel-loader,babel-eslint,eslint,eslint-webpack-plugin和eslint-plugin-react。

*「slint」是核心的「JavaScript」插件 「slint-loader」告訴 webpack 您希望在我們的 build 中使用「slint」「babel-loader」將我們的代碼轉載到 webpack *「babel-eslint」為有效的 ES6 代碼提供插件 *「slint-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(https://github.com/airbnb/javascript/tree/master/react)。

在代码编辑器中打开package.json,并将规则添加到eslintConfig:

 1[label package.json]
 2{
 3  "name": "linter-demo",
 4  "version": "0.1.0",
 5  "private": true,
 6  "dependencies": {
 7    // ...
 8  },
 9  "scripts": {
10    // ...
11  },
12  "eslintConfig": {
13    "extends": [
14      "react-app",
15      "react-app/jest"
16    ],
17    "rules": {
18      "no-undef": [ 1 ]
19    }
20  },
21  "browserslist": {
22    // ...
23  },
24  "jest": {
25    // ...
26  },
27  "babel": {
28    "presets": [
29      "react-app"
30    ]
31  }
32}

这个代码定义了 no-undef (no undefined)的‘规则’。

发现错误

如果我们在我们的项目中没有一个启动器,那么在编译代码之前很难发现错误。

您能否找到我们下面添加的错误?

 1[label App.js]
 2import React, { Component } from 'react';
 3import ReactLogo from './logo.svg';
 4import './App.css';
 5
 6class Demo extends Component {
 7  render() {
 8    return (
 9      <div className="App">
10        <header className="App-header">
11          <img src={logo} className="App-logo" alt="logo" />
12          <h1 className="App-title">Welcome to React</h1>
13        </header>
14        <p classname="App-intro">
15          To get started, edit <code>src/App.js</code> and save to reload.
16        </p>
17      </div>
18    );
19  }
20}
21
22export default App;

我们在 import中更改了我们的标志名称,但忘记在 src prop中更改它 *我们也更改了我们的 class名称,但忘记在 export中更改它

没有灯具,问题可能很难识别,正确的版本应该是这样的:

 1[label App.js]
 2import React, { Component } from 'react';
 3import logo from './logo.svg';
 4import './App.css';
 5
 6class App extends Component {
 7  render() {
 8    return (
 9      <div className="App">
10        <header className="App-header">
11          <img src={logo} className="App-logo" alt="logo" />
12          <h1 className="App-title">Welcome to React</h1>
13        </header>
14        <p className="App-intro">
15          To get started, edit <code>src/App.js</code> and save to reload.
16        </p>
17      </div>
18    );
19  }
20}
21
22export default App;

用灯具,一个错误会立即出现,并提示我们有一个很大的问题,就像在错误写字时,拼写检查会给出一个红线一样,灯具会给你一个红线,当错误出现时。

Screenshot of an error tooltip stating: logo is not defined (no-undef).

如果我们绕过相关的,灯塔将为我们提供有关特定错误的更多信息,甚至提供有关该特定规则的更多信息的链接。

设定具体规则

像ESLint这样的插件允许我们创建我们希望我们的代码看起来如何的规则,这些规则包括从强制一致的插件(‘indent’)到(https://eslint.org/docs/rules/space-in-brackets)(‘space-in-brackets’)。

ESLint的指导原则之一是,它赋予开发人员决定自己的规则,不强制或鼓励任何特定标准。

在ESLint中,您不仅可以完全定制一个单一的规则,还可以禁用一个完整的文件,一个行,甚至只是一个与我们代码中的特定行相关的规则。

我们都见过,甚至写过,类似于下面的示例的代码:

 1[label src/App.js]
 2import React, { Component } from 'react';
 3
 4import logo from './logo.svg';
 5import './App.css';
 6
 7class App extends Component {
 8      render() {
 9return (
10      <div className="App">
11
12        <header className='App-header'>
13          <img src={logo}
14          className="App-logo"
15          alt="logo" />
16                    <h1
17                    className="App-title">
18            Welcome to React</h1>
19        </header>
20              <p className="App-intro">
21          To get started, edit <code>src/App.js</code> and save to reload.
22        </p>
23      </div>
24    );
25  }
26}
27
28export default App;

这个代码充满了不一致性. 野蛮的插入和间隔使其难以阅读和理解. 想象一下,如果代码库是大的. 挖掘通过代码会看起来令人不安,令人沮丧,并可能让你想打病。

如果我们使用条纹规则来防止这种情况,灯塔会很快告诉我们,这是不可接受的。

之前,我们用一个单一的规则修改了 package.json 文件. 让我们添加一些更复杂的规则来观察我们的文件发生了什么:

 1[label package.json]
 2{
 3  // ...
 4  "eslintConfig": {
 5    "extends": [
 6      "react-app",
 7      "react-app/jest"
 8    ],
 9    "rules": {
10      "space-in-parens": [ 0, "always" ],
11      "template-curly-spacing": [ 2, "always" ],
12      "array-bracket-spacing": [ 2, "always" ],
13      "object-curly-spacing": [ 2, "always" ],
14      "computed-property-spacing": [ 2, "always" ],
15      "no-multiple-empty-lines": [ 2, { "max": 1, "maxEOF": 0, "maxBOF": 0 } ],
16      "quotes": [ 1, "single", "avoid-escape" ],
17      "no-use-before-define": [ 2, { "functions": false } ],
18      "semi": [0, "never"],
19      "prefer-const": 1,
20      "react/prefer-es6-class": 0,
21      "react/jsx-filename-extension": 0,
22      "react/jsx-curly-spacing": [ 2, "always" ],
23      "react/jsx-indent": [ 2, 4 ],
24      "react/prop-types": [ 1 ],
25      "react/no-array-index-key": [ 1 ],
26      "class-methods-use-this": [ 1 ],
27      "no-undef": [ 1 ],
28      "no-case-declarations": [ 1 ],
29      "no-return-assign": [ 1 ],
30      "no-param-reassign": [ 1 ],
31      "no-shadow": [ 1 ],
32      "camelcase": [ 1 ],
33      "no-underscore-dangle" : [0, "always"]
34    }
35  }
36  // ...
37}

保存你的变化

<$>[注] 注: 请确保关闭并重新打开您的App.js文件或重新加载您的编辑器窗口,以查看表面变化反映。

重新打开文件后,应该显示以下错误:

Screenshot of previous code example with ESLint rules indicating errors in the code editor.

花一会儿来研究进一步应用的五个规则:

引用:允许您以三种方式定义字符串:单引用、双引用或后引用
semi:强制或不允许半字符串
react/jsx-curly-spacing:强制或不允许在JSX插件和表达式中的弯曲框内的空间
[`react/jsx-indent``(https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/docs/rules/jsx-indent.md):验证间隔(间隔,卡)
[no-funde(https://eslint.org/docs/rules/no-undef):不允许未定义的变量(_

有关规则以及如何修改规则的更多信息,请参阅 eslint和 eslint-plugin-react的规则。

修复多重错误

所以你有一个巨大的项目,你不知道ESLint,好吗?现在你正在排队,并且有点害怕你看到的数百甚至数千个错误?不要害怕!ESLint有一个功能,你输入文件路径和eslint -fix,它自动修复每一个简单的错误,不会在我们的项目中引起垃圾火灾。

要在我们当前的项目中尝试,请从您的终端运行以下操作:

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

这个命令显示有一个剩余的错误:

Screenshot of previous code example with ESLint rules indicating errors in the console.

虽然我们喜欢eslint --fix能够修复我们文件中的所有东西,但它有可能造成一些损坏。

最后的错误,类方法使用是一个很好的点,类方法应该使用这个来参考当前的类,我们可能希望稍后更改,但由于我们的项目是全新的,我们现在只会忽略它。

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

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

由于这是我们在其他文件中可能想要的东西,我们不希望在整个项目中禁用它,并且因为我们希望它可以很容易找到,我们只会禁用该特定文件。

若要禁用文件中的规则,请在第一行中添加以下评论:

1[label src/App.js]
2/* eslint-disable class-methods-use-this */

重启命令,它会忽略这个规则。

结论

在本文中,您探讨了为什么我们应该使用 ESLint 这样的灯泡,以及如何在创建 React 应用程序项目中定制它。

我们与几位开发人员进行了脑风暴,了解ESLint如何节省他们的时间,以下是我们提出的一些简短列表:

如果发现任何错误,停止构建
加强良好的习惯. 你是否使用了var在你可以使用let或const的地方?
帮助识别未使用或不必要的代码,从而导致小包
提醒你使用对象破坏
防止未定义变量
潜在识别缺失的文件或包

现在我们已经为我们的项目定制了 ESLint 规则,我们再也不需要有标签与空间争论了!

此外,本文讨论了通过从 Create React App 排除来定制链条规则,但还有一种使用 react-app-rewired和 react-app-rewire-eslint的替代解决方案。