VS Code Extensions
HTML Clickback

HTML Clickback

by chardzy

Open an HTML file in a preview webview and Cmd/Ctrl+Click any element to jump back to its source line.

Downloads

62

Rating

5.0 / 5 (1)

Version

0.0.6

Last updated

May 25, 2026

HTML Clickback logo

在 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

Related extensions