怎么通过HTML的ESLint的eslint-plugin-html检查HTML内嵌脚本的代码质量-html教程-PHP中文网

eslint默认不检查html中标签内js代码，需安装eslint-plugin-html插件并配置processor: "html/html"和vs code的"eslint.validate": ["html"]（或v8.40+的"eslint.options"）才能启用检测。

怎么通过html的eslint的eslint-plugin-html检查html内嵌脚本的代码质量

ESLint 默认不处理 HTML 文件里的 <script></script> 标签内容，必须靠 eslint-plugin-html 插件才能真正检查内嵌 JS 代码——它不是“让 ESLint 支持 HTML”，而是把 HTML 中的 JS 片段提取出来，再交给 ESLint 原有流程跑一遍。

安装 eslint-plugin-html 并确认版本兼容性

这个插件本身不校验 HTML 结构，只负责剥离 <script></script>（含 type="module"、type="text/javascript" 等）并转发给 ESLint。关键点是版本匹配：

eslint-plugin-html@6.x 要求 ESLint ≥ v6.0.0；当前稳定版 ESLint（v8.57+ 或 v9.x）建议用 eslint-plugin-html@7.x（截至 2026 年已发布）
如果项目用了 Vue，eslint-plugin-vue 会接管 <script></script> 块，此时 eslint-plugin-html 可能被绕过——得看 overrides 配置优先级
运行 npm list eslint eslint-plugin-html 确认无 peer dependency 冲突，否则 npm install 时可能静默失败

VS Code 中启用 .html 文件的 ESLint 验证

仅装插件不够，VS Code 必须明确告诉 ESLint：“对 .html 后缀也走一遍校验流程”。这步漏掉，编辑器里就完全没提示。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

打开 VS Code 设置（Ctrl+, 或 Cmd+,），搜索 eslint.validate
编辑 settings.json，确保包含 "html"（不是 "htm" 或 "xhtml"）：
```
{ "eslint.validate": ["javascript", "javascriptreact", "html"] }
```
如果用的是 ESLint v8.40+，eslint.validate 已被废弃，改用 "eslint.options": { "extensions": [".js", ".jsx", ".html"] }
重启 VS Code 或重载窗口（Ctrl+Shift+P → Developer: Reload Window），否则设置不生效

在 .eslintrc.js 中正确注册插件和解析逻辑

plugins: ["html"] 只是声明依赖，真正起作用的是插件内部的处理器（processor）。必须显式指定，否则 ESLint 仍会跳过 <script></script> 块。

在 .eslintrc.js 的根对象中添加 processor 字段：
```
processor: "html/html"
```
若只想检查特定 HTML 文件（比如只查 src/index.html），用 overrides 更精准：
```
overrides: [{ files: ["*.html"], processor: "html/html" }]
```
注意：不要在 overrides 里重复写 env 或 globals，HTML 内脚本默认继承顶层配置；但若需浏览器全局变量（如 document），确保顶层 env: { browser: true } 已开启
避免把 eslint-plugin-html 加进 extends，它不提供规则集，只提供处理器

常见失效场景和快速排查路径

写了配置却没报错？大概率卡在这几个环节：

package.json 里 devDependencies 缺少 eslint-plugin-html，或安装时用了 --global 而非 --save-dev
VS Code 打开的不是项目根目录（即没有 .eslintrc.js 的文件夹），导致找不到配置
HTML 文件里 <script></script> 标签带了 src 属性（如 <script src="app.js"></script>），eslint-plugin-html 只处理内联脚本，不加载外部文件
脚本块用了非标准 type（如 type="application/json"），插件默认只识别 text/javascript、module、空 type 和 application/javascript
ESLint 输出面板（VS Code 底部状态栏点击 ESLint 图标）显示 “No ESLint configuration found”，说明配置文件未被识别，先检查文件名是否为 .eslintrc.js（不是 .eslintrc 或 .eslintrc.json）

最常被忽略的是处理器声明和 VS Code 的 eslint.validate 双重配置——缺一不可。插件本身不改 ESLint 规则行为，只是个“翻译器”，把 HTML 切片喂给原本的 JS 检查链。真要查 HTML 标签结构问题，得换用 eslint-plugin-html 的兄弟项目 eslint-plugin-html-req 或专用 HTML linter。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！