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

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


当前回答

打开自定义Chrome浏览器与URL从提示

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Open Chrome",
      "type": "process",
      "windows": {
        "command": "${config:chrome.executable}"
      },
      "args": ["--user-data-dir=${config:chrome.profileDir}", "${input:url}"],
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "url",
      "description": "Which URL?",
      "default": "http://localhost:8080",
      "type": "promptString"
    }
  ]
}

打开自定义Chrome与活动文件

{
  "label": "Open active file in Chrome",
  "type": "process",
  "command": "chrome.exe",
  "windows": {
    "command": "${config:chrome.executable}"
  },
  "args": ["--user-data-dir=${config:chrome.profileDir}", "${file}"],
  "problemMatcher": []
},

笔记

如有必要,可将windows属性替换为其他操作系统 替换${配置:chrome。可执行}与您的自定义chrome位置,例如。"C:/Program Files (x86)/谷歌/Chrome/Application/ Chrome .exe" 替换${配置:chrome。profileDir}与您的自定义chrome配置文件目录,例如。 “C:/My/Data/chrome/profile”或省略 如果你愿意,你可以像上面那样保留变量。为此,在设置中添加以下条目。Json -用户或工作区-,根据需要调整路径:

"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"

你可以重复使用这些变量,例如在启动。"runtimeExecutable": "${config:chrome.executable}"

其他回答

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

Vscode版本:1.10.2

下面是Mac OSx的2.0.0版本:

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "echo",
      "type": "shell",
      "command": "echo Hello"
    },
    {
      "label":"chrome",
      "type":"process",
      "command":"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
      "args": [
        "${file}"
      ]
    }
  ]
}

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

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

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应该打开调试器。

来源:链接