在前端开发工作中，我们经常需要对 CSS 文件进行规范化处理，以保证代码的可读性和可维护性。为了达到这个目的，我们可以使用 stylelint 这个工具，对 CSS 代码进行静态分析和检查。
为了方便使用，社区内有很多 stylelint 的 preset，其中 stylelint-config-pretty 是一个比较优秀的 preset。它基于 stylelint-standard，提供了更加易用和美观的配置规则，可以帮助我们快速完成 CSS 代码规范化。
本文将详细介绍 stylelint-config-pretty 的使用方法和规则说明，帮助初学者快速上手使用。
安装
在项目中安装 stylelint 和 stylelint-config-pretty：
npm install stylelint stylelint-config-pretty --save-dev
配置
在项目中新建一个 .stylelintrc.json 文件，并加入以下配置：
{
"extends": "stylelint-config-pretty"
}这里使用了 “extends” 字段，告诉 stylelint 使用 stylelint-config-pretty 的所有配置规则。如果需要添加、覆盖或删除某个规则，可以在该文件中修改。
规则说明
stylelint-config-pretty 包含了大量的 CSS 规则，可以帮助我们快速实现代码规范化。下面列举部分重要的规则说明：
空格和缩进
- indentation：必须使用 2 层缩进
- block-closing-brace-empty-line-before：块内右花括号前必须有空行
属性和选择器
- property-no-vendor-prefix：不能使用浏览器私有属性
- selector-no-qualifying-type：不能继承全局选择器
- selector-max-id：ID 选择器必须小于等于 1
值和单位
- value-no-vendor-prefix：不能使用浏览器私有值
- unit-no-unknown：不能使用未知的值单位
- length-zero-no-unit：长度值为 0 时不能包含单位
颜色
- color-hex-length：十六进制颜色值必须使用 8 位
- color-named：不能使用颜色名称
- color-no-invalid-hex：不能使用无效的十六进制值
使用示例
下面是一个使用 stylelint-config-pretty 的 CSS 代码示例：
-- -------------------- ---- ------- -- --- -- -------- -------- ------ --------------------- ------- ---- - -- ---- -- ------- - -------- ------ ----------------- -------- -- --- ------- ---- -
在这个代码示例中，规则会检查该 CSS 代码的缩进、选择器、属性名等等，如果发现有不符合规则的地方，会给出相应的警告或错误提示。通过修正这些问题，我们就可以得到更加优美和规范的 CSS 代码。
结语
本文对 npm 包 stylelint-config-pretty 的使用进行了详细介绍并列举了部分 CSS 规则，希望能够帮助读者快速掌握这个工具。在实际开发过程中，我们应该根据自身的需求和项目情况，灵活配置规则，让 CSS 代码更加易读、易维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c4381e8991b448ebc85