Sublime Text+Stylelint插件实现超大型项目CSS/SCSS静态质量控制

先说几个关键点：Stylelint 在 Sublime Text 中“罢工”，通常不是插件没装对，而是配置链路发生了断裂。项目中没有安装本地版 stylelint、根目录缺少类似 stylelint.config.js 的配置文件，或者你把 .scss 文件当成了普通文本处理——这三个原因，只要命中一个，代码校验就会彻底失效。

如果你发现保存文件后状态栏毫无反应，右下角语言模式显示为“Plain Text”，那问题就出在这里。解决方法并不复杂：首先，确保你的 .scss 文件已经启用了语法高亮插件（例如“SCSS”或“Sass”），在右下角点击语言名称，手动切换为“SCSS”；其次，不要只安装全局版本，务必在项目目录下运行 npm install --sa ve-dev stylelint stylelint-scss stylelint-config-sass-guidelines，因为 SublimeLinter 默认调用的是项目内的 stylelint；最后，检查根目录，确认 stylelint.config.js 或 .stylelintrc.js 文件存在，并且内容至少包含 extends: ["stylelint-config-sass-guidelines"]。

max-nesting-depth 在 SCSS 中为何总不生效

很多开发者在配置里直接写入 "max-nesting-depth": 3，却发现它根本不起作用，连一个警告都没有。原因很简单：这条规则默认只识别纯 CSS，对于 SCSS 中的 & 嵌套、@mixin、$var 等语法，它直接忽略，默默跳过。

那么，究竟什么样的配置才能生效？需要同时满足三个条件：

• 安装 stylelint-scss 插件——仅靠 stylelint-config-sass-guidelines 是不够的，它只提供了一组规则集，但无法解析 SCSS 语法。
• 在 stylelint.config.js 中显式声明 customSyntax: "postcss-scss"，告诉 Stylelint：“这段代码需要用 SCSS 解析器来读取。”
• 启用 plugins: ["stylelint-scss"]，否则像 &__header 这类嵌套写法，根本不会被计入深度计算。

一个能正常运行的最小配置示例大致如下：

export default {
  plugins: ["stylelint-scss"],
  customSyntax: "postcss-scss",
  rules: {
    "max-nesting-depth": [4, { ignore: ["at-rules"] }]
  }
};

Sublime 保存时自动修复只修一半怎么办

stylelint --fix 的能力边界你需要清楚：它能帮你补全分号、调整引号、删除多余空格，但绝不会为你重新排列属性顺序，更不会合并重复声明或拆分过度嵌套的选择器。这些属于语义层面的判断，不在自动修复的范畴内。

另一个容易被忽略的细节是：SublimeLinter-contrib-stylelint 默认不开启 fix-on-save 功能。你需要手动在设置中添加参数：

• 进入 Preferences → Package Settings → SublimeLinter → Settings。
• 在 linters.stylelint 下添加："args": ["--fix-on-save"]。
• 注意：这个参数仅对 Stylelint v14+ 版本有效。如果你使用的是 v16+，请同时将 stylelint-scss 升级到兼容版本，否则 --fix 会跳过所有 SCSS 特有的结构。

如果修复后样式反而错乱，大概率是与 Prettier 发生了冲突。此时可以关闭 css.format.enable，让 Stylelint 独自负责样式格式化，问题通常就能得到解决。

Vue/SFC 中的