介绍
ECMAScript 2020 带来了许多有用的新功能，其中包括 ES Module、Promise.allSettled 和 BigInt 等。但是，对于在前端项目中编写 JavaScript 代码的开发人员来说，两个新技术更值得关注：ESLint 和 Prettier。
ESLint 和 Prettier 是两个可帮助前端开发人员编写干净、可维护的代码的工具。这些工具的目的是帮助我们检测语法错误、规范代码格式和风格、尽可能避免低级错误等等。
本文将详细介绍这两个工具，包括如何使用它们、它们的差异以及如何将它们有效地结合起来以实现更好的代码质量。
ESLint
ESLint 是一个静态代码分析工具，它可以帮助开发人员检测并修复 JavaScript 代码中的错误和潜在问题。 它的作用类似于编译器，但是它是在开发期间直接嵌入到代码中的。
安装和配置
ESLint 是使用 Node.js 编写的，因此它只能在 Node.js 环境中运行。 安装 ESLint 只需使用 npm 或 Yarn 进行全局安装即可：
--- ------- -- ------
安装完成后，即可在命令行中启动 ESLint 以检查代码。不过在使用之前，我们还需要为项目创建一个配置文件。
配置文件是一个 JSON 或 YAML 文件，它会告诉 ESLint 在分析代码时什么应该被视为错误、应该被忽略哪些文件等等。 可以通过以下命令来创建一个默认的 .eslintrc.json 文件：
------ ------
这个命令将为您提供一系列问题，问答过程中确定了您的项目需要哪些规则和插件，最终创建配置文件。
使用
在安装和配置完成后，ESLint 将会在我们的项目中发挥作用。我们可以使用以下命令来对整个项目进行检查：
------ -
如果您只想检查单个文件，请将文件路径替换为 .。ESLint 将会为您检查所有匹配对应规则的文件。此外，您还可以将检查信息输出到文件中，通过以下命令执行：
------ - - -----------------
命令将会将检查结果输出到 eslint-report.txt 文件中。
规则
ESLint 支持超过 200 个预定义规则。这些规则定义了您的代码应该遵守的最佳实践和语言约定。在默认情况下，它们中的一些被启用，但是您可以通过配置文件来定制规则。
您可以将您认为不需要的规则禁用，或者您可以切换规则的严格程度。规则可以分为以下几种类型：
- "off" 或 0 - 跳过规则。
- "warn" 或 1 - 启用规则，使用警告级别。
- "error" 或 2 - 启用规则，使用错误级别。
ESLint 还支持自定义规则，这些规则可以帮助您检查您认为必须遵守的编码约定。在编写自定义规则时，可以使用大量的 AST API。AST API 允许您从代码中提取有关代码元素的详细信息。
示例
禁止 var 声明
no-var 规则是一个很好的 ES6 推广例子。下面代码展示了如何禁止 var 声明：
-
-------- -
--------- -------
-
-空格的一致性
ESLint 可以强制执行空格风格一致性。下面的示例将强制执行分号后的空格：
-
-------- -
--------------- --------- - --------- ------ -------- ---- --
-
-检查无用代码
ESLint 可以检测无用的代码，并对其进行警告或抱怨。
-
-------- -
----------------- --------- - ------- ------ ------- --------------
-
-Prettier
Prettier 是一个格式化代码的工具。它使用一组严格定义的规则，以一致的方式格式化代码。不同于 ESLint，Prettier 不会更改代码结构或执行规则检查。它只会格式化代码，其中包括缩进、换行符和尾随逗号等等。
Prettier 可用于任何类型的文档，包括 JavaScript、CSS、HTML 等等。 它是一款独立的工具，但是与 ESLint 配合使用可实现最佳效果。
安装和配置
与 ESLint 类似，安装 Prettier 只需使用 npm 或 Yarn 进行全局安装即可：
--- ------- -- --------
虽然 Prettier 有许多配置选项可用，但是命令行界面并不需要配置文件。如果您想将自己的配置与 Prettier 进行深度集成，您可以在 .prettierrc 或者 package.json 文件中编写配置，如下：
- ------------- --- ----------- -- ---------- ------ ------- ----- -------------- ----- ---------------- ------ ----------------- ----- --------------------- ------ -------------- ------- -
Prettier 还支持一些 Options 可以在命令行使用。
使用
要运行 Prettier，请输入以下命令：
-------- -----------
它将使用默认选项格式化您的文件。如果您希望使用其他选项，则可以使用 --print-width，--tab-width，--no-tabs 和 --jsx-bracket-same-line 等选项覆盖它们。实际上，您甚至可以将 Prettier 集成到您的编辑器中，以在保存或提交更改时自动运行它。
规则
除了一些基本选项外，Prettier 不需要额外配置规则。当然，如果您想更改某些选项，则需要使用 .prettierrc 文件或者命令行。
示例
Prettier 的主要目标是带来一致性；下面的示例演示了如何将参数一行最多放 60 个字符。
-- ------ ------- -------------- ---------------- --------------------- --------------------------- -- ----- ----- -- -------------- ---------------- --------------------- ------------------------- --
结合应用
在实际工作中，ESLint 和 Prettier 经常一起使用。一些规则在二者之间是共享的，例如缩进和值分配。
为了使这两个工具能够完美结合，您需要 eslint-config-prettier，即 Prettier 推荐的 ESLint 配置。
--- ------- ----- ----------------------
然后在您的 .eslintrc 文件的 extends 中添加 "prettier"。例如：
-
---------- -
---------------------
----------
-
-结论
ESLint 和 Prettier 都可以很好地提升我们的代码质量。ESLint 可以帮助我们检查和修复代码中的错误，遵循编码规范和最佳实践；而 Prettier 可以帮助我们格式化代码，使其保持一致性。在使用时结合起来，可以更好地确保代码质量、可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671acaa69babaf620fa6071f