2024年7月3日发(作者：)

stylelint常用规则

摘要：

1.简介

2.代码格式化

3.颜色

4.间距

5.边距

6.列表

7.文本对齐

8.隐藏内容

9.代码块

10.注释

11.命名

12.自动完成

13.兼容性

14.配置

15.总结

正文：

Stylelint 是一款用于检查 CSS 代码的质量和规范的插件，广泛应用于

Web 开发中。本文将介绍 Stylelint 的一些常用规则。

1.简介

Stylelint 是一款功能强大的 CSS 代码质量检查工具，支持 ESLint 语

法，通过配置文件来定义规则。Stylelint 可以检查代码的格式、命名、代码

块、注释等方面的规范。

2.代码格式化

Stylelint 可以自动格式化 CSS 代码，使其符合规范。通过配置

`stylelint-config` 文件，可以自定义格式化规则。

3.颜色

Stylelint 可以检查颜色值是否符合规范。例如，检查是否使用了正确的颜

色单位（如 `px`、`em` 等），以及颜色值是否在有效范围内。

4.间距

Stylelint 可以检查 CSS 中的间距值是否符合规范。例如，检查

`margin`、`padding`、`border` 等属性是否使用了正确的单位（如 `px`、

`em` 等）。

5.边距

Stylelint 可以检查 CSS 中的边距值是否符合规范。例如，检查

`margin`、`padding` 等属性是否使用了正确的方向（如 `top`、`right`、

`bottom`、`left` 等）。

6.列表

Stylelint 可以检查 CSS 中的列表项是否符合规范。例如，检查 `list-

style-type` 属性是否使用了正确的值（如 `disc`、`circle`、`square` 等）。

7.文本对齐

Stylelint 可以检查 CSS 中的文本对齐方式是否符合规范。例如，检查

`text-align` 属性是否使用了正确的值（如 `left`、`right`、`center` 等）。

8.隐藏内容

Stylelint 可以检查 CSS 中用于隐藏内容的属性是否符合规范。例如，检

查 `display` 属性是否使用了正确的值（如 `none`、`block`、`flex` 等）。

9.代码块

Stylelint 可以检查 CSS 代码块的语法是否符合规范。例如，检查

`@media`、`@keyframes`、`@supports` 等规则是否使用了正确的语法。

10.注释

Stylelint 可以检查 CSS 中的注释是否符合规范。例如，检查注释是否以

`/*` 开始，以 `*/` 结束。

11.命名

Stylelint 可以检查 CSS 中的命名是否符合规范。例如，检查选择器是否

使用了正确的命名方式（如小驼峰命名法、短横线命名法等）。

12.自动完成

Stylelint 可以与编辑器（如 Visual Studio Code）集成，实现自动完成

功能。通过配置 `stylelint-config` 文件，可以自定义自动完成规则。

13.兼容性

Stylelint 可以检查 CSS 代码的兼容性。例如，检查是否使用了已被废弃

的属性或值，以及是否使用了正确的浏览器前缀。

14.配置

Stylelint 的配置文件名为 `.stylelintrc`（或 `.`、

`.` 等）。通过配置文件，可以自定义规则、插件、自动完成等。

15.总结

Stylelint 是一款强大的 CSS 代码质量检查工具，可以帮助开发者快速发

现并修复 CSS 代码中的问题。通过本文的介绍，相信你已经对 Stylelint 的

常用规则有了初步的了解。