作为一名前端开发者，我们常常需要写出高质量且一致的代码。而 ESLint 和 Prettier 是两个非常有用的工具，可以帮助我们避免一些常见的错误，并且保证代码的风格一致。本文将介绍如何使用 ESLint 和 Prettier，以及如何配置和使用它们来写出更好的代码。
什么是 ESLint？
ESLint 是一个 JavaScript 代码检查工具，它可以帮助我们找出代码中的问题，并提供修复方法。它可以检测出一些常用的错误，例如未定义变量、不必要的分号，以及一些潜在的代码问题。ESLint 可以在开发时集成到你的编辑器中，让你能够及时发现和修复问题。
什么是 Prettier？
Prettier 是一个代码格式化工具，它可以帮助我们保持代码的一致性和可读性，使我们的代码看起来更整齐、简洁。Prettier 可以自动格式化我们的代码，不需要进行手动调整。这非常有用，可以让我们专注于编写高质量的代码，而不是花费大量时间来调整格式。
如何使用 ESLint 和 Prettier？
想要使用 ESLint 和 Prettier，我们需要做以下几个步骤：
步骤 1：安装 ESLint 和 Prettier
我们需要安装几个依赖库。你可以通过以下命令来安装：
npm install eslint prettier eslint-plugin-prettier babel-eslint eslint-plugin-react --save-dev
步骤 2：创建配置文件
我们还需要为它们创建配置文件，我们可以使用 eslint --init 命令来创建配置文件。你可以根据你项目的需求来自定义配置文件。这里我们使用 Airbnb 风格的配置。执行以下命令：
npx eslint --init
然后你会看到以下提示：
-- -------------------- ---- ------- - --- ----- --- ---- -- --- ------- - -- ----- ------- ---- --------- --- ------- ---- ----- - ---- ---- -- ------- ---- ---- ------- ---- - ---------- ------- --------------- - ----- --------- ---- ---- ------- ---- - ----- - ---- ---- ------- --- ----------- - -- - --- - ----- ---- ---- ---- ---- - -------- ---- - --- ----- --- ---- -- ------ - ----- --- ---- -------- - --- - ------- ----- ----- - ----- ----- ----- -- --- ---- -- ------- - ------ -------------------------------------- - ---- ------ -- --- ---- ---- ------ ---- -- -- --- - ---------- -------- ---------------- -- --------------------------- --- ------ ---- ------ -------- -------- --- --------- ------------- --------------------------- -------------- -- ------ ---------------------------- -- ------- ----------------------------- -- ------ --------------------------- -- ------- ---------------------------- -- -- -- ------ -- ------ ---------------------------- -- ------- ----------------------------- ----------------------------- --------------- - ----- --- ---- -- ------- ---- --- ---- ---- - -- - ---
选择上述的选项，然后安装依赖包。
步骤 3：配置 ESLint 和 Prettier
我们需要在配置文件中加入一些规则和插件。在 .eslintrc.js 文件中加入以下配置：
-- -------------------- ---- -------
-------------- - -
---- -
-------- -----
------- -----
--
-------- ---------------------------- --------- ------------
-------- --------- -------------- ------------
-------------- -
------------ ---
----------- ---------
------------- -
---- -----
--
--
------ -
-------------------- ----------
------------------------------- --------- - ----------- ------- ------- ---
------------------------------------ --------
------------------- --------
------------------------------- --------
----------------------- --------
---------------------------------------- -
--------
-
--------- -
----- ----------- ------
--
--
--
--
--------- -
------------------ -
----- -
------ --------
--
--
--
--在配置文件中，我们使用了 eslint-plugin-prettier 插件，它可以让我们把 Prettier 的规则加入到 ESLint 中。在规则中，我们加入了 prettier/prettier，它可以帮助我们在格式不符合 Prettier 规则时报错。同时，我们在 extends 选项中加入了 airbnb 和 plugin:react/recommended，它们提供了 React 和 JavaScript 的常用规则。
步骤 4：在编辑器中使用 ESLint 和 Prettier
为了在编辑器中使用 ESLint 和 Prettier，我们需要安装对应的插件。以下是常用的插件和编辑器：
- Visual Studio Code: ESLint, Prettier
- Atom: linter-eslint, prettier-atom
- Sublime Text: SublimeLinter-eslint, SublimeLinter-contrib-prettier
在在编辑器中安装插件之后，我们还需要配置一下插件的设置。例如，如果使用了 Visual Studio Code，我们可以添加以下设置：
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}这将会在保存时自动格式化代码，并且修复所有 ESLint 的警告和错误。
例子
为了更好的理解 ESLint 和 Prettier 的作用，下面为大家提供一个代码例子，示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
----- ------ - -- ----- ------- -- -- -
------- ------------- ------------------
------
---------
--
---------------- - -
----- ----------------------------
-------- ---------------
--
------------------- - -
-------- -- -- ---
--
------ ------- -------运行 eslint app.js 命令，可以得到以下警告：
3:1 error 'React' was used before it was defined no-use-before-define 4:1 error 'PropTypes' should be listed in the project's dependencies. Run 'npm i -S prop-types' to add it import/no-extraneous-dependencies
这两个警告分别是：
React被使用前未定义PropTypes应该被添加到项目的依赖中
这两个警告可以通过以下方式来解决：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
----- ------ - -- ----- ------- -- -- -
------- ------------- ------------------
------
---------
--
---------------- - -
----- ----------------------------
-------- ---------------
--
------------------- - -
-------- -- -- ---
--
------ ------- -------可以看到这段代码在格式化后变得更加整洁。
结论
在本文中，我们了解了 ESLint 和 Prettier 以及它们的优势。同时，我们学习了如何安装、配置和使用 ESLint 和 Prettier，并提供了一个示例来帮助我们更好地理解如何使用它们。通过使用 ESLint 和 Prettier，我们可以写出更高质量且一致的代码。希望这篇文章对你有所帮助，让你更加了解如何在前端开发中使用 ESLint 和 Prettier。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677183d66d66e0f9aacef084