在VScodes上开发html,并通过浏览器预览

1.首先想要在VScode上通过浏览器预览html文件,是需要安装插件的。

2.两个插件可选:view-in-browser、view in browser

两个扩展的名字基本相同,功能也大概类似。只是view in browser只能使用默认浏览器预览文件,而view-in-browser不仅可以使用默认浏览器,也可以使用电脑上已经安装的其他浏览器。(这点在扩展介绍上有讲到)。

ps:我这里两个插件都安装了,其实装一个view-in-browser也可以了。

3.安装:点击vscode左侧的工具栏的第五个按钮‘扩展’,然后就可以搜索想要安装的插件,点击install即可,我这里是已安装了,所以不会再显示安装。

在VScodes上开发html,并通过浏览器预览

4.安装好之后,去写一个html测试一下。新建文件,保存为.html格式,在内容框中输入!,然后Tab键补全,会自动生成html模板。(在body里随便填点内容)

在VScodes上开发html,并通过浏览器预览

5.鼠标右击,可以看到如图两个选项,一个是使用默认浏览器预览,一个是选择其他浏览器预览。

在VScodes上开发html,并通过浏览器预览

6.我的默认预览是IE,如图:

在VScodes上开发html,并通过浏览器预览

 

7.这个默认也是可进行更改的。File >> Preferences >> Settings,进入之后,拉到最底下,找到如图所示的地方,这里可以更改默认预览的浏览器,我这里更改为谷歌:

在VScodes上开发html,并通过浏览器预览