VS Code 保存时 Stylelint 自动修复失效，主因是格式化链路被 Prettier 或内置 formatter 抢占；需关闭 editor.formatOnSave、启用 editor.codeActionsOnSave 中的 source.fixAll.stylelint，并正确配置 customSyntax、解析器及规则集。
VS Code 保存时自动修复不生效？先关掉 editor.formatOnSave
Stylelint 保存即修复失效，90% 是因为 VS Code 的格式化链路被抢占。默认开启的 editor.formatOnSave 会优先调用 Prettier 或内置 CSS formatter，而它们不认识 @layer、var(--x) 或 SCSS 嵌套语法，直接跳过，Stylelint 根本没机会运行。
实操建议：
- 在
settings.json中显式关闭："editor.formatOnSave": false - 启用
"editor.codeActionsOnSave": {"source.fixAll.stylelint": true}（注意：stylelint.autoFixOnSave已被 VS Code 1.84+ 废弃，设了也无效） - 确认已安装官方插件
stylelint.vscode-stylelint（不是旧版stylelint） - 检查
"css.validate": false是否已设——否则 VS Code 自带校验会报红，掩盖 Stylelint 的修复提示
customSyntax 没配对，.scss/.less 文件压根不会触发修复
Stylelint 默认只解析标准 CSS 语法。遇到 &:hover、@mixin、@media (min-width) { .a { ... } } 这类写法，若没指定语法解析器，插件会把整个文件当无效 CSS 处理，selector-nest-limit、scss/dollar-variable-pattern 等规则完全静默，更别说修复。
必须做三件事：
立即学习“前端免费学习笔记（深入）”；
- 安装对应解析器：
npm install --save-dev postcss-scss（SCSS）或postcss-less（LESS） - 在
stylelint.config.js中声明：customSyntax: "postcss-scss"（路径或字符串均可，但 settings.json 里设无效） - 改用匹配的规则集：
stylelint-config-standard-scss（不要混用stylelint-config-standard，否则$color会被当成非法属性）
哪些 rule 能 auto-fix？别指望 selector-max-id 自己改代码
Stylelint 官网每个 rule 页面右上角标着 ✅ 或 ❌，只有带 ✅ 的才支持自动修复。这是硬限制，不是配置问题。
常见可修复 rule：
-
indentation：缩进空格数不对，保存即修正 -
color-hex-case：#FF0000→#ff0000 -
declaration-colon-space-after：冒号后缺空格自动补 -
declaration-block-trailing-semicolon：块末尾缺分号自动加
不可修复的典型例子：
-
selector-max-id、max-nesting-depth：涉及语义判断，无法安全重写 -
selector-max-compound-selectors：改它可能破坏样式作用域 -
order/properties-order：需stylelint-order插件 + 显式启用，且漏写的属性默认排最后，不报错也不调整
别在配置里给 ❌ 规则加 fix: true —— CLI 和插件都会静默忽略，你还以为是环境问题。
命令行 --fix 和编辑器保存修复，根本不是一回事
npx stylelint "**/*.{css,scss}" --fix 是全量扫描、暴力覆盖，适合上线前清理；编辑器保存时的修复是单文件、增量、轻量级，只走当前打开文件 + 可修复 rule。
这意味着：
- 你在
Button.scss里改了一行，保存只会修这一行的缩进/引号/分号，不会顺手把components/下所有文件的color-hex-case全刷一遍 - CI 脚本里跑
--fix，和本地编辑器行为不等价，别用保存修复的效果去猜 CI 报错原因 - 路径匹配要一致：CLI 默认只处理
.css，.scss必须靠customSyntax+stylelint.validate配置才能进 pipeline
最易被忽略的一点：Stylelint 的修复能力高度依赖「配置加载时机」和「语法解析器绑定」，而不是规则本身多强大。一个 .stylelintrc.js 放错位置、customSyntax 拼错字符串、或插件没读到项目级配置，都会导致“看起来配好了，但就是不修”。
