前言
在开发前端应用时，代码风格的统一是非常重要的。解决这个问题的方法之一是使用 ESLint。但是，如果只使用 ESLint，仍然需要手动调整代码，这很不方便。因此，一个好的补充工具是 Prettier，它可以自动格式化你的代码。本文将介绍如何使用 ESLint 和 Prettier 来达到代码风格统一的目的。
什么是 ESLint?
ESLint 是一个代码检查工具，它可以检测你的代码是否符合特定的规则。它支持插件和扩展，可以配置不同的规则。ESLint 可以帮助你发现并修复代码中的问题，例如，语法错误、变量未定义等。
什么是 Prettier?
Prettier 是一个代码格式化工具，它可以自动格式化你的代码。Prettier 可以处理许多不同编程语言的文件，包括 JavaScript、CSS、HTML 等。相比于 ESLint，Prettier 更加严格，对代码格式的处理非常准确。
如何一起使用 ESLint 和 Prettier?
为了能够一起使用 ESLint 和 Prettier，我们需要安装它们的 npm 包。安装方法如下所示：
-- -------------------- ---- ------- - -- ------ --- ------- ------ ---------- - --- ------ ---- --- ------ ------ - -- -------- --- ------- -------- ---------- - -- ---------------------- --- ------- ---------------------- ---------- - -- ---------------------- --- ------- ---------------------- ----------
初始化 ESLint 配置文件
初始化 ESLint 配置文件的过程中，ESLint 会问一些问题让你决定最终配置。例如，你想使用哪种类型的标准规则（只验证 Syntax 还是使用推荐的配置），在哪里保存配置文件（根目录或子目录下），你是否想在检查期间启用 ESLint 的插件。当你回答完所有问题后，ESLint 会创建一个 .eslintrc.json 文件。你可以在文件中添加你需要的规则。下面是一个示例：
-- -------------------- ---- -------
-
------ -
---------- -----
--------- ----
--
---------- -
---------------------
-----------------------------
--
---------------- -
-------------- ---
------------- --------
--
-------- ---
---------- -
----------
-
-添加 Prettier 配置文件
Prettier 配置文件可以添加一些规则。例如，你可以指定行宽、缩进、单引号或双引号，等等。Prettier 有默认的配置，但你也可以添加自定义规则。下面是一个示例：
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"printWidth": 120
}添加 Prettier 插件和配置
要使用 Prettier，我们需要添加 eslint-config-prettier 和 eslint-plugin-prettier。eslint-config-prettier 是 ESLint 可以忽略每个与 Prettier 配置有冲突的规则。eslint-plugin-prettier 添加了一个 Prettier 插件，它允许你在 ESLint 中运行 Prettier。下面是一个示例：
{
"extends": ["plugin:prettier/recommended"]
}在编辑器中使用 ESLint 和 Prettier
在 VS Code 中，你可以使用 eslint 和 prettier 插件来自动格式化代码。如果你想在保存文件时自动格式化代码，并根据 ESLint 和 Prettier 的规则检查代码，可以在设置中添加以下参数：
{
"eslint.autoFixOnSave": true,
"editor.formatOnSave": true
}运行 ESLint 和 Prettier
我们可以在命令行中运行 eslint 命令来检查和格式化我们的代码。如果你想在终端上运行 Prettier，可以使用 prettier 命令。
-- -------------------- ---- ------- - ---------- ------ -- --- ------ - - ------------ --- ------ ------- - --------- --- ------ ----- - - ----- -------- --- --- -------- -
结论
ESLint 和 Prettier 是绝佳的工具，可以帮助你写出更加规范的代码。在配置好这些工具之后，你可以更加自由地关注业务逻辑，而不需要再去担心代码格式的问题。在日常开发中，我们建议立即开始使用 ESLint 和 Prettier。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c311214b275ea6fe8606e