sublime Text 通过 SublimeLinter + stylelint 插件可实现 css/scss 保存时自动检查、高亮报错及一键修复;需安装 node、全局 stylelint、SublimeLinter 及其 stylelint 扩展,并正确配置 executable 路径、config 绝对路径与 "–fix-on-save" 参数。

sublime text 本身不内置 Stylelint 支持,但通过插件 + 正确配置,可以实现保存时自动检查、高亮报错、甚至一键修复 CSS/SCSS(需 Stylelint 14+ 和支持的规则)。
安装必要组件
需要三部分配合:Node 环境、Stylelint CLI、Sublime 插件。
- 确保已全局安装 Stylelint:
npm install -g stylelint(推荐用npx stylelint避免全局污染,但插件配置更依赖全局命令) - 安装 SublimeLinter 插件(核心框架):通过 Package Control → Install Package → 搜索 SublimeLinter
- 安装 SublimeLinter-contrib-stylelint:同上,搜索并安装该 linter 扩展
- 可选但推荐:安装 SCSS 或 css3 语法高亮插件,确保 .scss 文件被正确识别为 CSS 类型
配置 SublimeLinter 使用 Stylelint
打开 Preferences → Package Settings → SublimeLinter → Settings,在 user 配置中写入:
{ "linters": { "stylelint": { "enabled": true, "executable": ["stylelint"], "args": [ "--config", "/path/to/your/stylelint.config.js", "--fix-on-save" ], "scopes": ["source.css", "source.scss", "source.sass"] } } }
说明:
立即学习“前端免费学习笔记(深入)”;
-
"executable"指向你的 stylelint 命令(如使用 nvm,可能需写完整路径如"/Users/xxx/.nvm/versions/node/v18.18.2/bin/stylelint") -
"--config"路径必须是绝对路径,指向你项目根目录或全局的stylelint.config.js(支持.stylelintrc等格式) -
"--fix-on-save"是关键开关,启用后保存文件时自动修复可修复项(如空格、分号、属性顺序等) -
"scopes"确保对 .css / .scss 文件生效;若用source.sass,需确认语法包已激活
准备 Stylelint 配置文件
在项目根目录新建 stylelint.config.js,内容示例:
module.exports = { extends: ['stylelint-config-standard-scss'], plugins: ['stylelint-scss'], rules: { 'scss/at-rule-no-unknown': true, 'no-empty-source': null, 'at-rule-no-unknown': [true, { ignoreAtRules: ['extend', 'include', 'mixin'] }], 'declaration-block-trailing-semicolon': 'always', } };
注意:
- 使用
stylelint-config-standard-scss或stylelint-config-recommended-scss作为基础 - 务必安装对应依赖:
npm install -D stylelint-config-standard-scss stylelint-scss - 只有标记为
autofixable的规则才能被--fix-on-save修复(查官网规则文档确认)
验证与调试技巧
如果没反应,按顺序排查:
- 终端执行
stylelint --version和stylelint your-file.scss,确认 CLI 可运行且能检测出错 - Sublime 控制台(
Ctrl+`)查看是否报错,常见如 “command not found” 表示 executable 路径不对 - 右键文件 → SublimeLinter → Lint this view,手动触发检查,看是否有报错提示
- 确保文件右下角语法显示为 CSS 或 SCSS(不是 Plain Text),否则 linter 不会触发
- 重启 Sublime 后再试——插件加载有时需重启才生效
基本上就这些。配置一次,后续所有 CSS/SCSS 编辑都能实时反馈、自动修复,省去手动跑命令的麻烦,真正融入开发流。