如何从头开始为你的项目配置 ESLint

2025-06-11

如何从头开始为你的项目配置 ESLint

ESLint 是一款代码检查工具，它可以帮助提升代码质量，并提前修复 bug，避免在运行时再次出现 bug。它还能避免将来出现难以调试的问题。

了解如何使用 ESLint 非常重要，因为大多数公司都在积极使用它。

还有其他可用的 linters，如 jslint、jshint，但 ESLint 是最广泛使用和最受欢迎的。

在本文中，我们将探讨什么是 ESLint 以及如何使用它。

让我们开始吧。

当发生以下情况时，ESLint 会显示警告或错误消息

  • 我们使用一个变量而没有声明它
  • 我们重新声明变量
  • 我们尝试改变常数值
  • 我们添加了不必要的括号
  • 当我们使用错误的语法时

ESLint 还根据首选代码风格和错误语法提供建议。

请注意，ESLint 仅显示警告或错误，以便您修复它们，但它不会阻止程序运行。

ESLint网站非常好，文档齐全，详细描述了每个部分以及与之相关的各种规则和信息。

安装：

创建一个名为的新文件夹eslint-setup，并从该文件夹内在终端中执行以下命令：

npm init -y

OR

yarn init -y
Enter fullscreen mode Exit fullscreen mode

这将创建一个package.json文件。

现在，将该eslint包安装为开发依赖项，因为它仅用于开发而不是生产。

npm install eslint --save-dev

OR

yarn add eslint --dev
Enter fullscreen mode Exit fullscreen mode

这会将eslint条目添加到文件devDependencies的部分package.json。

基本配置

index.js在您的文件夹中创建一个新文件eslint-setup，并在其中添加以下变量声明并保存：

var name;
Enter fullscreen mode Exit fullscreen mode

你会发现，没有显示任何错误。这是因为我们需要做两件事。

  • 安装 eslint VS Code 扩展
  • 创建 .eslintrc 文件

那么我们就这么做吧。

安装 ESLint VS Code 扩展，如下所示：

eslint.gif

现在创建一个新文件.eslintrc（doteslintrc），使用以下代码：

{
 "extends": "eslint:recommended"
}
Enter fullscreen mode Exit fullscreen mode

这将添加对基本推荐的 ESLint 规则的支持。保存文件，然后打开index.js，您将看到带有消息的变量带有红色下划线。

未使用

因此，ESLint 将确保您不会创建永远不会使用的不必要的变量。

错误消息中括号中的名称（no-unused-vars）是规则的名称，我们可以在.eslintrc文件中配置该规则以显示或隐藏消息。

如果您不想看到红色下划线，您可以.eslintrc通过在文件中添加规则来禁用它：

{
  "extends": "eslint:recommended",
  "rules": {
    "no-unused-vars": "off"
  }
}
Enter fullscreen mode Exit fullscreen mode

经过此更改，它将不再显示红色下划线，但通常情况下，您不应禁用该no-unused-vars规则，因为它有助于避免创建未使用的变量。

现在让我们在文件中使用一些 ES6 功能index.js：

打开index.js文件并在其中添加以下代码：

const user = 'Harry';
console.log(user);
Enter fullscreen mode Exit fullscreen mode

现在，您将看到 const 关键字的红色下划线。

保留.png

这是因为默认情况下 ESLint 在 ES5 环境中运行代码。

为了指定 ES6 并指定代码可以在浏览器或节点环境中运行，我们可以将其作为.eslintrc文件中的另一个属性添加：

{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 6
  },
  "env": {
    "node": true,
    "browser": true,
    "es6": true
  }
}
Enter fullscreen mode Exit fullscreen mode

在这里，parserOptions我们指定要使用哪个 ecmaVersion。

如果将鼠标悬停在数字 6 上，您可以看到有关所有可用版本的其他信息。

版本.png

您可以根据需要更改该值。

您可以在此处查看所有可用的环境。

导航到此URL并单击规则配置按钮，您可以选中或取消选中环境并通过在文本区域中输入来验证代码。

eslint 测试区域

根据 Airbnb 风格指南进行 Linting：

使用"extends": "eslint:recommended"内部.eslintrc文件是可以的，但它并未涵盖所有样式指南。Airbnb 提供的所有项目中都有更多可用且广泛使用的指南，您可以点击此处访问。

