stylelint 默认不检查 html 文件中的 css，因其仅处理 css 源码文件（如 .css、.scss、.vue），需配合 stylelint-processor-html 等处理器才能提取并校验 块，且不支持内联 style 属性。
Stylelint 不能直接在 HTML 中检查 CSS —— 它不解析 HTML 文档结构，也不运行时读取 <style></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></style>块 - 常见现象：
color: reed;写在<style></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 中的
以 Vue 项目为例（.vue 文件含 <style></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> 标签，不支持 <style scoped></style> 或 <style lang="scss"></style> —— 后者要配 customSyntax: "postcss-scss" 和对应插件。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
HTML 内联 style 属性完全不支持
像 <div style="color: red; margin: 0 auto"> 这种写法，Stylelint 无法、也不会检查。这不是遗漏，而是设计取舍：
<ul>
<li>内联样式属于 DOM 操作范畴，语义和维护性极差，主流工程实践已弃用</li>
<li>没有稳定、通用的 parser 能准确从 HTML 属性值中分离出 CSS 声明（尤其含 JS 插值、转义、模板语法时）</li>
<li>即便强行支持，修复建议（如自动加空格、改单位）也会污染 HTML 结构，得不偿失</li>
</ul>
<p>如果你真有这种需求，说明项目架构已偏离现代前端规范，应优先重构为 CSS Modules 或 utility-first 类名体系。</p>
<h3>真正该检查的，是独立 CSS/SCSS 文件 + 构建流程集成</h3>
<p>99% 的实际收益来自检查真实源码文件，而非 HTML 嵌入块：</p>
<ul>
<li>命令行检查：<code>npx stylelint "src/**/*.css" "src/**/*.scss"（引号防 shell 展开）
stylelint-webpack-plugin，设 failOnError: true，错误直接中断构建vite-plugin-stylelint，开 strict: true，保存即阻断热更新package.json 加脚本 "lint:css": "stylelint \"src/**/*.{css,scss,vue}\""，PR 时强制执行HTML 文件本身不该承载样式逻辑；把它当容器，把样式交给专门的、可 lint 的文件去管——这才是可控、可维护、可协作的边界。
