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

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


当前回答

@InvisibleDev -让这个在mac上工作尝试使用这个:

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": [
        "${file}"
    ]
}

如果你已经打开了chrome浏览器,它会在一个新的选项卡中启动你的html文件。

其他回答

VS Code团队现在有一个官方扩展,叫做“Live Preview”

快速设置:

安装“实时预览”扩展从微软。 从工作空间打开html文件,当前工作空间之外的文件无法工作。 执行命令> Live Preview: Show Preview(外部浏览器)

还有一个命令用于在内部浏览器中启动它。您可能还需要从扩展设置中更改默认端口,以防它已经在您的系统上使用。

文档:https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

发布说明:https://code.visualstudio.com/updates/v1_59#_live-preview

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

{
    "version": "0.1.0",

    "command": "explorer",

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

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

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

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

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

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

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