如何使用 Visual Studio Code 在浏览器中查看 HTML 文件

对于 Windows - 打开您的默认浏览器 - 在 VS Code v 1.1.0 上测试

回答打开特定文件（名称是硬编码的）或打开任何其他文件。

脚步：

使用 ctrl + shift + p（或 F1）打开命令面板。输入任务：配置任务或在旧版本上配置任务运行器。选择它将打开 tasks.json 文件。删除显示的脚本并将其替换为以下内容： { "version": "0.1.0", "command": "explorer", "windows": { "command": "explorer.exe" }, "args": ["test.html"] } 请记住将 tasks.json 文件的 "args" 部分更改为文件名。当您按 F5 时，这将始终打开该特定文件。你也可以通过使用 ["${file}"] 作为 "args" 的值来设置这个来打开你当时打开的任何文件。注意 $ 在 {...} 之外，所以 ["{$file}"] 是不正确的。保存文件。切换回您的 html 文件（在本例中为“text.html”），然后按 ctrl + shift + b 在 Web 浏览器中查看您的页面。

https://i.stack.imgur.com/ahjua.png

---

VS Code 有一个支持从状态栏一键启动的 Live Server Extension。

一些特点：

从状态栏一键启动

实时重新加载

支持 Chrome 调试附件

https://i.stack.imgur.com/pOMJG.gif

---

@InvisibleDev - 让它在 Mac 上工作，尝试使用这个：

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": [
        "${file}"
    ]
}

如果您已经打开了 chrome，它将在新选项卡中启动您的 html 文件。

---

打开扩展侧边栏（Ctrl + Shift + X）在浏览器中搜索并安装它右键单击您的html文件，然后选择“在浏览器中打开”（Alt + B）

---

如果您想实时重新加载，您可以使用 gulp-webserver，它会监视您的文件更改并重新加载页面，这样您就不必每次在页面上按 F5：

这是如何做到的：

打开命令提示符 (cmd) 并键入 npm install --save-dev gulp-webserver

在 VS Code 中输入 Ctrl+Shift+P 并输入 Configure Task Runner。选择它并按回车键。它将为您打开 tasks.json 文件。从中删除所有内容，然后输入以下代码

任务.json

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "webserver",
            "isBuildCommand": true,
            "showOutput": "always"
        }
    ]
}

在项目的根目录中添加 gulpfile.js 并输入以下代码：

gulpfile.js

var gulp = require('gulp'),
    webserver = require('gulp-webserver');

gulp.task('webserver', function () {
    gulp.src('app')
        .pipe(webserver({
            livereload: true,
            open: true
        }));
});

现在在 VS Code 中输入 Ctrl+Shift+P 并在输入时输入“运行任务”，您将看到您的任务“网络服务器”被选中并按 Enter。

您的网络服务器现在将在您的默认浏览器中打开您的页面。现在，您对 HTML 或 CSS 页面所做的任何更改都将自动重新加载。

这是有关如何为实例端口配置 'gulp-webserver' 以及要加载的页面的信息，...

您也可以通过输入 Ctrl+P 并键入 task webserver 来运行您的任务

---

您现在可以安装扩展程序 View In Browser。我在带有 chrome 的 windows 上对其进行了测试，它正在工作。

vscode 版本：1.10.2

https://i.stack.imgur.com/2gTaO.png

---

https://i.stack.imgur.com/Z4z8u.png

单击此左下管理图标。点击Extensions或快捷方式Ctrl+Shift+X

然后在扩展中搜索这个关键语句在默认浏览器中打开。您将找到 this 扩展程序。这对我来说更好。

现在右键单击 html 文件，您将看到 在默认浏览器中打开 或快捷方式 Ctrl+1 以在浏览器中查看 html 文件。

---

这是 Chrome 中当前文档的 2.0.0 版本，带有键盘快捷键：

tasks.json

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

keybindings.json：

{
    "key": "ctrl+g",
    "command": "workbench.action.tasks.runTask",
    "args": "Chrome"
}

在网络服务器上运行：

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

---

在 linux 中，您可以使用 xdg-open 命令使用默认浏览器打开文件：

{
    "version": "0.1.0",
    "linux": {
        "command": "xdg-open"
    },
    "isShellCommand": true,
    "showOutput": "never",
    "args": ["${file}"]
}

---

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

这将帮助您使用 VS Code 设置称为 lite-server 的本地 Web 服务器，并指导您将静态 html 文件托管在 localhost 和 debug 您的 Javascript 代码中。

1. 安装 Node.js

如果尚未安装，请获取它here

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

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

在您的驱动器中的某处，为您的 Web 应用程序创建一个新文件夹。

3.在项目文件夹中添加一个package.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.安装网络服务器

在项目文件夹上打开的终端窗口（Windows 中的命令提示符）中，运行以下命令：

npm install

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

5.启动本地网络服务器！

（假设您的项目文件夹中有一个 index.html 文件）。

在同一终端窗口（Windows 中的命令提示符）中运行以下命令：

npm start

稍等片刻，index.html 将加载并显示在本地 Web 服务器提供的默认浏览器中！

lite-server 正在监视您的文件，并在您对任何 html、js 或 css 文件进行更改后立即刷新页面。

如果您将 VS Code 配置为自动保存（菜单文件/自动保存），您会在键入时在浏览器中看到更改！

笔记：

在您完成当天的应用程序编码之前，请勿关闭命令行提示符

它在 http://localhost:10001 上打开，但您可以通过编辑 package.json 文件来更改端口。

而已。现在在任何编码会话之前只需输入 npm start 就可以了！

最初在 msdn 博客中发布了 here。致谢作者：@Laurent Duveau

---

VS Code 团队现在有一个名为“实时预览”的官方扩展

快速设置：

