在前端开发中，代码的规范和风格是非常重要的，而 stylelint 是一种预处理器，可以用来保证我们的 CSS 代码风格和规范。
stylelint-formatter-stats 是一个 npm 包，它可以将 stylelint 的结果输出成可视化的统计图表，让开发者更直观地了解 CSS 代码的规范情况，让调试变得更加轻松。
安装和配置
首先，我们需要将 stylelint-formatter-stats 安装在我们的项目中。
npm install stylelint-formatter-stats --save-dev
安装完成后，我们需要在 .stylelintrc 文件中添加以下内容：
{
"formatter": "stylelint-formatter-stats"
}使用方法
运行 stylelint 命令时加上 --custom-formatter 参数，并指向 stylelint-formatter-stats，例如：
stylelint "src/**/*.scss" --syntax scss --custom-formatter node_modules/stylelint-formatter-stats/index.js
运行后，stylelint-formatter-stats 会生成一个 HTML 文件，打开文件即可看到 CSS 代码规范情况的统计图表。
示例代码
下面是一个使用 stylelint-formatter-stats 的示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------------------- ----------
-------
------
----------------------------- -------
--------------- --- -------
-------
---- -
----------------- -----
-
--------
------- ----------------------
-------
-------结语
通过使用 stylelint-formatter-stats，我们可以更加直观地了解 CSS 代码的规范情况，让开发变得更加高效和轻松。希望本文对你有所帮助，欢迎大家试用、反馈和分享。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572d581e8991b448e90b6