css工具Stylelint规则如何自定义-css教程-PHP中文网

css工具Stylelint规则如何自定义

P粉602998670

发布： 2025-10-03 18:06:02

原创

761人浏览过

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

css工具stylelint规则如何自定义

自定义 Stylelint 规则可以让团队根据项目需求统一 CSS 编码风格。你可以在配置文件中修改规则、添加插件，甚至编写自己的规则函数。

1. 配置 .stylelintrc 文件

Stylelint 使用 .stylelintrc 或 stylelint.config.js 等格式的配置文件。基本结构如下：

{ "extends": "stylelint-config-standard", "rules": { "indentation": 2, "color-hex-case": "lower", "selector-list-comma-newline-after": "always" } }

在 rules 字段中可以覆盖或新增规则。每个规则可设置为：

false：关闭规则
true：开启默认行为
值或数组：传入参数，如 ["always", { "except: ["single-line"] }]

2. 使用插件扩展规则

官方和社区提供了大量插件，比如支持 SCSS、CSS-in-JS 或 BEM 命名规范。

立即学习“前端免费学习笔记（深入）”；

安装插件：

npm install stylelint-scss --save-dev

然后在配置中引入并使用：

通义视频

通义万相AI视频生成工具

查看详情

{ "plugins": ["stylelint-scss"], "rules": { "scss/at-rule-no-unknown": true } }

常见插件包括：stylelint-scss、stylelint-selector-bem-pattern、stylelint-order（控制属性顺序）等。

3. 自定义规则函数（高级用法）

如果内置规则和插件不够用，可以编写自定义规则。Stylelint 支持通过 JavaScript 定义规则函数。

示例：创建一个禁止使用 id 选择器的规则：

// custom-rules/no-id-selector.js module.exports = { meta: { docs: { description: "禁止使用 ID 选择器" } }, create (context) { return { "Selector" (node) { if (node.type === "id") { context.report({ message: "不允许使用 ID 选择器", node }); } } }; } };

在配置文件中加载：

{ "rules": { "plugin/no-id-selector": true }, "plugins": [ "./custom-rules/no-id-selector" ] }