在前端开发过程中，ESLint 是一个重要的代码质量保障工具。它可以检查你的代码是否符合规范，并给出相应的提示和错误信息。然而默认情况下，ESLint 的报告并不是很易读，我们需要借助一些工具来美化它的显示效果。
其中一个比较受欢迎的工具是 eslint-friendly-formatter，它可以将 ESLint 的报告转换成可读性更高的格式。本文将介绍如何使用这个工具。
安装
首先，我们需要全局安装 eslint-friendly-formatter：
npm install -g eslint-friendly-formatter
配置
接下来，在项目的 .eslintrc 文件中增加以下配置：
{
"formatter": "friendly"
}如果你使用的是 VS Code 编辑器，还需要在设置中增加以下配置：
{
"eslint.format.enable": true,
"eslint.options": {
"formatter": "friendly"
}
}这样 ESLint 将会使用 eslint-friendly-formatter 来生成报告。
使用
现在，我们可以运行 ESLint 并使用 eslint-friendly-formatter 来美化报告了。例如，在命令行中输入：
eslint src --format friendly
这将会对 src 目录下的所有 JavaScript 文件进行 ESLint 检查，并使用 eslint-friendly-formatter 来生成报告。
如果你使用的是 VS Code 编辑器，可以通过按下 Ctrl + Shift + P，然后输入 ESLint: Fix all auto-fixable Problems 来运行 ESLint 并自动修复一些问题。在修复完成后，你将会看到一个美化过的 ESLint 报告。
示例代码
最后，让我们来看一段包含 ESLint 错误的代码，并使用 eslint-friendly-formatter 来生成报告：
function foo() {
console.log('Hello World')
}运行 ESLint 后，会产生以下报告：
/path/to/file.js 1:14 error Missing semicolon semi ✖ 1 problem (1 error, 0 warnings)
使用 eslint-friendly-formatter，我们得到了以下报告：
-- -------------------- ---- ------- ---------------- ---- ----- ------- --------- ---- - - ------- -- ------ - --------- - ------------------------------- ----------- ---------------- - -------------------------- -- ----
我们可以清晰地看到错误发生的位置和原因，这对于快速定位并解决问题非常有帮助。
总之，eslint-friendly-formatter 是一款强大的工具，它可以帮助我们更好地管理 ESLint 的报告，并提高开发效率。希望本文能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/41982