前言
在前端开发中，我们经常需要使用代码规范工具来保持代码的可读性和维护性。而 eslint 是一个非常流行的 JavaScript 代码检查工具，它能够帮助我们自动地检测代码中的错误和不规范之处。
然而在实际的开发中，我们可能会遇到 lint 结果过多且难以理解的问题。这时候就可以使用 eslint-summary 这个 npm 包来帮助我们更好地了解 lint 结果并采取相应的行动。
本文将介绍如何安装和使用 eslint-summary。
安装
要使用 eslint-summary，首先需要安装 eslint 和 eslint-summary 两个 npm 包。如果你还没有安装它们，可以通过以下命令进行安装：
npm install eslint eslint-summary --save-dev
配置
完成安装后，我们需要对 eslint 进行配置，并添加 eslint-summary 插件。下面是一个简单的 .eslintrc.js 配置示例：
-- -------------------- ---- -------
-------------- - -
-------------- -
------------ -----
----------- ---------
--
---- -
-------- -----
---- -----
--
-------- -
---------------------
--
-------- -
-----------------
--
--使用
当我们在项目中使用 eslint 检查代码时，可以通过以下命令来生成 eslint 结果的摘要：
eslint --format=summary ./src/**/*
这样就可以得到一个简单的结果报告，它会列出所有的错误和警告，并按照严重程度进行排序。这让我们更容易地了解代码有哪些问题需要解决。
除了默认的输出格式之外，eslint-summary 还支持多种其他格式的输出。下面是一些示例命令：
- 以 JSON 格式输出：
eslint --format=summary-json ./src/**/* - 以 Markdown 格式输出：
eslint --format=summary-markdown ./src/**/* - 以 HTML 格式输出：
eslint --format=summary-html ./src/**/*
示例
假设我们有以下 JavaScript 代码：
function foo() {
console.log('hello, world!')
}如果我们使用 eslint 来检查代码，它会发现该函数存在缩进不规范的问题：
$ eslint ./test.js test.js 2:1 error Expected indentation of 2 spaces but found 4 indent 3:5 warning Missing semicolon semi ✖ 2 problems (1 error, 1 warning)
然而这个输出结果可能不太友好，因为它难以一眼看出存在哪些问题。这时候我们可以使用 eslint-summary 来生成一个更好的结果摘要：
$ eslint --format=summary ./test.js test.js ❌ error Expected indentation of 2 spaces but found 4: 2:1 indent ⚠️ warning Missing semicolon: 3:5 semi ✖ 2 problems (1 error, 1 warning)
可以看到，输出结果中的每个问题都有一个对应的符号，让我们更容易地了解它们的严重程度。同时，摘要也将所有的问题按照严重程度进行了排序，使我们可以更快地找到最需要关注的问题。
结论
通过本文的介绍，我们了解了 eslint-summary 这个 npm 包的基本用法和配置方法。它能够帮助我们更好地理解 eslint 的检查结果，并采取相应的行动来提高代码的质量。
在实际的开发中，我们应该养成使用代码规范工具的好习惯，并根据 lint 结果进行适当的调整
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43072