安装 Microsoft 的“实时预览”扩展。从工作区打开一个 html 文件，当前工作区之外的文件不起作用。运行命令 > 实时预览：显示预览（外部浏览器）

还有一个用于在内部浏览器中启动它的命令。您可能还需要更改扩展设置中的默认端口，以防它已在您的系统上使用。

文档：https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

发行说明：https://code.visualstudio.com/updates/v1_59#_live-preview

---

如果您只是在 Mac 上使用此 tasks.json 文件：

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

...是您在 Safari 中打开当前文件所需的全部内容，假设其扩展名为“.html”。

如上所述创建 tasks.json 并使用 ⌘+shift+b 调用它。

如果您希望它在 Chrome 中打开，则：

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

这将做你想做的事，如果应用程序已经打开，则在新选项卡中打开。

---

对于 Mac - 在 Chrome 中打开 - 在 VS Code v 1.9.0 上测试

使用 Command + shift + p 打开命令面板。

https://i.stack.imgur.com/UZKLc.png

键入 Configure Task Runner，第一次执行此操作时，VS Code 将为您提供向下滚动菜单，如果它选择“Other”。如果你以前这样做过，VS Code 只会将你直接发送到 tasks.json。一旦进入 tasks.json 文件。删除显示的脚本并将其替换为以下内容：

{“版本”：“0.1.0”，“命令”：“Chrome”，“osx”：{“命令”：“/Applications/Google Chrome.app/Contents/MacOS/Google Chrome”}，“args”： ["${文件}"] }

切换回您的 html 文件，然后按 Command + Shift + b 在 Chrome 中查看您的页面。

---

一键式解决方案只需从 Visual Studio 市场安装 open-in-browser Extensions。

---

CTRL+SHIFT+P 将调出命令面板。
当然，这取决于您正在运行的内容。您可以在 ASP.net 应用程序中输入示例：
>kestrel，然后打开您的网络浏览器并输入 localhost:(your port here)。

如果您输入 >，它将显示 显示和运行命令

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

来源：link

---

在 Opera 浏览器中打开文件（在 Windows 64 位上）。只需添加以下行：

{
"version": "0.1.0",
"command": "opera",
"windows": {
    "command": "///Program Files (x86)/Opera/launcher.exe"
},
"args": ["${file}"] }

注意“命令”上的路径格式：行。不要使用“C:\path_to_exe\runme.exe”格式。

要运行此任务，请打开要查看的 html 文件，按 F1，键入 task Opera 并按 Enter

---

我的跑步者脚本看起来像：

{
    "version": "0.1.0",

    "command": "explorer",

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

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

当我在 index.html 文件中按 ctrl shift b 时，它只是打开了我的资源管理器

---

这是您如何在多个 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 ...这只是我喜欢在私人窗口中查看它

---

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

---

对于 Mac，将您的 tasks.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
            }
        }
    ]
}

---

以下在 Windows 10 上的 1.53.2 版本中工作->

在终端菜单中选择运行活动文件

它在默认边缘浏览器中执行 html 文件

---

Ctrl + F1 将打开默认浏览器。或者，您可以按 Ctrl + shift + P 打开命令窗口并选择“在浏览器中查看”。 html 代码必须保存在文件中（编辑器上未保存的代码 - 没有扩展名，不起作用）

---

可能大多数人都能从上述答案中找到解决方案，但看到没有一个对我有用（vscode v1.34），我想我会分享我的经验。如果至少有一个人觉得它有帮助，那么酷而不是浪费帖子，amiirte？

无论如何，我的解决方案 (windows) 是在 @noontz 的基础上构建的。他的配置对于旧版本的 vscode 可能已经足够了，但对于 1.34 则不行（至少，我无法让它工作..）。

我们的配置几乎相同，但只有一个属性——该属性是 group 属性。我不知道为什么，但没有这个，我的任务甚至不会出现在命令面板中。

所以。运行 vscode 1.34 的 windows 用户的有效 tasks.json：

{
    "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 在新的 chrome 选项卡中打开当前的 html 文件，轻松无忧。

简单的。

---

从提示中打开带有 URL 的自定义 Chrome

{
  "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 属性替换为其他操作系统

将 ${config:chrome.executable} 替换为您的自定义 chrome 位置，例如“C:/Program Files (x86)/Google/Chrome/Application/chrome.exe”

将 ${config:chrome.profileDir} 替换为您的自定义 chrome 配置文件目录，例如“C:/My/Data/chrome/profile”或将其省略

如果需要，您可以保留上述变量。为此，请在 settings.json - 用户或工作区 - 中添加以下条目，根据您的需要调整路径：

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

您可以重新使用这些变量，例如在 launch.json 中用于调试目的： "runtimeExecutable": "${config:chrome.executable}"

---

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

---

最近在 www.lynda.com 的一个 Visual Studio 代码教程中发现了此功能

按 Ctrl + K 然后按 M，它将打开“选择语言模式”（或单击右下角，在该笑脸之前显示 HTML），输入 markdown 并按 enter

现在按 Ctrl + K 然后按 V，它将在附近的选项卡中打开您的 html。

塔达啊！！！

现在 emmet 命令在我的 html 文件中不能在这种模式下工作，所以我回到了原始状态（注意 - html 标记 Tellisense 工作正常）

要进入原始状态 - 按 Ctrl + K，然后按 M，选择自动检测。 emmet 命令开始工作。如果您对仅 html 的查看器感到满意，那么您无需返回原始状态。

想知道为什么 vscode 在能够以降价模式显示 html 文件时默认没有 html 查看器选项。

---

启动本地网络服务器！

（假设您的项目文件夹中有一个 index.html 文件）。

在同一终端窗口（Windows 中的命令提示符）中运行以下命令：

npm 开始

---