前端开发者在 VSCode 中编写 HTML 时，最关注的问题莫过于如何快速预览页面效果。实现这一目的并不复杂，但选择合适的方法可以显著提升开发效率。以下将为您提供两种切实可行的操作方案。
方法一：直接在浏览器中打开
创建 HTML 文件
首先新建一个文件：在 VSCode 编辑器中按下 Ctrl + N（适用于 Windows/Linux 系统）或 Cmd + N（适用于 Mac 系统）。接着按 Ctrl + S 保存文件，保存时请务必将文件名设置为以 .html 为后缀，例如 index.html。
编写基础 HTML 代码
将以下最基础的 HTML 结构代码粘贴到文件中：
我的第一个网页 Hello World!
这是我的第一个 HTML 页面。
在浏览器中打开
打开文件的方式有多种，您可以根据个人习惯选择最顺手的一种：
- 右键菜单：在 VSCode 的文件资源管理器中，右键点击 HTML 文件，选择“在默认浏览器中打开”或“Open with Browser”。
- 文件路径：复制该文件的完整路径，在浏览器地址栏中输入
file://并粘贴路径，按下回车键即可访问。 - 拖拽：直接将 HTML 文件拖拽到浏览器窗口内，这种方法最为直接简便。
方法二：使用 Live Server 扩展（强烈推荐）
如果只是偶尔检查页面效果，方法一完全够用。但对于正经的日常开发工作，强烈建议您使用 Live Server 扩展——它是最受欢迎的 VSCode 扩展之一。该工具能自动搭建本地服务器，当代码发生变动时，浏览器会立即自动刷新，极大提升开发体验。
安装 Live Server 扩展
- 启动 VSCode，点击左侧活动栏中的扩展图标（或直接按下
Ctrl + Shift + X）。 - 在搜索框中输入“Live Server”，查找由 Ritwick Dey 开发的那个版本。
- 点击“安装”按钮完成安装。
使用 Live Server
安装完成后，启动 Live Server 的方式同样非常灵活：
- 右键菜单：在编辑器中右键点击代码区域，选择“Open with Live Server”。
- 状态栏：查看 VSCode 底部的状态栏，找到并点击“Go Live”按钮即可启动。
- 命令面板：按下
Ctrl + Shift + P打开命令面板，输入“Live Server: Open with Live Server”并回车。
在日常开发工作中，我们强烈推荐优先使用 Live Server。它集成了实时重载、本地服务器等实用功能，能够显著提高您的前端开发效率。
