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

Stylelint在Sublime不报错主因是校验链路断裂：项目未装本地stylelint、缺有效配置文件（如stylelint.config.js）、.scss文件未绑定SCSS语法类型（默认为Plain Text）；需安装stylelint-scss、设customSyntax和plugins才能支持SCSS嵌套等特性。

为什么Stylelint在Sublime里完全不报错

不是插件没装好，而是校验链路断了三处：项目没装本地 stylelint、根目录缺 .stylelintrc.js 或等效配置文件、VS Code式思维误以为 Sublime 能自动识别 .scss —— 实际上 Sublime 默认把 .scss 当作 plain text，必须手动绑定语法类型。

常见现象：保存后状态栏无提示、右下角语言模式显示 “Plain Text”、哪怕装了 SublimeLinter-stylelint 也毫无反应。

• 确认 .scss 文件已用 SCSS 语法高亮插件（如 “SCSS” 或 “Sass”）正确着色；右下角点击语言名 → 选 “SCSS”（注意不是 “Sass” 或 “PostCSS”）
• 运行 npm install --save-dev stylelint stylelint-scss stylelint-config-sass-guidelines，别只装全局版 —— SublimeLinter 默认调用项目内 node_modules/.bin/stylelint
• 配置文件必须存在且路径正确：stylelint.config.js 或 .stylelintrc.js，内容至少包含 extends: ["stylelint-config-sass-guidelines"]

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

直接写 "max-nesting-depth": 3 是无效的 —— 这条规则默认只认纯 CSS，对 & 嵌套、@mixin、$var 等 SCSS 特有语法完全无视，结果就是静默跳过，连 warning 都没有。

真正起作用的配置必须同时满足三项：

立即学习“前端免费学习笔记（深入）”；

• 安装 stylelint-scss 插件（仅靠 stylelint-config-sass-guidelines 不够）
• 在 stylelint.config.js 中显式声明 customSyntax: "postcss-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 中的 <style lang="scss"> 怎么检查

Stylelint 默认跳过单文件组件里的 <style> 块，哪怕你写了 lang="scss"，它也当普通 HTML 处理，直接报 Unknown word 错误。

必须引入专用处理器并配置 overrides：

• 安装 npm install --save-dev stylelint-processor-html
• 在 stylelint.config.js 中添加 processor: "stylelint-processor-html"
• 若项目混用 .vue 和 .svelte，需用 overrides 分开指定：

overrides: [  {    files: ["**/*.vue"],    processor: "stylelint-processor-html"  }]

注意：stylelint-processor-html 对 lang="scss" 的支持依赖 postcss-scss 解析器，所以 customSyntax: "postcss-scss" 仍不可省略。

大型项目里最容易被忽略的，其实是 customSyntax 和 processor 的组合逻辑 —— 少一个，整个链路就断在解析层，后续所有规则都形同虚设。