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

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


当前回答

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

其他回答

下面是一个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

下面是Mac OSx的2.0.0版本:

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "echo",
      "type": "shell",
      "command": "echo Hello"
    },
    {
      "label":"chrome",
      "type":"process",
      "command":"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
      "args": [
        "${file}"
      ]
    }
  ]
}

点击左下角的管理图标。单击扩展或快捷键Ctrl+Shift+X

然后搜索扩展与这个关键句打开默认浏览器。你会发现这个扩展。这对我更好。

现在右键单击html文件,你会看到在默认浏览器中打开或快捷键Ctrl+1在浏览器中看到html文件。

下面是如何在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…只有我,我喜欢在私人窗口看

最近在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模式。