在 VSCode 的侧选项卡上查看 HTML 预览

Posted 2023-02-22

【中文标题】在 VSCode 的侧选项卡上查看 HTML 预览

【英文标题】：See HTML preview on side tab in VSCode

【发布时间】：2021-09-01 09:14:14

【问题描述】：

如何在 VSCode 编辑器的侧选项卡上查看 html 代码实时预览？

我想要的最终结果：

CSS、js、PHP 等也应该可以在预览版中使用。

【问题讨论】：

您可以下载并安装 Live Server 扩展程序吗？

【参考方案1】：

浏览器预览有大量不同的 vscode 扩展。 我使用的是Browser Preview。

要查看.php 文件，您需要一台服务器，例如Apache。 XAMPP 是一个提供 mysql、Apache 和其他一些工具的一体化解决方案：https://www.apachefriends.org/index.html

【参考方案2】：

Vscode 团队开发了一个Live Server 扩展，与 vscode 进行了大量的协调。见v1.58 pre-release notes：

---

实时预览

我们开发了一个 Live Preview 扩展，它托管一个本地服务器用于 Web 开发预览！ ?

它具有编辑器内浏览器预览、实时预览刷新（文件更改或保存时）、多根支持等等！

---

该扩展程序还有一个Live Preview 任务，它运行一个持久服务器并允许您查看服务器流量及其相关文件。

要详细了解它的功能，请view it in the marketplace 或check out its repo。

---

【参考方案3】：

ty4z's HTML Preview Extension还不错：

JS 和 CSS 在它的预览窗口中肯定可以工作，但我还没有测试过 PHP。我的猜测是它也可能有效，因为其他两个也可以。