Sublime Text配合Sass-Lint前端样式合规校验-sublime-PHP中文网

sublime text 中 sass-lint 不可用，因 sublimelinter-scss-lint 插件已废弃且依赖停更的 ruby scss-lint，与 dart sass 和 node.js v16+ 不兼容；应改用 stylelint + stylelint-scss，需正确配置语法作用域、本地安装及规则范围。

sublime text配合sass-lint前端样式合规校验

Sublime Text 本身不支持 Sass-Lint，必须通过 SublimeLinter 框架桥接，且 SublimeLinter-scss-lint 插件已多年未维护（最后更新 2019 年），在现代 Node.js（v16+）和 Sass（Dart Sass）环境下基本不可用——直接装会静默失败，连报错都不显示。

为什么 `SublimeLinter-scss-lint` 现在跑不起来

根本原因是底层依赖的 Ruby 版 scss-lint 已停止维护，且与当前主流 Sass 编译器（Dart Sass）不兼容。它要求系统预装 Ruby + Bundler + scss-lint gem，而 Dart Sass 不识别其解析逻辑，导致 lint 进程启动即退出或卡死。

scss-lint 最后发布是 2018 年，官方明确标注 “deprecated”
Node.js v16+ 下，SublimeLinter-scss-lint 的 Python 调用层常因 subprocess 超时或编码问题直接跳过检查
即使强行安装成功，对 @use、@forward、模块化语法等现代 Sass 特性完全无感知，误报/漏报严重

替代方案：用 `stylelint` + `stylelint-scss` 实际可用

Stylelint 是目前唯一稳定支持 Sass/SCSS 语法的活跃 Linter，配合 stylelint-scss 插件可覆盖变量重定义、嵌套深度、BEM 命名、@extend 冗余等典型样式冲突问题。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

先在项目本地安装：npm install --save-dev stylelint stylelint-scss

根目录建 .stylelintrc.js，启用 SCSS 规则：

module.exports = {
  extends: ['stylelint-config-standard-scss'],
  plugins: ['stylelint-scss'],
  rules: {
    'scss/double-slash-comment-empty-line-before': 'always',
    'scss/at-rule-no-unknown': true,
    'scss/selector-no-redundant-nesting-selector': true
  }
};

Sublime 中安装 SublimeLinter-stylelint（不是 scss-lint）
配置路径指向本地 bin："executable": ["./node_modules/.bin/stylelint"]，别用全局安装

`stylelint` 配置里容易被忽略的坑

Sublime 不会自动识别 .scss 文件的语法作用域，若状态栏右下角没显示 “SCSS” 或 “CSS”，stylelint 就不会触发。

确认已安装并启用 SCSS 语法包（Package Control 搜索 “SCSS” 安装）
手动设置语法：右键 → Set Syntax → SCSS，或保存为 .scss 后缀
scopes 必须显式写全："scopes": ["source.scss", "source.css"]，漏掉 source.scss 就不生效
规则如 scss/at-else-closing-brace-newline-after 依赖 stylelint-scss v4.0+，旧版会直接报 Unknown rule