怎么样vscode也可以预览html文件:安装扩展view-in-browser

时间:2024-05-19 16:20:33

我们在使用webstorm作为开发工具的时候,如果想要预览一个静态的html网页, 非常方便,只要我们将鼠标移动到IDE编辑区右上角的时候,预览的按钮就浮现了出来,而且还可以选择电脑上已经安装的浏览器进行预览,不光是只能选择一个默认的浏览器。

有的时候觉着webstorm太占用系统资源了,就转用vscode了,vscode的优势就不说了,就是快。但有一点不爽的是不能直接右键预览html文件。

这个时候vscode的另一个优势就又体现了出来,插件。vscode本身没有给我们提供某些功能,但是它的强大的插件库给我们提供了实现,可以让我们根据需要来选择性安装插件,也不会造成系统的资源浪费,这也是我越来越喜欢vscode的一个原因。

安装方法

 点击vscode左侧的工具栏的第五个按钮‘扩展’,然后就可以搜索想要安装的插件view-in-browser(至于不知道需要安装的插件是什么,这个就提前百度下吧),剩下的就是安装就完了,安装完成后重启下即可使用。

怎么样vscode也可以预览html文件:安装扩展view-in-browser

插件安装完成后,可以在文件列表中右键点击文件名称,在快捷菜单中选择"View In Browser"选择使用默认浏览器预览文件或者"View In Other Browsers"使用其他浏览器预览文件。

怎么样vscode也可以预览html文件:安装扩展view-in-browser

也可以在正在编辑中的html文件右击选择同样的选项来预览文件:

怎么样vscode也可以预览html文件:安装扩展view-in-browser

我们选的这个扩展叫“view-in-browser”,还有另外一个名字类似的扩展"view in browser",两个扩展的名字基本相同,功能也大概类似,只是view in browser只能使用默认浏览器预览文件(这一点是扩展介绍说明的,没有测试),而view-in-browser不仅可以使用默认浏览器,也可以使用电脑上已经安装的其他浏览器。