如何使用新的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

其他回答

Ctrl + F1将打开默认浏览器。或者你可以按Ctrl + shift + P打开命令窗口,选择“在浏览器中查看”。html代码必须保存在一个文件中(未保存在编辑器上的代码-没有扩展名,不起作用)

CTRL+SHIFT+P将调出命令面板。 当然,这取决于你在运行什么。例如,在ASP.net应用程序中,你可以输入: >kestrel,然后打开web浏览器,输入localhost:(你的端口在这里)。

如果你输入>,它会显示show和run命令

或者在您使用HTML的情况下,我认为打开命令面板后的F5应该打开调试器。

来源:链接

VSCode任务-通过应用程序包标识符打开(仅限macOS)。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Open In: Firefox DE",
      "type": "process",
      "command": "open",
      "args": ["-b", "org.mozilla.firefoxdeveloperedition", "${file}"],
      "group": "build",
      "problemMatcher": [],
      "presentation": {
        "panel": "shared",
        "focus": false,
        "clear": true,
        "reveal": "never",
      }
    }
  ]
}

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

一些特点:

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

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