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

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


当前回答

您现在可以在浏览器中安装一个扩展视图。我在chrome的windows上测试了它,它是工作的。

Vscode版本:1.10.2

其他回答

对于Mac,设置你的任务。将. json(在.vscode文件夹中)文件内容拷贝到以下文件中,并使用SHFT+COMMAND+B打开。

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Chrome Preview",
            "type": "shell",
            "command": "open -a /Applications/Google\\ Chrome.app test.html",
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

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模式。

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

在linux下,可以使用xdg-open命令在默认浏览器下打开文件:

{
    "version": "0.1.0",
    "linux": {
        "command": "xdg-open"
    },
    "isShellCommand": true,
    "showOutput": "never",
    "args": ["${file}"]
}