Stylelint默认不检查HTML中的内联样式和<style>标签，因其v14+仅处理纯CSS文件；需通过overrides指定customSyntax: "postcss-html"并配置stylelint-config-html才能正确解析和校验。
HTML 中的内联样式和 <style> 标签内容默认不会被 Stylelint 检查——除非你显式告诉它“这些 HTML 文件里有 CSS，得扫一遍”。不配 customSyntax 和 overrides，stylelint "**/*.html" 就是白跑。
为什么 HTML 文件里的样式总被忽略？
Stylelint v14+ 默认只处理纯 CSS 文件。HTML 是混合语法，必须靠插件解析结构、提取样式块。核心依赖是 postcss-html，它负责把 <style> 和 里的内容拎出来喂给 Stylelint。
-
postcss-html是解析器，不是可选插件——没它，HTML 就是纯文本，Stylelint 看不懂 -
stylelint-config-html/vue提供 Vue 单文件组件中<style>的基础规则，但普通 HTML 需要自己配customSyntax: "postcss-html" - 如果只在
extends里写stylelint-config-standard，HTML 文件完全不会进 lint 流程
如何让 Stylelint 正确检查 HTML 内联样式和 style 标签？
关键在配置文件的 overrides 和 customSyntax。不能只靠全局 customSyntax，因为不同文件类型需要不同解析器（比如 SCSS 要用 postcss-scss）。
- 安装必要依赖：
npm install postcss-html stylelint-config-html --save-dev - 在
stylelint.config.js或.stylelintrc.cjs中明确声明 HTML 文件使用postcss-html：
module.exports = {
overrides: [
{
files: ["**/*.html", "**/*.htm"],
customSyntax: "postcss-html",
extends: ["stylelint-config-html"]
}
]
};
-
stylelint-config-html包含对属性和<style>块的基本支持，比如检测style属性是否含非法值 - 若项目含 Vue，把
"**/*.vue"也加进同一组files，并用stylelint-config-html/vue
常见报错：Cannot parse selector 或 Unknown word
这类错误基本等于解析器没对上。比如你在 HTML 里写了 <div style="display: flex; gap: 8px;">，但没启用 postcss-html，Stylelint 就会把整段字符串当无效 CSS 处理。
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
Unknown word (CssSyntaxError)—— 解析器卡在<div开头，根本没进样式提取环节 - 修复路径：确认
postcss-html已安装；检查overrides是否命中目标文件；运行npx stylelint --print-config index.html看实际生效配置 - 注意：
stylelint-config-prettier对 HTML 内联样式无效，它只作用于 CSS/SCSS 文件，别指望它修复里的空格问题
HTML 中 style 属性的规则怎么开？
Stylelint 默认不校验 里的属性顺序、单位、颜色写法等——这些属于“CSS 内容规则”，需手动启用，并确保它们落在 HTML 的 overrides 块里。
- 例如强制
style中颜色用小写十六进制："color-hex-case": "lower"，必须写在 HTML 对应的rules下，而非顶层 - 正确位置：
overrides: [{
files: ["**/*.html"],
customSyntax: "postcss-html",
rules: {
"color-hex-case": "lower",
"length-zero-no-unit": true,
"declaration-block-no-redundant-longhand-properties": true
}
}]
- 如果把
length-zero-no-unit放在顶层rules，它对 HTML 文件无效——因为顶层规则只作用于默认解析器处理的文件（即 .css） - Vue 中的
<style scoped>属于纯 CSS，走的是另一套customSyntax: "postcss-scss"或默认流程，规则配置位置完全不同
最易漏的一点：HTML 文件的 lint 规则必须严格绑定到 overrides + customSyntax 组合，脱离这个上下文的任何 rules 都不会生效。别在 extends 里堆一堆配置就以为万事大吉——Stylelint 不会自动跨语法类型复用规则。
