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 编辑都能实时反馈、自动修复，省去手动跑命令的麻烦，真正融入开发流。
