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

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


当前回答

启动本地web服务器!

(假设在项目文件夹中有index.html文件)。

在同一终端窗口(Windows中的命令提示符)运行以下命令:

npm开始

其他回答

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

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

打开自定义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}"

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

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

下面是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}"
      ]
    }
  ]
}

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

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

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

来源:链接