这些指导方针帮助我们

  • 在需要时避免使用新运算符创建对象。
  • 如果变量不会改变，当我们使用 let 而不是 const 时也会显示警告。
  • 帮助在使用运算符或函数时添加和避免额外的空格。等等。

Airbnb 提供 JavaScript 和 React linting 支持。

要仅对 JavaScript 进行 linting 而不使用 React，您可以安装以下依赖项：

npm install eslint-config-airbnb-base@latest eslint-plugin-import --save-dev

OR

yarn add eslint-config-airbnb-base@latest eslint-plugin-import --dev
Enter fullscreen mode Exit fullscreen mode

您可以在此处找到更多相关信息。

要使用 React 设置 JavaScript 的 linting，请安装以下依赖项：

npm install eslint-config-airbnb@latest eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --save-dev

OR

yarn add eslint-config-airbnb@latest eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --dev
Enter fullscreen mode Exit fullscreen mode

您可以在此处找到更多相关信息。

并在.eslintrc文件中，更改

"extends": "eslint:recommended",
Enter fullscreen mode Exit fullscreen mode

到

"extends": "airbnb",
Enter fullscreen mode Exit fullscreen mode

现在，让我们编写一些 React 代码并检查 linting。

现在，打开index.js文件并在其中添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => <h1>This is some JSX</h1>;

ReactDOM.render(<App />, document.getElementById('root'));
Enter fullscreen mode Exit fullscreen mode

如果您保存文件，您将看到许多红色下划线，内容为：

  • 无法找到包 react、react-dom
  • “App” 不会被重新赋值。请使用“const”
  • 扩展名为“js”的文件中不允许使用 JSX

错误_.png

要修复第一个错误，请安装react和react-dom包：

npm install react react-dom

OR

yarn add react react-dom
Enter fullscreen mode Exit fullscreen mode

现在，对于第二个错误，我们需要将其更改let为，const因为它从未改变过。

因此，始终建议const在其值不会改变时使用。

如您所见，linting 提供了有用的建议来帮助您编写更好的代码。

如果您想了解更多关于任何错误的含义，只需复制鼠标悬停在红色下划线上时括号中显示的规则名称，然后在 Google 中搜索即可。点赞后prefer-const eslint，它会显示有关如何修复以及它会导致哪些问题的所有信息。

要查找有关任何规则的更多信息以及如何禁用它，您可以在此处的规则页面上搜索该规则。

如果将鼠标悬停在第 6 行的 JSX 红色下划线上，您可以看到其规则名称“react/jsx-filename-extension”。

如果您无法在此处的规则页面上找到该规则，您可以在 Google 中搜索react/jsx-filename-extensioneslint，然后您将看到显示如何修复它的结果，如此处所示。

因此，为了禁用此检查，我们可以在文件中添加一条规则.eslintrc：

"rules": {
    "react/jsx-filename-extension": "off"
}
Enter fullscreen mode Exit fullscreen mode

禁用扩展程序错误.png

该值通常为以下之一：

  • 警告：显示为警告
  • 错误：显示为错误
  • off：不显示红色下划线

有时您可能会发现，文档中使用错误代码，而不是文本警告、错误或关闭。

0 表示关闭，1 表示警告，2 表示错误。

现在，如果您保存.eslintrc文件，您将看到文件中不再有红色下划线index.js。

本文就到这里。希望你学到了一些新东西。

感谢阅读！

您可以在此处找到本文的完整 Github 源代码，其中包含 .eslintrc 中的附加配置，以便更好地进行 linting 。

查看我最近发布的Mastering Redux课程。

在本课程中，您将构建 3 个应用程序以及食品订购应用程序，您将学习：

  • Redux 基础与高级
  • 如何管理数组和对象的复杂状态
  • 如何使用多个 Reducer 来管理复杂的 Redux 状态
  • 如何调试 Redux 应用程序
  • 如何在 React 中使用 Redux，使用 react-redux 库让你的应用程序具有响应性。
  • 如何使用 redux-thunk 库处理异步 API 调用等等

最后，我们将从头开始构建一个完整的食品订购应用程序，并通过条纹集成来接受付款并将其部署到生产中。

想要定期了解有关 JavaScript、React 和 Node.js 的最新内容吗？请在 LinkedIn 上关注我。

鏂囩珷鏉ユ簮锛�https://dev.to/myogeshchavan97/how-to-configure-eslint-for-your-project-from-scratch-4kg
Devto 翻译
PREV
JavaScript 中的多态性总结：结论：
NEXT
MongoDB 模式设计模式（一）