先说几个关键点: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 独自负责样式格式化,问题通常就能得到解决。
