Sublime Text 的 CSS 校验需 SublimeLinter 框架、SublimeLinter-csslint 插件和全局安装的 csslint CLI 三者协同,缺一不可;常见无提示问题多因 csslint 未正确调用或未全局安装,且需确保文件语法识别为 CSS、配置启用严格规则并开启 Debug 模式排查。

Sublime Text 本身不校验 CSS 规范,必须靠 SublimeLinter 框架 + SublimeLinter-csslint 插件 + 全局 csslint CLI 三者协同才能生效;缺一不可,且任意一个路径或版本不匹配都会导致“没报错”或“报错但不显示”。
为什么装了插件却没任何提示?
常见现象是保存 CSS 文件后状态栏无提示、行号旁无红黄标记、右下角不弹出错误信息——这基本不是插件没装好,而是底层 CLI 没被正确调用。
-
csslint必须全局安装:npm install -g csslint(不能只本地安装,SublimeLinter-csslint默认只查PATH中的全局命令) - 确认
csslint --version在终端能正常输出(如1.0.5),否则插件启动时直接静默失败 - Windows 用户注意:如果 Node.js 安装时没勾选
Add to PATH,需手动在 SublimeLinter 设置中指定sublimelinter_executable_map,例如:"css": "C:/Program Files/nodejs/node.exe"(指向node.exe,不是csslint) - Sublime Text 必须识别当前文件为
CSS语法(右下角状态栏应显示CSS),若打开.scss文件却显示Plain Text,则csslint根本不会触发
如何让 csslint 检查更严格、覆盖真实项目场景?
csslint 默认规则偏宽松,比如不检查 !important、不警告重复属性、不识别现代 CSS 变量,需手动启用关键规则。
- 在
Preferences → Package Settings → SublimeLinter → Settings – User中添加:"csslint_options"对象 - 常用增强项(直接复制进配置):
"important": true、"duplicate-properties": true、"outline-none": false(禁用此条可避免误报)、"adjoining-classes": true、"qualified-headings": false(允许h1.title类写法) - 注意:
csslint不支持自定义规则或插件扩展,所有规则必须来自其内置列表;想用custom-properties或media-query-no-invalid等新规则?得换stylelint,csslint已多年未更新(最后发布于 2017 年)
保存时才校验 vs 实时校验,怎么选?
默认是实时校验(on_save + on_modified 混合),但对大型 CSS 文件易卡顿,且部分规则(如 empty-rules)在编辑中途频繁误报。
立即学习“前端免费学习笔记(深入)”;
- 推荐设为仅保存时检查:在 SublimeLinter 用户设置中加
"lint_mode": "save only" - 若仍想保留部分实时反馈,可用
"delay": 0.8(单位秒),避免每敲一个字就跑一次csslint - 禁用某条规则比关闭整个校验更稳妥,例如:
"ids": false(禁用 ID 选择器警告,因 BEM/Shadow DOM 场景下 ID 合理)
真正容易被忽略的是:SublimeLinter 的日志开关。遇到“应该报错却不报”,第一反应不该是重装插件,而是打开 Tools → SublimeLinter → Toggle Debug Mode,看控制台(Ctrl+`)里有没有 csslint: ERROR 或 command not found —— 大部分问题在这里暴露得最直接。


















