partial diff插件可直接比对两个html标签块：先安装插件，再在同一文件中按ctrl/cmd分别选中两个不重叠标签块，右键执行compare selected texts；跨文件或比剪贴板内容同理，支持内存级比对、忽略空格及编码容错。
怎么用 Partial Diff 插件比对两个 HTML 标签块
VSCode 原生不支持直接选中两个 HTML 标签（比如 <div>...</div> 和 <section>...</section>）做对比，必须靠插件。Partial Diff 是目前最轻量、最可靠的选择——它不改文件、不建临时文件，纯内存比对。
操作要点：
- 先装插件：扩展市场搜
Partial Diff（作者ryu1kn），安装后无需重启 - 在同一个 HTML 文件里，用鼠标选中第一个标签块（含开始和结束标签），别松手
- 按住
Ctrl（Windows/Linux）或Cmd（macOS），滚动到另一个标签块，再选中它（两个选区不能重叠） - 右键任意一个选区 → 选
Partial Diff: Compare Selected Texts
注意：插件会严格按你「第一次选中」的内容放左侧、「第二次选中」的放右侧；如果顺序反了，重选即可。
跨文件比对 HTML 片段时为什么总乱码或空行错位
常见现象是两段结构一致的 <template></template> 或 <slot></slot> 内容，Diff 视图里却整块标红——大概率不是逻辑差异，而是编码或换行符不一致。
排查步骤：
- 分别打开两个文件，看右下角状态栏：确认都是
UTF-8（不是UTF-8 with BOM），且换行符统一为LF或CRLF - 点开状态栏的编码/换行设置，手动切换并保存，再重新触发 Partial Diff
- 如果用了 Prettier 或 ESLint 自动格式化，关掉它们再比——否则缩进空格、属性换行、引号风格都会被当成差异
- Partial Diff 默认开启
Ignore Whitespace，如需检查是否误删了空格或制表符，右键 Diff 视图 →Toggle Ignore Whitespace
比对剪贴板里的 HTML 片段要几步
从浏览器 DevTools 复制了一段 <button class="btn">Click</button>，想和当前文件里某个按钮对比？不用粘贴建临时文件。
正确做法：
- 复制目标 HTML 片段到系统剪贴板
- 在 VSCode 中，选中你当前文件里要对比的那个
<button></button>标签块 - 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入Partial Diff: Compare with Clipboard并执行
此时左侧是你选中的本地代码，右侧是剪贴板内容，所有差异实时高亮。注意：剪贴板内容不会被写入任何文件，关掉标签页就清空。
为什么用原生 File: Compare Active File With 不适合比 HTML 标签
因为这个命令只能对比「整个文件」，无法限定到某一对标签内部。哪怕你只改了一个 class 名，Diff 视图也会把整个 HTML 文件拉出来，淹没在大量无关的 、<script></script> 差异里。
更麻烦的是：
- 未保存的修改不参与对比（VSCode 会强制你先保存）
- 无法处理跨文件的片段级比对（比如对比 A.vue 里的
<template></template>和 B.html 里的<div>） <li>不支持忽略注释、自动展开折叠区域等前端常用场景</li> <p>所以，只要目标是「两个 HTML 标签块」，就别碰原生文件级 Diff——Partial Diff 的选区比对才是唯一靠谱路径。</p> </div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
