ESLint:什么、为什么、何时、如何

2025-06-07

ESLint:什么、为什么、何时、如何

什么是 ESLint?

ESLint 是一款开源的 JavaScript 代码检查工具,最初由 Nicholas C. Zakas 于 2013 年 6 月创建。它常用于查找有问题的模式或不符合特定代码规范的代码。ESLint 使用 Node.js 编写,提供快速的运行时环境,并可通过 npm 轻松安装。
使用 ESLint,您可以使用一组独立的规则来强制执行编码标准。是的,您可以启用或禁用这些规则。这些规则完全可插拔。

为什么要使用 ESLint?

JavaScript 是一种动态且弱类型的语言,特别容易导致开发者犯错。ESLint 可以让你为编码规范制定指导方针,并帮助你最大限度地减少这些错误。强制执行这些指导方针的主要原因是每个开发人员都有自己的写作风格(例如命名约定/制表符/字符串的单引号或双引号)。而且,不同的样式技术可能会导致你的代码库看起来很奇怪,更容易出错,也更容易受到攻击。尤其是在处理 JavaScript 时,这可能会造成你永远不想遇到的陷阱。

何时使用它?

说实话,无论项目规模或团队规模如何,我都更喜欢使用它。但是,对于任何中大型、重要的 Javascript/Typescript 项目,或者/并且您有一个相当庞大的开发团队需要处理,您都应该考虑使用它。无论哪种情况,您都必须强制执行通用的标准编码实践/指南。
像 ESLint 这样的 Linting 工具允许开发人员无需执行 JavaScript 代码即可发现其中的问题。创建 ESLint 的主要原因之一就是允许开发人员创建自己的 Linting 规则。您可以在任何基于 Javascript/Typescript 的应用程序中使用它:

  1. React/React Native
  2. 角度
  3. 节点。

如何使用它?

说得够多了,嗯?下面是安装方法。

安装

先决条件:Node.js(^10.12.0, or >=12.0.0)
您可以使用npm或安装 ESLint yarn

$ npm install eslint --save-dev
# or
$ yarn add eslint --dev
Enter fullscreen mode Exit fullscreen mode

注意:也可以全局安装 ESLint,而不是本地安装(使用npm install eslint --global)。但是,不建议这样做,无论哪种情况,您使用的任何插件或可共享配置都必须本地安装。

初始化它

安装完成后,使用以下命令进行初始化:

$ npx eslint --init
# or
$ yarn run eslint --init
Enter fullscreen mode Exit fullscreen mode

注意:— init假设你已经有一个 package.json 文件。如果没有,请确保事先运行 npm init 或 yarn init。

配置它

完成安装和初始化后,目录中将有一个 .eslintrc.{js,yml,json} 文件。在其中,您将看到一些配置如下的规则:

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}
Enter fullscreen mode Exit fullscreen mode

使用它

如果你看到这里,说明你已经成功配置了 ESLint。以下是使用方法:

$ npx elinst <your file>.js
# or 
$ npx eslint <folder containing js files>
Enter fullscreen mode Exit fullscreen mode

您还可以在 yourpackage.json 文件中添加 lint(如果尚未添加)

"scripts": {
  ...
  "lint": "eslint .",
  ...
}
Enter fullscreen mode Exit fullscreen mode

恭喜!

只需几个步骤,您就成功地使您的代码库看起来比以往更加整洁、更好。

文章来源:https://dev.to/shivambmgupta/eslint-what-why-when-how-5f1d
PREV
React 18 中 useEffect 触发两次
NEXT
初学者最常用的 git 命令