vs code怎么运行html代码_vs code运行html代码步骤【指南】

安装Live Server扩展后，保存HTML文件，通过右键菜单或命令面板选择“Open with Live Server”，即可在浏览器中实时预览页面，修改代码后自动刷新；也可直接双击HTML文件用浏览器打开，但无自动刷新功能。

如果您编写了HTML代码并希望在VS Code中查看其运行效果，可以通过多种方式快速预览页面。以下是实现此操作的具体步骤：

一、安装Live Server扩展

使用Live Server扩展可以启动一个本地开发服务器，并实现实时预览功能，修改代码后浏览器会自动刷新。

1、打开VS Code编辑器，点击左侧活动栏的扩展图标（四个方块组成的图标）。

2、在搜索框中输入 Live Server 进行搜索。

立即学习“前端免费学习笔记（深入）”；

3、找到由 Ritwick Dey 开发的 "Live Server" 扩展，点击“安装”按钮。

4、安装完成后无需手动启用，扩展会自动集成到右键菜单和命令面板中。

二、创建并保存HTML文件

确保您的HTML文件已正确保存，这是运行预览的前提条件，因为未保存的文件可能无法被服务器正确读取。

1、在VS Code中新建一个文件，输入基本的HTML结构代码。

2、将文件命名为 index.html 或其他以 .html 为后缀的名称。

3、使用快捷键 Ctrl + S（Mac用户为 Cmd + S）保存文件到本地目录。

三、通过右键菜单启动Live Server

利用Live Server提供的上下文菜单选项，可快速在默认浏览器中打开当前HTML文件。

标签： html 浏览器 mac html文件 资源管理器 vs code