VSCode运行HTML文件的正确方法

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《VSCode运行HTML文件方法教程》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

1、使用Live Server扩展可实现自动刷新，安装后右键选择Open with Live Server即可在浏览器中实时预览；2、通过Reveal in Explorer手动双击HTML文件可在默认浏览器中查看，但无自动刷新功能；3、VS Code内置Preview HTML命令，通过命令面板启动可在编辑器内预览渲染效果；4、利用Python简易服务器，在集成终端执行python -m http.server 8000后访问http://localhost:8000可查看文件。

如果您在 Visual Studio Code 中编辑了一个 HTML 文件，但无法直接在浏览器中查看效果，则可能是由于缺少运行环境或未正确配置预览方式。以下是运行 HTML 文件的多种方法：

一、使用 Live Server 扩展

Live Server 是 VS Code 中最常用的实时预览工具，它会启动一个本地开发服务器，并在保存文件时自动刷新浏览器页面。

1、点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X），在搜索框中输入 Live Server。

2、在搜索结果中找到由 Ritwick Dey 发布的 Live Server 扩展，点击“安装”按钮。

3、安装完成后，右键点击编辑器中已打开的 HTML 文件，在弹出菜单中选择 Open with Live Server。

4、VS Code 将自动在默认浏览器中打开该 HTML 文件，并监听文件变化。

二、通过右键菜单使用“Reveal in Explorer”后手动打开

此方法不依赖任何扩展，适用于临时快速查看，但不支持自动刷新。

1、在 VS Code 编辑器中右键点击 HTML 文件标签页，选择 Reveal in Explorer。

2、在系统文件资源管理器中定位到该 HTML 文件，双击其图标。

3、系统将使用默认浏览器打开该文件，地址栏显示为 file:// 开头的本地路径。

三、使用 VS Code 内置的“Preview HTML”命令

VS Code 1.80 版本起内置了轻量级 HTML 预览功能，无需安装扩展即可查看渲染效果（仅限预览，不提供服务器功能）。

1、确保当前打开的文件是 HTML 类型（文件右下角状态栏显示 HTML）。

2、按下快捷键 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）打开命令面板。

3、输入 Preview HTML，从下拉列表中选择该命令。

4、VS Code 将在右侧新标签页中以只读方式渲染 HTML 内容。

四、通过终端运行 Python 简易 HTTP 服务器

利用系统已安装的 Python（需 Python 3.6+），可在当前目录启动一个临时 HTTP 服务，使 HTML 文件以 http:// 协议访问。

1、在 VS Code 中打开包含 HTML 文件的文件夹（即设置为工作区根目录）。

2、按下 Ctrl+` 打开集成终端。

3、输入命令：python -m http.server 8000（Windows/macOS/Linux 均适用）。

4、打开浏览器，访问 http://localhost:8000，找到并点击目标 HTML 文件名。

理论要掌握，实操不能落！以上关于《VSCode运行HTML文件的正确方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！