如何使用Visual Studio代码在浏览器中查看HTML文件

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

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

当前回答

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

其他回答

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

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

一些特点:

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

我的运行脚本看起来像这样:

{
    "version": "0.1.0",

    "command": "explorer",

    "windows": {
        "command": "explorer.exe"
    },

    "args": ["{$file}"]
}

当我在index。html文件中按ctrl shift b，它就会打开我的资源管理器

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

以下在windows 10 ->的1.53.2版本中运行

在终端菜单中选择运行活动文件它在默认的边缘浏览器中执行html文件

推荐文章