stylelint配置文件不生效需确认位置和导出方式:必须位于当前工作目录,文件名为stylelint.config.js等合法名称,且用module.exports导出对象;团队协作推荐stylelint-config-standard(含格式规则)或stylelint-config-recommended(仅语法校验);vs code需手动配置stylelint.validate支持vue等语言;ci报模块未找到需确保本地安装依赖并验证require。

Stylelint 配置文件不生效?先确认 stylelint.config.js 位置和导出方式
Stylelint 不会自动向上查找配置,它只认当前工作目录或指定路径下的合法配置文件。常见现象是运行 npx stylelint *.css 没报错也没提示,其实根本没加载任何规则。
必须确保:
• 配置文件名是 stylelint.config.js、.stylelintrc.js 或 stylelint.config.cjs(ESM 项目慎用 .mjs,目前部分版本不支持)
• 文件导出的是一个对象,不是函数(除非你明确用了 extends 动态逻辑)
• 如果用 module.exports = { rules: { ... } },就别混用 export default
示例正确写法:
module.exports = {
extends: ['stylelint-config-standard'],
rules: {
'no-empty-source': null,
'color-no-invalid-hex': true
}
};
团队协作时 stylelint-config-standard 和 stylelint-config-recommended 怎么选
stylelint-config-recommended 是最小可用集,只开语法校验(比如 color-no-invalid-hex),适合从零搭建或已有大量历史 CSS 的项目;stylelint-config-standard 在此基础上加了格式类规则(如缩进、空行、属性顺序),但默认不强制 order/properties-order —— 这个得自己配插件。
容易踩的坑:
• 直接装 stylelint-config-standard 但没装 stylelint-config-standard-scss,结果在 .scss 文件里报一堆 unknown word 错误
• 用 stylelint-config-recommended 后发现 font-family 没被检查,因为它默认不启用 font-family-name-quotes 这类“风格偏好”规则
立即学习“前端免费学习笔记(深入)”;
VS Code 里 Stylelint 不提示?检查 stylelint.validate 和语言模式绑定
插件 stylelint.vscode-stylelint 默认只对 css、postcss、html 语言生效,不会自动处理 vue、svelte 或 astro 中的 <style></style> 块。
需要手动在 settings.json 里补全:
"stylelint.validate": [ "css", "postcss", "less", "scss", "sass", "html", "vue", "svelte" ]
• 如果项目用的是
tailwindcss,还得加 "tailwindcss" 并确保装了 stylelint-config-tailwindcss•
html 模式下,内联 属性默认不校验,这是设计如此,不是 bug
CI 中 Stylelint 报 Cannot find module 'stylelint-config-standard'
这不是 Stylelint 本身的问题,而是 Node.js 模块解析失败。常见于:
• 配置文件里写了 extends: ['stylelint-config-standard'],但该包没安装在项目本地(即没执行 npm install -D stylelint-config-standard)
• 使用 pnpm,但没加 --shamefully-hoist,导致子依赖无法被配置文件 require 到
• CI 环境用了缓存,但 node_modules 未完整重建,尤其在切换 Node 版本后
实操建议:
• 所有 extends 引用的配置包,必须显式安装为 devDependencies
• 在 CI 脚本里加一步验证:node -e "require('stylelint-config-standard')",提前暴露模块缺失
• 避免在配置中用相对路径引入本地规则(如 ./rules/my-rule.js),CI 环境路径可能不一致
规则越细,配置耦合越深;改一个 order/properties-order 的数组,可能让整个团队的 CSS 格式化行为翻车。别小看那一行 plugins: ['stylelint-order'] 后面跟着的几十个属性名排序。










