如何在VSCode中全局配置Stylelint自动检查修复SCSS文件

1. 创建全局Stylelint配置文件 #

在你的用户根目录（Windows为C:\Users\你的用户名，macOS/Linux为~）下创建Stylelint配置文件，推荐命名为.stylelintrc.json，填入以下内容：

{
  "extends": [
    "stylelint-config-recess-order"
  ],
  "plugins": [
    "stylelint-order"
  ],
  "customSyntax": "postcss-scss",
  "rules": {
    // 可根据需求添加自定义规则，示例：
    "indentation": 2,
    "string-quotes": "double"
  }
}

这个配置会继承stylelint-config-recess-order的排序规则，启用stylelint-order插件，并明确指定SCSS语法解析器。

2. 配置VSCode全局设置 #

打开VSCode的设置面板（快捷键Ctrl+,或Cmd+,），点击右上角的「打开设置(JSON)」，添加以下配置项：

{
  // 限定Stylelint只校验SCSS文件
  "stylelint.validate": ["scss"],
  // 让Stylelint使用全局安装的依赖包
  "stylelint.nodePath": "", // 留空会自动识别全局包路径，若识别失败，可手动填入`npm root -g`命令输出的路径
  // 开启保存时自动修复Stylelint错误
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  // 彻底禁用VSCode内置的CSS/LESS/SCSS校验器，避免冲突
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
}

如果stylelint.nodePath留空无法找到全局包，可先执行npm root -g命令获取全局依赖的安装路径，再把路径填进去。

3. 验证配置效果 #

• 新建一个.scss文件，故意写不符合规则的代码，比如打乱属性顺序：

.test-box {
  color: #fff;
  padding: 10px;
  margin: 20px;
}

• 保存文件后，查看代码是否自动修复属性顺序（按recess-order规则，margin会排在padding前面），同时编辑器会在未保存时提示违规内容。
• 若未生效，可打开VSCode的「输出」面板，选择「Stylelint」查看日志，排查是否存在全局包路径错误或配置文件语法问题。

内容的提问来源于stack exchange，提问作者darpserj