如何在VSCode中实现点击源码时Live Server自动高亮对应网页区块？

嘿，我来告诉你怎么在VSCode里实现类似Brackets的那个超实用的标签联动高亮功能~

编辑器Brackets有个很方便的功能：在源码文件里点击HTML标签时，浏览器会像Google Chrome Developer Tools那样，自动高亮网页中对应的section或div区块。

步骤1 #

点击源码文件中的标签

步骤2 #

Live Server会自动让浏览器聚焦到目标区块

要在VSCode里复刻这个功能，有两种靠谱的方案，你可以根据自己的习惯选：

方案一：Live Server + 浏览器联动扩展 #

这是最贴近Brackets原生体验的方法：

• 第一步，在VSCode的扩展商店里搜索Live Server，安装由Ritwick Dey开发的官方版本，这个是大家常用的本地服务器插件。
• 第二步，打开你的Chrome浏览器，安装Live Server Web Extension（这个是和VSCode插件配套的浏览器端扩展，用来实现双向联动）。
• 启动Live Server：打开你的HTML文件，点击VSCode右下角的Go Live按钮，浏览器会自动加载你的网页。
• 现在回到VSCode的源码里，点击任意HTML标签，浏览器里对应的元素就会立刻高亮并自动滚动聚焦，和Brackets的效果一模一样！

方案二：使用官方Live Preview插件 #

如果你不想折腾浏览器扩展，试试微软官方的Live Preview插件：

• 安装插件后，打开HTML文件，点击右上角的“预览”按钮，VSCode侧边会弹出一个内置的浏览器预览窗口。
• 当你在源码里点击HTML标签时，内置预览窗口会自动定位到对应的元素并高亮，全程不用切换到外部浏览器，操作更省心。

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