如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?
使用notepad++,您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?
如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?
使用notepad++,您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?
当前回答
CTRL+SHIFT+P将调出命令面板。 当然,这取决于你在运行什么。例如,在ASP.net应用程序中,你可以输入: >kestrel,然后打开web浏览器,输入localhost:(你的端口在这里)。
如果你输入>,它会显示show和run命令
或者在您使用HTML的情况下,我认为打开命令面板后的F5应该打开调试器。
来源:链接
其他回答
最近在www.lynda.com的一个visual studio代码教程中发现了这个功能
按Ctrl + K + M,它将打开“选择语言模式”(或点击右下角的HTML前面的笑脸),输入markdown并按enter
现在按Ctrl + K后面跟着V,它将打开你的html在附近的标签。
Tadaaa ! !
现在emmet命令在我的html文件中不能在这种模式下工作,所以我回到了原始状态(注- html标签tellisense工作完美)
—按“Ctrl + K + M”,选择“auto-detect”。埃米特的命令开始生效。如果你只喜欢html查看器,那么没有必要让你回到原来的状态。
不知道为什么vscode没有html查看器选项默认情况下,当它能够显示html文件在markdown模式。
我的运行脚本看起来像这样:
{
"version": "0.1.0",
"command": "explorer",
"windows": {
"command": "explorer.exe"
},
"args": ["{$file}"]
}
当我在index。html文件中按ctrl shift b,它就会打开我的资源管理器
在linux下,可以使用xdg-open命令在默认浏览器下打开文件:
{
"version": "0.1.0",
"linux": {
"command": "xdg-open"
},
"isShellCommand": true,
"showOutput": "never",
"args": ["${file}"]
}
Live Preview扩展刚刚添加了(在Insiders Build now和稳定2023年2月初)改变打开默认浏览器的能力(当你选择在外部浏览器中打开它,而不是在vscode中的另一个选项卡中打开它)。参见添加选项以选择默认外部浏览器。
背景是
Live Preview: Custom External Browser
livePreview.customExternalBrowser
选项:Edge、Chrome、Firefox、无
没有一个浏览器会使用您在操作系统中设置的默认浏览器。新的设置允许您覆盖默认设置与另一个浏览器的目的Live预览扩展打开外部浏览器,通过命令:
Live Preview: Show Preview (External Browser)
Mac -在Chrome中打开-在VS Code v 1.9.0上测试
使用Command + shift + p打开命令面板。
输入配置任务运行器,第一次这样做时,VS Code会给你下拉菜单,如果它选择了“其他”。如果你以前这样做过,VS Code会直接把你发送到tasks.json。 一旦进入任务。json文件。删除显示的脚本,替换如下:
{ “版本”:“0.1.0”, “命令”:“铬”, " osx ": { "command": "/Applications/谷歌Chrome. "应用程序/内容/ MacOS /谷歌Chrome” }, “参数”(" $ {file} ") }
切换回你的html文件,按Command + Shift + b在Chrome中查看你的页面。