如何在Visual Studio Code中打开网页预览？

Question

鉴于Visual Studio代码基于Chrome Web工具包

我们可以在编辑器中打开预览作为面板吗？

根据this page，此功能非常受欢迎！

Answer 1

现在，根据Dan Shryock的回答here和this post，我就是这样做的：

1. 安装nodejs，然后安装live-server npm install -g live-server
2. 在项目文件夹
中运行live-server

3. 用它创建一个live-view.md文件（把它放在你想要的任何地方。我把它放在我所有项目的基础文件夹中，因为我可以将它用于我目前正在处理的任何事情） ：

   <div style="border:1px solid #777;position:absolute;left:10px;top:10px;bottom:10px;right:10px;"> <iframe src="http://localhost:8080/"; width="100%" height="100%" frameborder="0" /> </div>

4. 在VS Code的第二个/拆分窗格中打开live-view.md，然后单击“打开预览”按钮（文件右上角）。

现在每当我保存时，我都会看到实时预览中显示的更改。

Answer 2

目前，我在这里解决它： 编辑文件

C:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\workbench\parts\
markdown\browser\resources\welcome-mac.md

拥有超级管理员权限，并添加

<input type="text" value="http://127.0.0.1:8080/" id="preview" onkeydown="var k = event.which; if (k==8) this.value = this.value.slice(0, -1);else if (k==13) document.getElementById('prevButton').click(); else this.value+=String.fromCharCode((96 <= k && k <= 105)? k-48 : k); "/>
<input type="button" onclick="window.location.replace(document.getElementById('preview').value);" value="Preview" id="prevButton" />

然后只需在菜单中打开Welcom页面就可以了

最后为你的HTML主体添加白色背景