可通过配置文件、插件和自定义规则统一CSS风格。2. 配置.stylelintrc可启用或修改规则,如缩进、颜色大小写等。3. 安装插件如stylelint-scss扩展支持SCSS等功能。4. 编写自定义规则函数实现特定校验,如禁止ID选择器。5. 使用注释或ignoreFiles忽略指定代码或文件检查。

自定义 Stylelint 规则可以让团队根据项目需求统一 CSS 编码风格。你可以在配置文件中修改规则、添加插件,甚至编写自己的规则函数。
1. 配置 .stylelintrc 文件
Stylelint 使用 .stylelintrc 或 stylelint.config.js 等格式的配置文件。基本结构如下:
在 rules 字段中可以覆盖或新增规则。每个规则可设置为:
- false:关闭规则
- true:开启默认行为
-
值或数组:传入参数,如
["always", { "except: ["single-line"] }]
2. 使用插件扩展规则
官方和社区提供了大量插件,比如支持 SCSS、CSS-in-JS 或 BEM 命名规范。
立即学习“前端免费学习笔记(深入)”;
安装插件:
npm install stylelint-scss --save-dev然后在配置中引入并使用:
{ "plugins": ["stylelint-scss"], "rules": { "scss/at-rule-no-unknown": true } }常见插件包括:stylelint-scss、stylelint-selector-bem-pattern、stylelint-order(控制属性顺序)等。
3. 自定义规则函数(高级用法)
如果内置规则和插件不够用,可以编写自定义规则。Stylelint 支持通过 JavaScript 定义规则函数。
示例:创建一个禁止使用 id 选择器的规则:
在配置文件中加载:
{ "rules": { "plugin/no-id-selector": true }, "plugins": [ "./custom-rules/no-id-selector" ] }4. 忽略部分代码或文件
有时需要临时跳过检查:
- 单行忽略:
/* stylelint-disable-next-line rule-name */ - 多行忽略:
/* stylelint-disable rule-name */ ... /* stylelint-enable rule-name */ - 忽略整个文件:在配置的
ignoreFiles中添加路径,如"ignoreFiles": ["**/vendor/*.css"]
基本上就这些。通过配置、插件和自定义函数,你可以灵活控制 Stylelint 的行为,适应各种项目需求。不复杂但容易忽略细节。










