vs code原生支持文件对比但易误判，主因是编码（如utf-8 with bom vs utf-8）和换行符（crlf vs lf）不统一；html语义差异（属性顺序、注释、缩进）也会导致全行标红。
VS Code 里不用“安装”代码对比工具，它原生就有，但默认行为容易误判差异——关键在编码和换行符是否统一。
VS Code Compare Files 对 HTML 失效的常见原因
你右键两个 HTML 文件 → “Compare Files”，结果满屏标红，哪怕内容一模一样。这不是 bug，是 VS Code 在比字节，不是比语义。
- 一个文件是
UTF-8 with BOM，另一个是纯UTF-8：开头三个隐藏字节（EF BB BF）被当成新增内容 - 一个用
CRLF（Windows 换行），一个用LF（macOS/Linux）：每行末尾多出一个\r，整行被标为“变更” - HTML 中混有注释、空格缩进或属性顺序不同：
<div id="a" class="b"> 和 <code><div class="b" id="a"> 被当两行全异，而非仅属性顺序变 <h3>git diff --no-index 是离线 HTML 对比最稳的方式</h3> <p>不依赖仓库，不挑路径，纯文本比对，适合运营页、邮件模板、导出的静态页等临时文件。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>命令必须写全路径：<code>git diff --no-index ./v1.html ./v2.html，不能只写v1.html v2.html（当前目录切换后会失败） - 输出是标准 unified diff 格式：
-行删，+行增，但不解析 HTML 结构——class="old"→class="new"只会标整行，不会高亮两个值的差异 - 若要结构级比对（比如标签嵌套、自闭合写法），先用
html-beautify或 VS Code 的格式化（Shift+Alt+F）统一风格再比，否则空格/换行干扰远大于语义差异
在线 diff 工具粘贴 HTML 时 script/style 被过滤怎么办
DiffNow、Text Compare 等工具默认按 HTML 渲染，会剥离或转义 <script></script> 和 <style></style> 内容，导致比对失真。
- 最保险做法：把
<script></script>和<style></style>块单独复制出来，在 VS Code 里用 Compare Files 单独比逻辑 - 若必须在线比，用浏览器控制台运行
encodeURIComponent(document.querySelector('body').outerHTML)编码整个 HTML，粘贴到工具；比完再用decodeURIComponent()还原 - 优先选支持
Plain Text模式的工具，比如diffchecker.com切换到该模式，能绕过 HTML 解析层，保结构、保转义字符
Monaco Editor 的 DiffEditor 不是拿来就用的“插件”
它是个前端库组件，需手写 JS 初始化，适合嵌入自己系统做定制化对比视图（如 CMS 后台的富文本版本对比），不适合日常手动比文件。
- 核心三步固定：创建两个
monaco.editor.createModel()，调monaco.editor.createDiffEditor()，再setModel() - 语言模式设成
html也没用——Monaco 的 diff 不理解 HTML 语义，它只是按行/字符比，和diffChars()底层逻辑一致 - 若要高亮到属性级（如只标
"a"→"b"），得先用jsdiff的diffCharsToHtml()生成带<ins>/<del></del></ins>的 HTML，再注入 DOM；Monaco 本身不提供这个能力
真正容易被忽略的是：HTML 对比从来不是“比字符串”，而是“比意图”。BOM、换行、空格缩进这些技术细节，只要不统一，就会掩盖真实的内容变更。别急着换工具，先确认两个文件的编码和换行符是否完全一致——这是所有后续比对可信的前提。
