VSCode中Stylelint插件配置实现SCSS样式代码深度检测-VSCode-PHP中文网

stylelint对scss文件“没反应”主因是校验链中断：未安装本地stylelint及postcss-scss、缺失合法.stylelintrc.json配置、vscode未将文件识别为小写scss；需同时满足依赖、配置、语言模式和settings.json中"stylelint.validate": ["scss"]四条件。

vscode中stylelint插件配置实现scss样式代码深度检测

Stylelint 在 VSCode 里对 SCSS 文件“没反应”，基本不是插件问题，而是校验链断在了三个关键位置：本地没装 stylelint 和解析器、配置文件名或内容无效、VSCode 没把文件识别为小写的 scss。

为什么 .scss 文件完全不报错？

VSCode 的 stylelint.vscode-stylelint 插件只是调度器，它默认只检查 .css 文件；对 .scss 文件，必须同时满足以下条件才会触发检测：

项目根目录已运行 npm install --save-dev stylelint stylelint-config-standard-scss postcss-scss（注意：不能用 stylelint-config-standard，否则会误报 $var 和嵌套语法）
.stylelintrc.json 或 stylelint.config.js 存在且语法合法；名字写成 .stylelintrc（缺后缀）或 stylelint.config.cjs（非官方支持）都会导致静默退出
VSCode 右下角语言模式显示的是 scss（全小写），不是 SCSS、Sass 或 Plain Text；点击切换时务必选中小写项
.vscode/settings.json 中明确启用并声明验证类型："stylelint.validate": ["css", "scss"]（大小写敏感，“SCSS”无效）

如何让 `.module.scss` 或 `.page.scss` 这类自定义后缀也被检测？

Stylelint 默认只认标准后缀，遇到 .module.scss 等扩展名会直接跳过——连配置都不读。必须在配置中用 overrides 显式声明：

{
  "extends": "stylelint-config-standard-scss",
  "overrides": [
    {
      "files": ["**/*.module.scss", "**/*.page.scss"],
      "customSyntax": "postcss-scss"
    }
  ]
}

注意：customSyntax 必须写在 overrides 内部，写在顶层无效；且值只能是字符串 "postcss-scss"，不能是 require("postcss-scss") 或其他形式。

VSCode

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

下载

保存时自动修复只修分号和空格，不修属性顺序或嵌套层级？

这不是 bug，是 Stylelint 的设计限制：--fix 天然只处理无歧义的格式问题。涉及语义判断的规则（如 order/properties-order、selector-max-compound-selectors、no-duplicate-selectors）全部不支持自动修复。

确认当前规则是否支持修复：查官网文档每条规则页右上角的 ✅/❌ 标识
VSCode 1.84+ 已弃用 stylelint.autoFixOnSave，改用："editor.codeActionsOnSave": { "source.fixAll.stylelint": "explicit" }
若修复后代码变乱，大概率是和 Prettier 冲突——禁用 "css.format.enable": false，并确保 Prettier 不接管 scss 类型
修复失败还可能因解析失败，比如报 Cannot find module 'postcss'，此时补装：npm install --save-dev postcss

Vue / Svelte 单文件组件里的 `<style lang="scss"></style>` 怎么检测？

Stylelint 默认不进入 <style></style> 块，哪怕你写了 lang="scss"。必须加专用配置和处理器：

Vue：安装 stylelint-config-recommended-vue，并在配置 extends 中引入；同时确保 "stylelint.validate" 包含 "vue"（大小写敏感）
Svelte：需额外安装 stylelint-processor-styled-components，并在配置中指定 "processor": "stylelint-processor-styled-components"
所有 SFC 场景下，postcss-scss 仍需保留，否则嵌套语法解析会失败

最易被忽略的一点：即使配置全对，如果项目里用了 pnpm 或 yarn pnp，node_modules/.bin/stylelint 可能无法被插件正确 resolve——建议优先用 npm 或显式设置 "stylelint.packageManager": "pnpm"。