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

Question

在 vscode 或任何扩展更新完成后，版本说明将显示在 vscode 中。 我可以在我的电脑里找到releasenote，它是HTML文件，我用vscode打开它，vscode显示的是HTML代码，不喜欢用浏览器打开。

一般来说，我想在浏览器以外的vscode中查看html。 我在互联网上搜索过，都是通过 vscode 打开浏览器并查看 html 文件。

我知道vscode可以做到，但我不知道该怎么做，啊哈。

谢谢。

Answer 1

Visual Studio(VS) Code 内置支持在编辑器中查看 HTML 页面。 您可以按照以下步骤在 VS Code 中打开类似窗口的浏览器：

1. 打开命令调色板（ Ctrl + Shift + P ）
2. 在命令palette 中输入Simple ，然后从下拉列表中选择Simple Browser: Show 。
3. 输入 HTML 页面的 URL/网址。
4. 按回车

如果您想在 Chrome 或 Edge 等真正的浏览器中打开页面，则可以使用快捷方式。 请参阅右上角以黄色突出显示的箭头按钮（请参阅屏幕截图）。 单击后，它将在您 PC 的默认浏览器中打开 HTML 页面。

注意：VS Code 的内置浏览器与 Chrome 或 Edge 等真实浏览器的行为存在差异。 您不能直接从磁盘加载任何 HTML 文件，除非您将其托管在 Web 服务器中，例如VS Code、NPM 服务器、IIS 等中的 Live Server 扩展。因此，您无法通过提供路径在 VS Code 浏览器选项卡中打开 HTML 文件像C:\temp\mypage.html 。 它必须是一个 Web URL，例如http://localhost/mypage.html 。

学分：约翰亨利的回答

Answer 2

VS Code 不包含对预览 html 页面的内置支持。 这可以通过扩展来提供。

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

但是，正如@herrbischoff 所指出的，您应该考虑改变您的工作流程或期望。 合适的浏览器将提供更好的开发体验， 浏览器同步等扩展可以将 VS Code 连接到您选择的浏览器