ESLint 是 JavaScript 代码静态分析工具之一，可以帮助我们找到代码中的问题并统一代码风格。Prettier 是一款代码格式化工具，可以自动化地格式化我们的代码，并帮助我们避免代码格式的争议。将 ESLint 与 Prettier 结合使用，可以有效提高代码质量与可读性。本文将介绍如何在 ESLint 中使用 Prettier 来格式化代码。
安装并配置 ESLint 和 Prettier
首先，我们需要全局安装 ESLint 和 Prettier：
npm install -g eslint prettier
然后，在项目中安装 ESLint 和 Prettier 的依赖：
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
以上述命令为例，我们除了安装 ESLint 和 Prettier 之外，还安装了 eslint-config-prettier 和 eslint-plugin-prettier 这两个插件。
- eslint-config-prettier：将 Prettier 的规则关闭，避免因 ESLint 和 Prettier 的冲突而导致的代码格式错误。
- eslint-plugin-prettier：将 Prettier 的规则加入到 ESLint 中，以让 ESLint 帮助我们自动格式化代码。
接下来，我们在项目根目录中创建一个 .eslintrc.js 文件，并添加以下代码：
-- -------------------- ---- -------
-------------- - -
---- -
-------- -----
------- -----
--
-------- -
---------------------
------------------------------
--
-------------- -
------------ ---
----------- ---------
--
-------- -
-----------
--
------ -
--
--代码中的配置项包括：
- env：定义了代码运行的环境。
- extends：继承的规则。'eslint:recommended' 表示使用 ESLint 推荐的规则；'plugin:prettier/recommended' 表示使用 Prettier 推荐的规则。
- parserOptions：使用的解析器和支持的 ECMAScript 版本。
- plugins：使用的插件。
- rules：具体规则。
还需在项目根目录中创建一个 .prettierrc 文件，放置 Prettier 的配置：
{
"singleQuote": true,
"semi": true
}代码中的配置项为 Prettier 的规则，如单引号、分号等。
在编辑器中集成 ESLint 和 Prettier
ESLint 和 Prettier 除了作为命令行工具使用外，我们还可以集成到编辑器中，以让我们实时地检查和格式化代码。
下面以 VS Code 为例：
安装 ESLint 和 Prettier 插件。
打开 VS Code 的设置（快捷键：Ctrl + ,）。
在设置中搜索 "eslint.validate" 并打开，将其值由 false 改为 "onSave"，表示在保存文件时进行 ESLint 检查。
在设置中搜索 "editor.formatOnSave" 并打开，将其值设为 true，表示在保存文件时进行代码格式化。
示例代码
下面是一段未经过格式化的代码：
const numbers=[1,2,3,4,5]
const sum=numbers.reduce((a,b)=>a+b,0)
console.log('The sum is:'+sum)使用 VS Code 中集成的 ESLint 和 Prettier，我们将该段代码格式化后：
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((a, b) => a + b, 0);
console.log('The sum is:' + sum);总结
本文介绍了在 ESLint 中使用 Prettier 来格式化代码的方法和步骤，并提供了具体的配置和示例代码。通过集成 ESLint 和 Prettier 到编辑器中，我们可以在开发过程中实时地格式化和检查代码，大大提高了代码的质量和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cde8ffb5eee0b5255db8b8