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

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

前言:


1.如何在vscode编写html代码在我的另一篇文章当中有详细教程. 


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


二、下载插件的步骤


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



1. 下载第一步,先在vscode里面点击这个



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


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


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



3.下载完成后就关闭vscode,然后再重新打开。


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


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



运行结果:



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


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


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


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



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


目录
相关文章
|
30天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
编写代码中常见问题汇总(html和css)
27 0
|
1月前
|
前端开发 JavaScript CDN
HTML代码约定
HTML代码约定
26 0
|
12天前
|
JavaScript 前端开发 C++
vscode编辑器中如何调试nextjs代码
代码可调式的重要性不言而喻。 对于Programer来说,自己编写的程序能够被优雅调试是一件幸福的事情,特别是习惯了后端程序调试的开发者... 在折腾Nextjs项目的日子里,我走了很多弯路才弄明白在vs code中如何优雅的调试代码。
vscode编辑器中如何调试nextjs代码
|
11天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
32 5
|
17天前
|
前端开发 JavaScript
HTML情人节爱心代码
HTML情人节爱心代码
22 2
|
18天前
|
Python
解决VSCode中Debug和运行路径不一致的
在VSCode调试时,如果程序运行路径不正确,可通过配置`launch.json`文件的`CWD`参数来解决。在`launch.json`中添加或修改`configurations`,例如设置`"cwd": "${fileDirname}"`,确保调试和运行时路径一致。这样可以避免因路径问题影响调试。记得`"name"`、`"type"`、`"request"`等其他关键参数也要正确配置。我是木头左,希望对你有所帮助!
解决VSCode中Debug和运行路径不一致的
|
3天前
HTML中如何插入空格,HTML空格代码,多种HTML空格写法
HTML中如何插入空格,HTML空格代码,多种HTML空格写法
6 0
|
4天前
|
NoSQL C语言 C++
C语言开发环境搭建,使用vscode运行hello,world
C语言开发环境搭建,使用vscode运行hello,world
14 0
|
4天前
|
JavaScript
VScode格式化vue文件--避免html属性换行
VScode格式化vue文件--避免html属性换行
15 0