如何在Visual Studio Code中实现类似Brackets的编辑内容实时预览高亮功能？

VS Code原生默认没有内置和Brackets完全一致的「点击代码片段，实时预览中高亮对应内容」的功能，但可以通过官方或第三方扩展实现类似效果：

• 微软官方Live Preview扩展
  这是最推荐的方案，它不仅提供实时预览，还支持开启代码与预览的同步高亮：

  1. 安装Live Preview扩展后，打开目标HTML文件，点击编辑器右上角的「Preview in Browser」按钮启动预览服务。
  2. 打开VS Code设置，搜索livePreview.highlightCorrespondingElement并勾选启用。
  3. 此时在编辑器中点击或选中HTML标签、代码片段，预览页面中的对应元素会自动高亮显示，和你在Brackets中体验的功能一致。

• Browser Preview扩展
  这个扩展将Chrome浏览器集成到VS Code窗口内，支持双向同步：既可以在预览中点击元素跳转到编辑器代码，也能在编辑器选中代码时，预览中的对应元素实时高亮，适合需要更完整浏览器环境的场景。

需要注意的是，这类同步高亮目前主要针对HTML元素的支持比较完善，CSS代码的同步高亮部分扩展也有支持，可以根据需求进一步测试适配。

内容的提问来源于stack exchange，提问作者NotBricky