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

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


当前回答

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

{
    "version": "0.1.0",

    "command": "explorer",

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

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

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

其他回答

Live Preview扩展刚刚添加了(在Insiders Build now和稳定2023年2月初)改变打开默认浏览器的能力(当你选择在外部浏览器中打开它,而不是在vscode中的另一个选项卡中打开它)。参见添加选项以选择默认外部浏览器。

背景是

Live Preview: Custom External Browser
livePreview.customExternalBrowser

选项:Edge、Chrome、Firefox、无

没有一个浏览器会使用您在操作系统中设置的默认浏览器。新的设置允许您覆盖默认设置与另一个浏览器的目的Live预览扩展打开外部浏览器,通过命令:

Live Preview: Show Preview (External Browser)

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",
      }
    }
  ]
}

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

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

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

来源:链接

可能大多数人都能从上面的答案中找到一个解决方案,但看到没有一个对我有效(vscode v1.34),我想我将分享我的经验。如果至少有一个人觉得它有帮助,那么很酷,不是一个浪费的帖子,amiirte?


无论如何,我的解决方案(窗口)是建立在@noontz的顶部。他的配置可能已经足够旧版本的vscode,但不是1.34(至少,我不能让它工作..)。

我们的配置几乎是相同的,除了一个属性,即group属性。我不知道为什么,但是如果没有这个,我的任务甚至不会出现在命令面板中。

所以。一个工作任务。Json,用于运行vscode 1.34的Windows用户:

{
    "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}"
            ],
            "group": "build",
            "problemMatcher": []
        }
    ]
}

请注意,这个工作并不需要problemMatcher属性,但是如果没有它,就需要额外的手动步骤。我试过看这房子的文件,但我太笨了,看不懂。希望有人能过来教我,不过先谢谢你了。我所知道的是——包括这个属性和ctrl+shift+b打开当前的HTML文件在一个新的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中查看你的页面。