VSCode中Stylelint插件配置与CSS规范校验-VSCode-PHP中文网

stylelint在vscode不报错，根本原因是校验链中断：未安装本地stylelint、缺失有效配置文件（如.stylelintrc.json）、或vscode未将文件识别为小写scss/vue等；插件仅调度，依赖项目依赖、配置及语言模式三者齐备。

vscode中stylelint插件配置与css规范校验

Stylelint 在 VSCode 里不报错，基本不是插件坏了，而是校验链断在了本地依赖、配置文件或语言模式三者之一——缺一个，就全程静默，连警告都没有。

VSCode 的 stylelint.vscode-stylelint 插件只是调度器，它不带规则、不解析语法，只调用你项目里的 node_modules/.bin/stylelint。所以：

项目根目录必须运行过 npm install --save-dev stylelint（全局安装容易版本混乱，不推荐）
必须存在有效配置文件：.stylelintrc.json、.stylelintrc.js 或 stylelint.config.js；名字写成 .stylelintrc（缺后缀）或 stylelint.config.cjs 都会静默退出
"stylelint.enable": true 必须在 .vscode/settings.json 或用户设置中显式开启（默认是 false）

Stylelint 默认只扫描独立的 .css 文件，对 .scss、.vue 里的 <style lang="scss"></style> 完全无视，除非你明确告诉它“这里面是 CSS”：

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

SCSS/LESS：安装对应解析器 npm install --save-dev postcss-scss（不要装 postcss），并在 stylelint.config.js 中加 customSyntax: "postcss-scss"（settings.json 里设无效）
Vue SFC：加 stylelint-config-recommended-vue 到 extends，并确保 "stylelint.validate" 包含 "vue"（大小写敏感）
自定义后缀如 .module.scss：必须在配置中用 overrides 显式声明，否则文件根本不会被读取

VSCode 1.84+ 已彻底弃用 stylelint.autoFixOnSave，继续写它等于没配。现在唯一有效路径是：

在 .vscode/settings.json 中加："editor.codeActionsOnSave": { "source.fixAll.stylelint": true }
必须同时关掉 "editor.formatOnSave": false，否则 Prettier 或内置 CSS formatter 会抢先格式化，跳过 Stylelint 修复
--fix 天然只修无歧义的格式问题：分号、空格、引号、单位小写等 ✅；属性顺序、嵌套层级、选择器权重、重复声明等 ❌——这不是 bug，是设计如此
如果修复后代码变乱，大概率是和 Prettier 冲突，建议禁用 "css.format.enable": false，让 Stylelint 独占样式层

Stylelint 默认只检查 .css、.scss、.sass、.less 等后缀，但如果你用的是 .module.css 或 .pcss 这类自定义后缀，它直接跳过——根本不会读你的文件。

在 .stylelintrc.js 里加 overrides 显式声明扩展名，并指定对应 customSyntax
如果是 CSS-in-JS（比如 styled-components），必须额外装 stylelint-processor-styled-components 并在配置中指定 "processor": "stylelint-processor-styled-components"
右下角点击语言模式，确认当前文件没被 "files.associations" 错误映射为 plaintext —— 手动切回 css 或 scss（注意全小写）