sublime如何配置Stylelint自动检查和修复CSS/SCSS？ (前端必备)

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"]
    }
  }
}

登录后复制

说明：

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

标签： css css3 sublime js 前端 node npm ai 配置文件 报错提示