VSCode怎么配置Stylelint检查CSS规范_VSCode如何安装插件自动检测CSS样式代码错误【指南】-VSCode-PHP中文网

stylelint插件无反应需检查三件事：1.项目根目录是否存在.stylelintrc等配置文件；2.package.json中是否安装stylelint包；3.vscode设置中stylelint.enable是否为true。

vscode怎么配置stylelint检查css规范_vscode如何安装插件自动检测css样式代码错误【指南】

VSCode 里装了 stylelint 插件却对 CSS 文件毫无提示，大概率不是插件坏了，而是配置没落到实际执行链路上。

确认项目根目录有 .stylelintrc（或 stylelint.config.js 等等效配置文件），没有配置文件时插件默认不启用规则
检查 package.json 中是否已安装 stylelint 本身（不是只装了 VSCode 插件）：npm install --save-dev stylelint
VSCode 设置里搜 stylelint.enable，确保值为 true；再搜 stylelint.autoFixOnSave，按需开启（注意：它只修可安全自动修复的问题）

Stylelint 默认只检查 .css、.scss、.sass、.less 等后缀，但如果你用的是 .module.css 或 .pcss 这类自定义后缀，它直接跳过——根本不会读你的文件。

VSCode

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

下载

在 .stylelintrc 里加 "overrides" 显式声明扩展名：

{
  "overrides": [
    {
      "files": ["**/*.module.css"],
      "customSyntax": "postcss-less"
    }
  ]
}

如果用的是 CSS-in-JS（比如 styled-components），必须额外装 stylelint-processor-styled-components 并在配置中指定 "processor": "stylelint-processor-styled-components"
检查 VSCode 当前打开的文件是否被 "files.associations" 错误映射成了 plaintext —— 右下角点击语言模式，手动切回 CSS 或 SCSS

自动修复不是万能的，尤其涉及缩进、空行、顺序类规则时，Stylelint 容易和 Prettier 冲突，或者因语法解析失败而放弃修复。

先关掉 stylelint.autoFixOnSave，改用保存时手动触发：Ctrl+Shift+P → 输入 stylelint.fixAll 执行一次，看是否报错
如果提示 Cannot find module 'postcss'，说明 Stylelint 缺少解析器依赖，运行 npm install --save-dev postcss
和 Prettier 共存时，建议只让 Prettier 管格式（缩进/换行/引号），Stylelint 管规范（命名/单位/兼容性），并在 .stylelintrc 里禁用冲突规则："indentation": null、"no-multiple-empty-lines": null

默认情况下，Stylelint 不会主动进入 <style></style> 块，除非你告诉它“这里面是 CSS”。

装 stylelint-config-standard-scss 这类支持预处理器的配置还不够，得配 processors：
```
"processors": ["stylelint-processor-html"]
```
更稳妥的做法是用 stylelint-processor-styled-components 的兄弟项目：stylelint-processor-html（适用于 Vue/Svelte/Angular 模板内联样式）
Vue 3 + <style scoped></style> 场景下，某些属性选择器（如 :deep()）可能触发解析错误，此时需升级 postcss 到 8.x 以上，并在配置中加 "customSyntax": "postcss-html"