如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?
使用notepad++,您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?
如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?
使用notepad++,您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?
当前回答
下面是一个2.0.0版本的当前文档在Chrome带键盘快捷方式:
tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "Chrome",
"type": "process",
"command": "chrome.exe",
"windows": {
"command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
},
"args": [
"${file}"
],
"problemMatcher": []
}
]
}
快捷键。json:
{
"key": "ctrl+g",
"command": "workbench.action.tasks.runTask",
"args": "Chrome"
}
在web服务器上运行:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
其他回答
下面是一个2.0.0版本的当前文档在Chrome带键盘快捷方式:
tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "Chrome",
"type": "process",
"command": "chrome.exe",
"windows": {
"command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
},
"args": [
"${file}"
],
"problemMatcher": []
}
]
}
快捷键。json:
{
"key": "ctrl+g",
"command": "workbench.action.tasks.runTask",
"args": "Chrome"
}
在web服务器上运行:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
在Opera浏览器中打开文件(Windows 64位)。只要加上这几行:
{
"version": "0.1.0",
"command": "opera",
"windows": {
"command": "///Program Files (x86)/Opera/launcher.exe"
},
"args": ["${file}"] }
注意command:行的路径格式。不要使用“C:\path_to_exe\runme.exe”格式。
要运行此任务,请打开要查看的html文件,按F1,键入task opera并按enter
在linux下,可以使用xdg-open命令在默认浏览器下打开文件:
{
"version": "0.1.0",
"linux": {
"command": "xdg-open"
},
"isShellCommand": true,
"showOutput": "never",
"args": ["${file}"]
}
如果你只是在Mac上,这个任务。json文件:
{
"version": "0.1.0",
"command": "open",
"args": ["${file}"],
}
...在Safari中打开当前文件(假设扩展名为“.html”)所需要的全部内容。
创建任务。Json,并使用⌘+shift+b调用它。
如果你想在Chrome中打开它,那么:
{
"version": "0.1.0",
"command": "open",
"args": ["-a", "Chrome.app", "${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)