webhint 默认不检查网页性能问题，需手动配置 .hintrc 启用 performance 规则；它仅做静态预防性检查（如文件大小、图片格式），不替代 lighthouse 的真实加载测量。
Webhint 插件装了不等于能用，它默认只检查 HTML 和基础 JS/TS 问题，对“网页性能”类建议（比如 LCP 超时、未压缩图片）基本不触发——除非你手动配 .hintrc 或改 VSCode 设置。
Webhint 默认不分析性能问题的原因
VSCode 安装的 vscode-webhint 插件，默认加载的是 @hint/configuration-development 配置包。这个配置聚焦于可访问性、安全、常见语法错误和基础 HTML 结构，但不启用 performance 相关的 hint（例如 no-large-javascript-files、optimize-images、metrics）。
- 打开任意 HTML 文件，即使页面加载明显卡顿，Webhint 也不会报 “JavaScript 执行时间过长” 这类提示
- 它不会扫描
<img src="huge.jpg">并建议压缩，除非你显式开启hint-image-optimization - 错误信息里不会出现
Lighthouse: Largest Contentful Paint > 2500ms这类指标型警告
如何让 Webhint 在 VSCode 中真正检查性能问题
必须覆盖默认配置，启用 performance hint 包并指定目标环境。推荐在项目根目录新建 .hintrc 文件：
{
"extends": ["development", "web-recommended"],
"hints": {
"no-large-javascript-files": ["error", { "maxSize": 150000 }],
"optimize-images": ["warn"],
"metrics": ["warn", { "lcp": 2500, "cls": 0.1 }]
}
}
-
"extends": ["development", "web-recommended"]是关键：后者包含 performance 相关规则 -
"metrics"需要配合运行时采集（如 Chrome DevTools），VSCode 内仅做静态结构校验；但它会提示你哪些指标该监控 - 保存后重启 VSCode 或右键文件选 “Restart webhint server”，否则新规则不生效
- 若项目用 Vue/React，还需加
"parsers": ["html", "javascript", "typescript"]，否则 JSX 中的import不被识别，影响no-http-redirects等链路类检查
Webhint 性能建议 vs Lighthouse 的实际分工
别指望 Webhint 替代 Lighthouse 做真实加载测量。它的性能建议本质是预防性静态检查：
-
no-large-javascript-files检查打包产物体积（如dist/main.js是否超 150KB），但不运行代码 -
optimize-images只校验<img>标签是否带srcset或是否引用了 .svg/.webp，不分析像素尺寸或压缩率 - 它不会告诉你 “首屏渲染耗时 3.2s”，但会标红
<script src="vendor.js" defer></script>并提示 “考虑 code-splitting” - 真正测 LCP、TTFB、CLS，还得靠
Lighthouse插件或浏览器 Audits 面板——Webhint 只负责把“容易踩的坑”提前写进编辑器里
Webhint 的价值不在运行时指标，而在把性能规范变成编辑器里的红色波浪线。一旦 .hintrc 配错路径、漏掉 web-recommended，它就退化成一个 HTML 校验器——这点最容易被忽略。
