如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?

使用notepad++,您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?


当前回答

VS Code有一个实时服务器扩展,支持一键启动状态栏。

一些特点:

一键从状态栏启动 生活重新加载 支持Chrome调试附件

其他回答

在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

下面是如何在Windows的多个浏览器中运行它

{
 "version": "0.1.0",
 "command": "cmd",
 "args": ["/C"],
 "isShellCommand": true,
 "showOutput": "always",
 "suppressTaskName": true,
 "tasks": [
     {   
         "taskName": "Chrome",
         "args": ["start chrome -incognito \"${file}\""]
     },
     {   
         "taskName": "Firefox",
         "args": ["start firefox -private-window \"${file}\""]
     },
     {   
         "taskName": "Edge",
         "args": ["${file}"]
     }   
    ]
}

注意,我没有为edge在args中输入任何东西,因为edge是我的默认浏览器,只是给了它文件名。

编辑:你也不需要-incognito或-private-window…只有我,我喜欢在私人窗口看

如果你只是在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}"],
}

这将做你想要的,如在打开一个新的标签,如果应用程序已经打开。

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中查看你的页面。

还有另一个预览HTML文件的扩展,叫做Live Preview。我喜欢它胜过这个答案中链接的“活动服务器”的几个原因。

无需启动服务器,预览图标集成到VS代码中(与标记预览相同) 预览在VS代码中以分屏视图打开(尽管在浏览器中打开的选项是可用的) 由微软开发(开发VS代码的同一家公司) 目前“实时预览”在“预览”中,只需要完善:-)