如何像在浏览器中一样在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. 在命令面板中输入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 等。因此，您无法通过提供以下内容在 VS Code 浏览器选项卡中打开 HTML 文件本地计算机驱动器路径，例如C:\temp\mytestpage.html。它必须是一个 Web URL，例如https://localhost/mytestpage.html。

学分：约翰·亨利的回答

Answer 2

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

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

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