如何在VS Code中像在浏览器中一样打开HTML文件？

Question

在 vscode 或任何扩展更新完成后，vscode 会显示一个发布说明。我可以在我的计算机上找到发布说明，它是一个 HTML 文件，我通过 vscode 打开它，但是 vscode 显示的是 HTML 代码，不像在浏览器中打开。

一般来说，我想在 vscode 中查看 HTML，而不是在浏览器中打开。我在互联网上搜索过，所有的方法都是通过 vscode 在浏览器中打开并查看 HTML 文件。

我知道 vscode 可以实现这个功能，但我不知道怎么做，哈哈。

谢谢。

- Ehehe

---

什么阻止你在VScode和浏览器之间分割屏幕，或者在两个完整的屏幕之间切换？这完全是一个错误的要求，因为你创建的HTML需要在你所针对的任何浏览器或平台上运行，而不是在VScode内正确显示。如果你想把VScode当成浏览器使用，那么你做错了。 - herrbischoff

请在Medium上按照此在Mac上使用VS Code的Live Server运行本地HTML教程进行操作。 - InfiniteStack

Answer 1

Visual Studio(VS) Code内置了查看HTML页面的功能。您可以按照以下步骤在VS Code中打开类似浏览器的窗口： 1. 打开命令面板（Ctrl + Shift + P） 2. 在命令面板中输入Simple，然后从建议列表中选择Simple Browser: Show（参见屏幕截图）： 3. 在URL框中输入URL： 4. 按下Enter。

此外，如果您需要在真正的浏览器中打开当前页面，例如Chrome、Edge等，有一个快捷方式。您将在浏览器右上角看到一个箭头按钮（参见截图）。单击它，它将在您PC的默认浏览器中打开当前HTML页面。

注意：VS Code内置浏览器与Chrome或Edge等真实浏览器的行为有所不同。除非将HTML文件托管在Web服务器（如VS Code中的Live Server扩展程序、NPM服务器、Apache、IIS等）中，否则无法直接从磁盘加载任何HTML文件。因此，您不能通过提供本地计算机驱动器路径（例如C:\temp\mytestpage.html）在VS Code浏览器选项卡中打开HTML文件。它必须是一个Web URL，例如https://localhost/mytestpage.html。

鸣谢：John Henry的回答

- RBT

Answer 2

VS Code没有内置支持预览HTML页面的功能。这可以通过扩展提供。

如果您有兴趣自己实现这个功能，请查看webview api

然而，正如@herrbischoff所指出的那样，您应该考虑改变您的工作流程或期望。一个合适的浏览器将会提供更好的开发体验，而像browser sync这样的扩展可以将VS Code连接到您选择的浏览器上。

- Matt Bierner