Stylelint在VSCode不报错,主因是校验链中断:未安装本地stylelint、缺失.stylelintrc.*配置文件,或VSCode未将文件识别为小写scss。

Stylelint 在 VSCode 里不报错,基本不是插件没装,而是本地没装 stylelint、没配 .stylelintrc.*、或 VSCode 没把文件识别为 scss(注意小写)——这三个环节断一个,校验就静默失效。
为什么装了插件却完全没提示?
VSCode 的 stylelint.vscode-stylelint 插件只是调度器,它不带规则、不带解析能力,只负责调用你项目里的 node_modules/.bin/stylelint。所以:
- 项目根目录必须运行过
npm install --save-dev stylelint stylelint-config-standard-scss(SCSS 项目别用stylelint-config-standard,会误报$var和嵌套) -
.stylelintrc.json或stylelint.config.js必须存在且语法合法;空文件、名字写成.stylelintrc(缺后缀)或stylelint.config.cjs(非官方支持)都会导致静默退出 -
"stylelint.enable": true要在.vscode/settings.json或用户设置里显式开启(默认是false)
SCSS/LESS/Vue SFC 的 style 块为什么不检查?
Stylelint 默认只扫描独立的 .css 文件,对 .scss、.vue 里的 完全无视,除非你告诉它“这里面是 CSS”:
- SCSS/LESS:安装对应解析器
npm install --save-dev postcss-scss,并在stylelint.config.js中加customSyntax: "postcss-scss"(settings.json里设无效) - Vue SFC:加
stylelint-config-recommended-vue到extends,并确保"stylelint.validate"包含"vue"(大小写敏感) - LESS 文件被识别为
Plain Text?右下角点击语言模式 → 手动选Less(不是LESS或PostCSS) - 用了
.module.scss这类后缀?在配置里加overrides声明,否则文件根本不会被读取
保存时自动修复只修了一半,甚至完全不触发?
Stylelint 的 --fix 天然只修无歧义的格式问题,比如分号、空格、引号;涉及语义判断的(如选择器权重、属性顺序、重复声明)一律不修——这不是 bug,是设计如此。
- VS Code 1.84+ 已弃用
stylelint.autoFixOnSave,必须用:"editor.codeActionsOnSave": { "source.fixAll.stylelint": "explicit" } - 关掉
"editor.formatOnSave": false,否则 Prettier 或内置 CSS formatter 会抢先执行,跳过 Stylelint - 修复后代码变乱?大概率是和 Prettier 冲突,建议禁用
"css.format.enable": false,让 Stylelint 独占样式层 - 想确认某条规则能否修复?去官网查该 rule 页面右上角图标——✅ 才能修,❌ 就是人工看
修复失败还报 Cannot find module 'postcss'?
这是解析器缺失的典型错误,尤其在启用 customSyntax 后:
- 补装
npm install --save-dev postcss(基础依赖,postcss-scss也依赖它) - 如果用
stylelint-order做属性排序,还得额外装npm install --save-dev stylelint-order并在配置中声明plugins: ["stylelint-order"] - Vue/Svelte 单文件组件需处理器:Vue 装
stylelint-processor-html,Svelte 装stylelint-processor-svelte,并在配置中指定processor字段
最常被忽略的是 customSyntax 必须写在项目级配置(stylelint.config.js)里,而不是 VSCode 设置中;还有 stylelint.validate 的值必须全小写,写成 "SCSS" 就等于没写。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











