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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-12-14

浏览次数：次

返回列表

Sublime Text 通过 SublimeLinter + stylelint 插件可实现 CSS/SCSS 保存时自动检查、高亮报错及一键修复；需安装 Node、全局 stylelint、SublimeLinter 及其 stylelint 扩展，并正确配置 executable 路径、config 绝对路径与 "--fix-on-s*e" 参数。

sublime如何配置stylelint自动检查和修复css/scss？ (前端必备)

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-s*e"
      ],
      "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-s*e" 是关键开关，启用后保存文件时自动修复可修复项（如空格、分号、属性顺序等）
"scopes" 确保对 .css / .scss 文件生效；若用 source.sass，需确认语法包已激活

准备 Stylelint 配置文件

在项目根目录新建 stylelint.config.js，内容示例：

美图AI开放平台

美图推出的AI人脸图像处理平台

111 查看详情美图AI开放平台

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',
  }
};

注意：