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

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


当前回答

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

一些特点:

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

其他回答

如果你只是在Mac上,这个任务。json文件:

{
    "version": "0.1.0",
    "command": "open",
    "args": ["${file}"],
}

...在Safari中打开当前文件(假设扩展名为“.html”)所需要的全部内容。

创建任务。Json,并使用⌘+shift+b调用它。

如果你想在Chrome中打开它,那么:

{
    "version": "0.1.0",
    "command": "open",
    "args": ["-a", "Chrome.app", "${file}"],
}

这将做你想要的,如在打开一个新的标签,如果应用程序已经打开。

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

来源:链接

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

{
    "version": "0.1.0",

    "command": "explorer",

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

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

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

我只是重新发布我从msdn博客使用的步骤。这可能对社区有所帮助。

这将帮助你 使用VS Code设置一个本地web服务器,称为lite-server,并指导你在localhost中托管静态html文件和调试Javascript代码。

1. 安装node . js

如果还没有安装,请从这里获取

它带有npm(用于获取和管理开发库的包管理器)

2. 为项目创建一个新文件夹

在你的驱动器的某个地方,为你的web应用程序创建一个新文件夹。

3.添加包。Json文件到项目文件夹

然后复制/粘贴以下文本:

{
   "name": "Demo",
   "version": "1.0.0",
   "description": "demo project.",
   "scripts": {
     "lite": "lite-server --port 10001",
     "start": "npm run lite"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "lite-server": "^2.5.4"
   }
}

4. 安装web服务器

在项目文件夹上打开的终端窗口(Windows中的命令提示符)中,运行以下命令:

npm install

这将安装lite-server(在package.json中定义),这是一个静态服务器,它在默认浏览器中加载index.html,并在应用程序文件更改时自动刷新它。

5. 启动本地web服务器!

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

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

npm start

等待一秒钟,index.html被加载并显示在您本地web服务器提供的默认浏览器中!

Lite-server正在监视您的文件,并在您对任何html, js或CSS文件进行更改时刷新页面。

如果你将VS Code配置为自动保存(菜单文件/自动保存),你会在浏览器中看到你输入的变化!

注:

不要关闭命令行提示符,直到您在 每日应用 它在http://localhost:10001上打开,但是您可以通过更改端口 编辑包。json文件。

就是这样。现在,在任何编码会话之前,只需输入npm start,你就可以开始了!

最初发表于msdn博客。 致谢作者:@Laurent Duveau