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

Question

鉴于Visual Studio Code基于Chrome Web工具包

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

根据此页面,这个功能是高度要求!

Answer 1

那么现在,根据Dan Shryock 在这里和这篇文章的回答,我就是这样做的:

1. 然后安装nodejs live-servernpm 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" />

然后只需在菜单中打开欢迎页面，您就会看到这个

最后为你的 html 正文添加一个白色背景