如何在VSCode中安装并配置Stylelint检查CSS/LESS/SCSS代码规范-VSCode-PHP中文网

stylelint插件装了不报错，需检查三件事：①是否启用stylelint.enable: true；②项目根目录是否有.stylelintrc.*或stylelint.config.js配置文件；③vscode中是否将scss/less文件语言模式设为小写scss/less并配置stylelint.validate。

如何在vscode中安装并配置stylelint检查css/less/scss代码规范

VSCode里Stylelint插件装了但不报错？检查这三件事

Stylelint在VSCode中默认不会自动启用，装了插件只是第一步。核心问题是：没有关联文件类型、没启用验证、或项目里缺配置文件。

stylelint CLI 必须全局或本地安装（仅装 VSCode 插件 不等于 有校验能力）
确保 VSCode 设置里启用了 "stylelint.enable": true（默认可能为 false）
项目根目录必须有 .stylelintrc.js、.stylelintrc.json 或 stylelint.config.js —— 没配置文件时，Stylelint 直接静默退出，不报任何提示

如何让Stylelint同时检查CSS、SCSS和LESS

VSCode 默认只对 .css 文件触发 Stylelint，SCSS/LESS 需手动绑定语言模式与校验器。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

在工作区 .vscode/settings.json 中添加：

"stylelint.validate": ["css", "scss", "less"]

确认对应文件已正确识别语言模式：右下角点击“CSS” → 选“SCSS”或“Less”，否则 stylelint.validate 的条目无效
注意大小写：写成 "SCSS" 或 "Less" 会失效，必须全小写

本地安装stylelint和预设规则（推荐方式）

用全局安装容易版本冲突，尤其团队协作时。本地安装 + 显式配置规则集，才是稳定做法。

运行：

npm install --save-dev stylelint stylelint-config-standard-scss

创建 stylelint.config.js：

module.exports = {
  extends: ["stylelint-config-standard-scss"],
  rules: {
    "no-empty-source": null,
    "scss/dollar-variable-pattern": "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$"
  }
};

不推荐直接用 stylelint-config-standard 检查 SCSS：它不理解 $var、@mixin，会大量误报

保存时自动修复但部分规则不生效？这是预期行为

Stylelint 的 --fix 只支持部分规则（比如空格、分号、命名格式），像 declaration-block-no-duplicate-properties 这类需人工判断的，不会自动修。

在 settings.json 中开启自动修复：
```
"stylelint.autoFixOnSave": true
```

但注意：VSCode 1.84+ 已弃用该配置，改用：

"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": true
}

如果保存后无反应，打开命令面板（Ctrl+Shift+P），运行 Stylelint: Toggle Auto Fix On Save 确认开关状态

Stylelint 的实际效果高度依赖配置文件是否存在、语言模式是否匹配、以及规则本身是否支持自动修复——这三个点漏掉任何一个，都会让你觉得“装了等于没装”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！