如何在 GitHub Codespaces 上预览 HTML 文件？

Question

假设我index.html在 GitHub Codespaces 中有这个文件：

<h1>Hello world</h1>
Test text

如何在 GitHub Codespaces 中预览 HTML 文件？最好在 VS 代码选项卡上。

编辑：事实证明这是 Brave 浏览器中的一个错误。maddes8cht 的建议在 Chrome 中运行良好。

Answer 1

只是为了完成@maddes8cht 的回答，以便您更好地理解。

Github Codespaces（又名 github.dev）为您的存储库创建一个虚拟空间，以便您可以编辑和提交文件。它实际上只是 VSCode 的远程实例，但默认情况下它不会在端点 URL 上提供文件。

好消息是，因为它是一个虚拟空间（位于 GitHub 服务器上的某个位置），所以您可以像在本地计算机上一样运行任何命令。
这意味着您可以在那里运行服务器，并且它足够聪明，知道您刚刚运行了服务器并为您执行“端口转发”（这再次意味着您可以像在本地主机开发场景中一样远程访问该服务器.)

这是一个简单的解决方案：

• 如果尚未打开，则打开终端（ctrl++打开命令面板，然后键入“切换终端”并进行选择）shiftpEnter
• 输入npm i -g http-server新打开的终端（这将安装该工具以轻松创建服务器）¹
• 接下来，您必须运行服务器，http-server在同一终端中键入。
• 然后系统会提示您此通知 您可以单击Open in Browser并在那里查看结果，如果您的index.html文件位于项目的根目录下，它将默认打开，否则您需要在 URL 栏中写入正确的路径。

现在，如果您想在 VSCode 选项卡中打开

• 打开命令面板
• 搜索Simple Browser: Show
• 它会询问您要打开哪个 URL，只需粘贴在前面步骤中在选项卡中打开的 URL 即可。

如果你想要热重载

也许您希望页面在更新文件时自动刷新。在上面的示例中，我们安装的http-server只是一个提供静态文件的普通服务器。
如果您需要热重载，您可以安装支持它的服务器，这里有一些：vite, @web/dev-server, browser-sync, ...

希望能帮助到你。

¹请注意，还有许多其他工具可用于创建开发服务器，这个工具仅提供静态文件，如果您只想预览文件就足够了。

Answer 2

简单预览

您的意思是 html 文件的简单预览吗？

进入您的代码空间并在扩展侧边栏中安装任何 html 预览扩展，例如 Haixin Chen 的预览扩展。

这样，您可以右键单击文件资源管理器中的 html 并选择打开预览。

这应该是开箱即用的，对我来说确实如此。

通过 WebApp / Codespaces Web 服务器进行预览

您还可以尝试使用 Microsoft Live Preview 扩展。由于这旨在提供在代码空间中运行的 WebApplication 提供的预览，因此需要做更多的工作，但如果完成了，它还可以预览简单的 html 文件。

首先，安装扩展。

对我来说，有时它只有在重新启动代码空间后才有效（它不允许我第一次被激活 - 不知道为什么）

正如您在屏幕截图中看到的，它在编辑器窗口顶部为您提供了一个漂亮的预览图标。按下它很可能会给您一个空的/损坏的预览，如左侧所示。

这是因为您必须告诉它如何访问代码空间网络服务器。您可以在 PORTS 控制台的“终端”部分找到必要的设置。根据内部结构，您会发现多个预先配置的端口，但只有其中一个可以为您提供 html 的预览。右键单击每一行并尝试preview in editor window。当工作空间的根目录中有一个index.html 时，它将显示出来，否则它将显示一个允许您导航工作空间的目录索引。现在，当您再次在编辑器窗口中按下 html 文件的预览按钮时，它将在新的预览窗口中显示该页面。