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

Question

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

我想要的最终结果：

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

Answer 1

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

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

Answer 2

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

---

实时预览

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

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

---

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

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

---

Answer 3

ty4z's HTML Preview Extension还不错：

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