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

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


当前回答

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

其他回答

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

{
    "version": "0.1.0",

    "command": "explorer",

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

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

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

对于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
            }
        }
    ]
}

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

还有另一个预览HTML文件的扩展,叫做Live Preview。我喜欢它胜过这个答案中链接的“活动服务器”的几个原因。

无需启动服务器,预览图标集成到VS代码中(与标记预览相同) 预览在VS代码中以分屏视图打开(尽管在浏览器中打开的选项是可用的) 由微软开发(开发VS代码的同一家公司) 目前“实时预览”在“预览”中,只需要完善:-)

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

一些特点:

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