如何在vscode里面快速运行html代码（包含如何在vscode里面编写html代码）

梦里梦外; 2023-09-23 15:13 152阅读 0赞

## 前言必读 ##

> [读者手册（必读）\_云边的快乐猫的博客-CSDN博客][-CSDN]

**前言：**

**1.**如何在**vscode**编写**html**代码在我的另一篇文章当中有详细教程，[这是超链接。 ][Link 1]

**2.**很多小伙伴编写了html代码后，在vscode里面右键找不到如何去运行代码，或者运行代码的方式很不方便。那么就要在vscode里面下载一个插件，这个插件运行html代码会非常的方便

**二、下载插件的步骤**

没有下载vscode插件之前，右键是没有这个open in Default Browser

![4cd2979e168d4cf286504bf7bfa41822.png][]**1.** 下载第一步，先在vscode里面点击这个

![7067f5e6961940eda153a36556fc4472.png][]

**2.**在搜索栏里面输入**open in Default Browser**

然后找到这个插件点击安装

**注意：**这个下载的插件是要联网才能下载的

![99263385667e4df3936a12b90c232b89.png][] **3.**下载完成后就关闭vscode，然后再重新打开。

然后鼠标点击右键就有了这个open in Default Browser选项了。

点击这个选项就可以运行html代码了

![57c8399dbb4d458cb4aa4622c7ccbcb2.png][]

**运行结果：**

![951d533ecec44f33a096224e300d3f25.png][]

这样就完成了设置啦！！！

**三、额外知识（选择html代码在哪个浏览器页面运行）**

**注意：**这个知识额外知识点可看可不看

**1.**鼠标右键点击下面那个open in Other Browsers可以选择代码在哪个不同的浏览器里面打开

![53bfc93d75224193abb7534538e443c4.png][]

**2.**选择一个浏览器去加载html页面（我选择的是谷歌浏览器，根据自己的需要选择就好了）

![ea363b7479754f34a2bdb80d7b9ed6f1.png][]

**如果你觉得本篇文章对你有所帮助的，给个一键三连吧！！！**

**点赞关注收藏，抱拳了！**

[-CSDN]: https://blog.csdn.net/m0_52861000/article/details/128148568?spm=1001.2014.3001.5501
[Link 1]: https://blog.csdn.net/m0_52861000/article/details/127874437?spm=1001.2014.3001.5501
[4cd2979e168d4cf286504bf7bfa41822.png]: https://img-blog.csdnimg.cn/4cd2979e168d4cf286504bf7bfa41822.png
[7067f5e6961940eda153a36556fc4472.png]: https://img-blog.csdnimg.cn/7067f5e6961940eda153a36556fc4472.png
[99263385667e4df3936a12b90c232b89.png]: https://img-blog.csdnimg.cn/99263385667e4df3936a12b90c232b89.png
[57c8399dbb4d458cb4aa4622c7ccbcb2.png]: https://img-blog.csdnimg.cn/57c8399dbb4d458cb4aa4622c7ccbcb2.png
[951d533ecec44f33a096224e300d3f25.png]: https://img-blog.csdnimg.cn/951d533ecec44f33a096224e300d3f25.png
[53bfc93d75224193abb7534538e443c4.png]: https://img-blog.csdnimg.cn/53bfc93d75224193abb7534538e443c4.png
[ea363b7479754f34a2bdb80d7b9ed6f1.png]: https://img-blog.csdnimg.cn/ea363b7479754f34a2bdb80d7b9ed6f1.png