VS Code中HTML红/绿波浪线90%是校验误报，非语法错误；应悬停查看提示关键词（如htmlhint、Vetur、cSpell）定位来源，再针对性调整文件关联、禁用校验项或配置规则。
VS Code 里 HTML 文件出现的红/绿波浪线，90% 不是语法错误，而是校验工具（比如 htmlhint、Vetur）在按自己规则“主动报错”——它和你写的代码对不对没关系，只和它认不认得你用的语法有关。
怎么快速判断波浪线是不是误报
把鼠标悬停在波浪线下方，看弹出提示里带不带这些关键词：
-
htmlhint: attr-unsafe-chars→ htmlhint 插件在检查属性值是否含特殊字符 -
Vetur: validate template→ Vetur 把普通 HTML 当 Vue 单文件组件校验了 -
Code Spell Checker→ 拼写检查插件把中文注释或变量名当错字标红 -
vscode-html-languageservice→ VS Code 内置校验器，只查结构合法性（如标签未闭合），不查语义（如alt缺失）
只要提示里没出现 Unclosed tag、Expected 或 Unexpected token 这类明确语法错误描述，基本就是规则和场景不匹配。
为什么 th:href 或 <template></template> 总被标红
这类问题不是 HTML 规范问题，而是校验器不认识模板语法或新标准标签。硬关校验不如告诉编辑器“这是什么文件”：
立即学习“前端免费学习笔记（深入）”；
- 右下角点击语言模式（如
HTML），选Configure File Association for '.html'→ 设为thymeleaf（需装 Thymeleaf 插件）或vue - 如果只是临时写原型，加
data-th:href替代th:href，避免触发校验器的“未知属性”规则 -
<template></template>在非 Vue 项目中被警告，可改用script type="text/template"作为兼容写法
如何让校验真正起作用，而不是全关掉
关键不是禁用，而是配对生效：
- 确认右下角语言模式显示的是
HTML，不是Plain Text或Text；否则所有校验器都不加载 - 确保项目根目录有合法的
.htmlhintrc（注意：点开头、小写、无后缀），内容至少含{"rules": {"tagname-lowercase": true}} - 关闭
html.validate.scripts和html.validate.styles，屏蔽内联 JS/CSS 块的误报，但保留结构校验 - 别让 Prettier 格式化破坏校验逻辑：关掉
editor.formatOnSave，用Shift+Alt+F手动格式化
移动端或富文本编辑器里 spellcheck 波浪线乱飘怎么办
这和语法校验无关，是浏览器拼写检查在干扰——尤其在 contenteditable 或 textarea 里：
- 必须同时设
spellcheck="false"+autocorrect="off"+autocapitalize="none"，漏一个 iOS Safari 就可能闪现红线 - Monaco / CodeMirror 等编辑器里，
spellcheck="false"要设在真实接收输入的textarea上，不是外层容器；常藏在.monaco-editor-background或role="textbox"元素里 - Electron 应用还得在主进程设置
webPreferences.spellcheck = false，否则 HTML 属性会被覆盖
spellcheck 的行为完全由系统词典和输入法状态决定，它不理解编程关键字，也不响应 lang 属性——这点在代码编辑场景里最容易被忽略。
