基于ESLint HTML插件的内联脚本规范性校验方案-html教程-PHP中文网

最常见原因是eslint未配置对html文件的校验流程：必须在vs code中设置"eslint.validate": ["html"]（v8.39–）或"eslint.options.extensions": [".html"]（v8.40+），在.eslintrc.js中显式声明processor: "html/html"，并确保eslint-plugin-html与eslint版本兼容无peer conflict。

基于eslint html插件的内联脚本规范性校验方案

为什么装了 eslint-plugin-html 还没报错

最常见原因是 ESLint 根本没拿到 HTML 文件里的 <script></script> 内容——插件只负责提取，不自动触发检查。你必须显式告诉 ESLint：“对 .html 文件也走一遍校验流程”，否则它照常跳过。

关键动作有三个，缺一不可：

VS Code 设置里加 "html" 到 eslint.validate（v8.39–）或 eslint.options.extensions（v8.40+）
.eslintrc.js 中声明 processor: "html/html"（不能只写 plugins: ["html"]）
确认 npm list eslint eslint-plugin-html 无 peer conflict，比如 eslint-plugin-html@7.x 和 ESLint v9.x 不匹配会静默失效

如何只检查特定 HTML 文件里的脚本

全局开启 processor: "html/html" 可能拖慢 lint 速度，尤其项目里有大量静态 HTML 模板时。用 overrides 更精准：

overrides: [{
  files: ["src/index.html", "public/*.html"],
  processor: "html/html"
}]

注意两点：

files 是 glob 模式，不是正则；"*.html" 匹配所有层级，"**/*.html" 才是递归匹配
不要在 overrides 里重复写 env 或 globals——内联脚本默认继承顶层配置，但顶层必须已启用 env: { browser: true }，否则 document、localStorage 会被标为未定义

Vue 项目里 `<script></script>` 块为啥没被检查

因为 eslint-plugin-vue 默认接管所有 <script></script> 块（包括 <script setup></script>），eslint-plugin-html 的处理器会被绕过。这不是 bug，是插件优先级机制决定的。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

解决方法只有两个：

删掉 eslint-plugin-html，改用 eslint-plugin-vue 的完整规则集（它本身已包含对内联脚本的检查）
保留 eslint-plugin-html，但在 .eslintrc.js 的 overrides 中提高其匹配优先级，例如：
```
overrides: [
  { files: ["*.html"], processor: "html/html" },
  { files: ["*.vue"], processor: "vue/vue" }
]
```
注意顺序：靠前的 rule 优先匹配

HTML 内联样式和 `style="..."` 能被 ESLint 检查吗

不能。ESLint 只分析 JavaScript AST，style="text-align: center" 对它来说就是一段字符串，连 CSS 属性名都识别不了。即使你拼错成 text-algin，ESLint 也完全无感。

真要校验这类内容，得换工具：

stylelint + stylelint-processor-html：能检查内联 style 里的空格、分号、属性顺序等格式问题
html-validate：可捕获 text-align: top 这类无效值，但不判断“是否该居中”这种业务逻辑
自定义规则？可以，但得写正则去匹配 style="[^"]*text-align\s*:\s*([^;"]+)"，再校验值——这已超出 ESLint 设计范畴

别在 eslint-plugin-html 配置里折腾 style 相关规则，它只管 <script></script> 和 <style></style> 标签里的 JS/CSS 代码体，不管 HTML 属性字符串。