HTML Clickback

在 VSCode 里以 webview 打开 HTML 文件预览，Cmd / Ctrl + 左键点击预览中的任意元素，立刻跳回源文件对应行并选中该标签。

填补 VSCode 生态里通用 HTML 反向点击跳源码的空位（Microsoft Live Preview 的 [issue #629](https://github.com/microsoft/vscode-livepreview/issues/629) / #758 / #391 多年未实现）。

特性

• Cmd/Ctrl + 左键 = 跳源码（macOS 用 Cmd，其它平台用 Ctrl）
• 不分屏，预览开在当前列
• 不做滚动同步、不做正向跟随（只做最关键的一件事）
• 普通点击仍是普通点击（链接跳转 / 表单交互照旧）

用法

1. 打开任意 .html 文件
2. 命令面板 → HTML Clickback: Open Preview（或编辑器右上角图标 / 文件树右键）
3. 在预览里按住 Cmd/Ctrl 点元素 → 自动跳回源码

安装

从 Releases 下载 .vsix，然后：

code --install-extension vscode-html-clickback-*.vsix

实现要点

• parse5 开启 sourceCodeLocationInfo 解析 HTML，给每个 element 注入 data-clickback-line / data-clickback-col
• webview 注入一段脚本：捕获 click + metaKey || ctrlKey → postMessage
• extension 端 showTextDocument(originalUri, { viewColumn: Active }) + revealRange + selection

License

MIT