Stylelint 默认不检查 HTML 文件中的 CSS，因其仅处理 CSS 源码文件（如 .css、.scss、.vue），需配合 stylelint-processor-html 等处理器才能提取并校验 <style> 块，且不支持内联 style 属性。
Stylelint 不能直接在 HTML 中检查 CSS —— 它不解析 HTML 文档结构，也不运行时读取 <style> 或内联 style 属性。它只扫描源码文件（如 .css、.scss、.vue），且对 HTML 文件本身完全无感。
为什么直接在 .html 文件里写 CSS，Stylelint 不报错
Stylelint 默认跳过所有 .html 后缀文件。即使你写了 <style>.btn { color: red; }</style>，只要文件是 index.html，它就不会被处理。
- 根本原因：Stylelint 的输入是“CSS 源码字符串”，不是 HTML AST；它依赖外部处理器（如
stylelint-processor-html）提取<style>块 - 常见现象：
color: reed;写在<style>里，VS Code 不标红，命令行npx stylelint index.html直接提示 “No files matching the pattern were found” - Vue/Svelte 等单文件组件能被检查，是因为有专用 processor（如
stylelint-processor-html）显式告诉 Stylelint：“请从这个 HTML-like 文件里抽取出 CSS 部分”
想检查 HTML 中的 <style> 块，必须加 processor
以 Vue 项目为例（.vue 文件含 <style>），需三步走：
- 安装处理器：
npm install --save-dev stylelint-processor-html - 在
.stylelintrc.js中声明：{"processor": "stylelint-processor-html"} - 确保
stylelint.validate包含"html"（VS Code 工作区设置）："stylelint.validate": ["css", "html"]
注意：stylelint-processor-html 只处理标准 <style> 标签，不支持 <style scoped> 或 <style lang="scss"> —— 后者要配 customSyntax: "postcss-scss" 和对应插件。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
HTML 内联 style 属性完全不支持
像 <div style="color: red; margin: 0 auto"> 这种写法，Stylelint 无法、也不会检查。这不是遗漏，而是设计取舍：
- 内联样式属于 DOM 操作范畴，语义和维护性极差，主流工程实践已弃用
- 没有稳定、通用的 parser 能准确从 HTML 属性值中分离出 CSS 声明（尤其含 JS 插值、转义、模板语法时）
- 即便强行支持，修复建议（如自动加空格、改单位）也会污染 HTML 结构，得不偿失
如果你真有这种需求，说明项目架构已偏离现代前端规范，应优先重构为 CSS Modules 或 utility-first 类名体系。
真正该检查的，是独立 CSS/SCSS 文件 + 构建流程集成
99% 的实际收益来自检查真实源码文件，而非 HTML 嵌入块：
- 命令行检查：
npx stylelint "src/**/*.css" "src/**/*.scss"（引号防 shell 展开） - Webpack：用
stylelint-webpack-plugin，设failOnError: true，错误直接中断构建 - Vite：用
vite-plugin-stylelint，开strict: true，保存即阻断热更新 - CI 流程：在
package.json加脚本"lint:css": "stylelint \"src/**/*.{css,scss,vue}\""，PR 时强制执行
HTML 文件本身不该承载样式逻辑；把它当容器，把样式交给专门的、可 lint 的文件去管——这才是可控、可维护、可协作的边界。
