stylelint在vscode不报错,主因是项目未安装stylelint或配置文件未生效;需确保本地依赖、.stylelintrc.json配置、语言模式(如scss/vue)及解析器(如postcss-scss、stylelint-config-recommended-vue)均正确就绪。

Stylelint 在 VSCode 里不报错,基本不是插件没装,而是本地项目没装 stylelint 或配置文件没生效。
为什么装了插件却完全没提示?
VSCode 的 stylelint.vscode-stylelint 插件只是“桥梁”,它默认调用你项目 node_modules/.bin/stylelint。如果项目没装 stylelint,插件静默失效——不报错、不标红、也不弹任何提示。
- 先确认项目根目录运行过:
npm install --save-dev stylelint stylelint-config-standard - 再检查是否存在合法配置文件:
.stylelintrc.json(注意不是.stylelintrc.js或stylelint.config.js,除非你明确需要 JS 逻辑) - 内容至少得有:
{"extends": "stylelint-config-standard"} - VSCode 设置中搜
stylelint.enable,确保值为true
SCSS / Vue / Svelte 的 <style></style> 块不检查?
Stylelint 默认只认独立的 .css、.scss 文件,对单文件组件里的 <style lang="scss"></style> 或 <style scoped></style> 块直接跳过——除非你配了解析器和语言映射。
- 对 SCSS:必须装
postcss-scss(不是postcss),并加stylelint-config-standard-scss;否则会报Cannot find module 'postcss'或直接静默 - 对 Vue:加
stylelint-config-recommended-vue到extends,且stylelint.validate必须包含"vue"(全小写) - 对 Svelte:需额外配
stylelint-processor-styled-components并在rules中启用at-rule-no-unknown等兼容规则
stylelint.validate 怎么写才生效?
VSCode 默认只对 css 触发校验,scss、less、vue 等必须显式声明,且大小写敏感——写成 "SCSS" 或 "Less" 就无效。
- 在工作区
.vscode/settings.json里加:"stylelint.validate": ["css", "scss", "less", "vue"] - 右下角点击语言模式,手动切到
SCSS(不是SCSS (Sass)或其他别名),否则配置条目不匹配 - 若用
.module.css或.pcss这类自定义后缀,必须在.stylelintrc.json里加overrides显式绑定解析器
保存自动修复(autoFixOnSave)为什么修不动?
stylelint --fix 只能修语法层面无歧义的问题,比如分号缺失、空格位置、引号风格。涉及语义判断的规则根本不会被自动修复。
- 开启方式已变:VSCode 1.84+ 弃用
stylelint.autoFixOnSave,改用:"editor.codeActionsOnSave": {"source.fixAll.stylelint": true} - 它不会修命名错误(如
COLOR写成大写)、BEM 校验、@import顺序、选择器优先级等规则 - 若部分规则仍不触发修复,检查是否在
rules里设为null,或被预设配置(如stylelint-config-standard)覆盖了
最容易被忽略的一点:VSCode 打开的必须是项目根目录(含 package.json 和 .stylelintrc.json),而不是某个子文件夹——否则插件找不到本地 stylelint 可执行文件,也加载不了配置。











