[英]How to view an HTML file in the browser with Visual Studio Code
如何使用新的 Microsoft Visual Studio Code 在浏览器中查看我的 HTML 代码？
使用 Notepad++，您可以选择在浏览器中运行。 我怎样才能用 Visual Studio Code 做同样的事情？
对于 Windows - 打开你的默认浏览器 - 在 VS Code v 1.1.0 上测试
回答打开特定文件（名称是硬编码的）或打开任何其他文件。
脚步：
使用ctrl + shift + p （或F1 ）打开命令面板。
输入Tasks: Configure Task或在旧版本上Configure Task Runner 。 选择它会打开tasks.json文件。 删除显示的脚本并将其替换为以下内容：
{ "version": "0.1.0", "command": "explorer", "windows": { "command": "explorer.exe" }, "args": ["test.html"] }请记住将 tasks.json 文件的“args”部分更改为您的文件名。 当您按 F5 时，这将始终打开该特定文件。
您还可以通过使用["${file}"]作为 "args" 的值来设置 this 以打开您当时打开的任何文件。 请注意， $在{...} ，因此["{$file}"]不正确。
保存文件。
切换回您的 html 文件（在本例中为“text.html”），然后按ctrl + shift + b在您的 Web 浏览器中查看您的页面。
@InvisibleDev - 要在尝试使用此功能的 mac 上实现此功能：
{
"version": "0.1.0",
"command": "Chrome",
"osx": {
"command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
},
"args": [
"${file}"
]
}
如果您已经打开了 chrome，它将在新选项卡中启动您的 html 文件。
如果您想实时重新加载，您可以使用 gulp-webserver，它将监视您的文件更改并重新加载页面，这样您就不必每次在页面上按 F5：
这是如何做到的：
打开命令提示符（cmd）并输入
npm install --save-dev gulp-webserver
在 VS Code 中输入Ctrl+Shift+P并输入Configure Task Runner 。 选择它并按回车键。 它将为您打开 tasks.json 文件。 从中删除所有内容，然后输入以下代码
任务文件
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [
{
"taskName": "webserver",
"isBuildCommand": true,
"showOutput": "always"
}
]
}
gulpfile.js
var gulp = require('gulp'),
webserver = require('gulp-webserver');
gulp.task('webserver', function () {
gulp.src('app')
.pipe(webserver({
livereload: true,
open: true
}));
});
您的网络服务器现在将在您的默认浏览器中打开您的页面。 现在，您对 HTML 或 CSS 页面所做的任何更改都将自动重新加载。
这是有关如何配置“gulp-webserver”的信息，例如端口，以及要加载的页面，...
您也可以通过输入Ctrl+P并输入task webserver来运行您的任务
这是 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
2020 年 4 月 18 日更新的答案
单击此左下角管理图标。 单击扩展或快捷方式Ctrl+Shift+X
然后用这个关键句子在扩展中搜索Open In Default Browser 。 你会找到这个扩展。 对我来说更好。
现在右键单击html文件，您将看到在默认浏览器中打开或快捷键Ctrl+1以在浏览器中查看html文件。
在linux下，可以使用xdg-open命令用默认浏览器打开文件：
{
"version": "0.1.0",
"linux": {
"command": "xdg-open"
},
"isShellCommand": true,
"showOutput": "never",
"args": ["${file}"]
}
我只是重新发布我从msdn博客中使用的步骤。 它可以帮助社区。
这将帮助您使用VS Code设置称为lite-server的本地 Web 服务器，并指导您在localhost托管静态html文件并debug您的Javascript代码。
1. 安装 Node.js
如果尚未安装，请在此处获取
它带有 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.启动本地web服务器！
（假设您的项目文件夹中有一个 index.html 文件）。
在同一个终端窗口（Windows 中的命令提示符）中运行以下命令：
npm start
稍等片刻，index.html 已加载并显示在由本地 Web 服务器提供的默认浏览器中！
lite-server 正在监视您的文件并在您对任何 html、js 或 css 文件进行更改后立即刷新页面。
如果您将 VS Code 配置为自动保存（菜单文件/自动保存），您会在键入时在浏览器中看到更改！
笔记：
就是这样。 现在在任何编码会话之前只需键入 npm start 就可以开始了！
原帖在这里在msdn博客。 致谢作者： @Laurent Duveau
如果你只是在 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 上测试
键入 Configure Task Runner，第一次执行此操作时，VS Code 将为您提供向下滚动菜单，如果确实选择了“其他”。 如果你以前这样做过，VS Code 只会直接将你发送到 tasks.json。
一旦在 tasks.json 文件中。 删除显示的脚本并将其替换为以下内容：
{ "version": "0.1.0", "command": "Chrome", "osx": { "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" }, "args": ["${file}"] }
一键式解决方案只需从 Visual Studio 市场安装浏览器中打开的扩展。
VS Code 团队现在有一个名为“Live Preview”的官方扩展
快速设置：
> Live Preview: Show Preview (External Browser)还有一个命令可以在内部浏览器中启动它。 您可能还需要更改扩展设置中的默认端口，以防它已在您的系统上使用。
文档： https : //marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
发行说明： https : //code.visualstudio.com/updates/v1_59#_live-preview
CTRL+SHIFT+P将调出命令面板。
当然，这取决于您正在运行的内容。 您可以在 ASP.net 应用程序中输入的示例：
>kestrel然后打开您的网络浏览器并输入localhost:(your port here) 。
如果你输入>它会显示你的show 和 run 命令
或者在您使用 HTML 的情况下，我认为打开命令面板后F5应该打开调试器。
来源：链接
在 Opera 浏览器中打开文件（在 Windows 64 位上）。 只需添加以下几行：
{
"version": "0.1.0",
"command": "opera",
"windows": {
"command": "///Program Files (x86)/Opera/launcher.exe"
},
"args": ["${file}"] }
注意“command”:行上的路径格式。 不要使用“C:\\path_to_exe\\runme.exe”格式。
要运行此任务，请打开要查看的 html 文件，按 F1，键入taskopera并按 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}"]
}
]
}
请注意，我没有在 args 中为 edge 输入任何内容，因为 Edge 是我的默认浏览器，只是给了它文件名。
编辑：你也不需要 -incognito 和 -private-window ......只是我喜欢在私人窗口中查看它
最近在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 文件时。
无论如何它很酷。 快乐的 vscoding :)
这是 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 版中工作 ->
Ctrl + F1 将打开默认浏览器。 或者，您可以按 Ctrl + shift + P 打开命令窗口并选择“在浏览器中查看”。 html 代码必须保存在文件中（编辑器上未保存的代码 - 没有扩展名，不起作用）
可能大多数人都能从上述答案中找到解决方案，但看到没有一个对我vscode v1.34 （ vscode v1.34 ），我想我会分享我的经验。 如果至少有人觉得它有帮助，那么酷不是一个浪费的帖子， amiirte ？
无论如何，我的解决方案（ windows ）是在@noontz 的基础上构建的。 他的配置对于旧版本的vscode可能已经足够了，但对于1.34不够（至少，我无法让它工作......）。
除了单个属性之外，我们的配置几乎相同——该属性是group属性。 我不知道为什么，但如果没有这个，我的任务甚至不会出现在命令面板中。
所以。 tasks.json于运行vscode 1.34 windows用户的有效vscode 1.34 ：
{
"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文件，轻松自如。
简单。
{
"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"
}
]
}
{
"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}替换${config:chrome.executable}您的自定义 chrome 位置，例如"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"${config:chrome.profileDir}替换${config:chrome.profileDir}您的自定义 chrome 配置文件目录，例如"C:/My/Data/chrome/profile"或将其省略settings.json - user 或 workspace - 中添加以下条目，根据需要调整路径："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",
}
}
]
}
另一个用于预览 HTML 文件的扩展名为Live Preview 。 我喜欢这个答案中链接的“实时服务器”的几个原因。
Live Preview扩展刚刚添加（在 Insiders Build now 和 Stable 2023 年 2 月初）更改打开的默认浏览器的能力（当您选择在外部浏览器中打开它而不是作为 vscode 中的另一个选项卡时）。 请参阅添加选项以选择默认外部浏览器。
设置是
Live Preview: Custom External Browser
livePreview.customExternalBrowser
选项：Edge、Chrome、Firefox、无
none将使用您在操作系统中设置为默认浏览器的任何内容。 新设置允许您使用另一个浏览器覆盖该default设置，以便通过以下命令打开外部浏览器的Live Preview扩展：
Live Preview: Show Preview (External Browser)
启动本地网络服务器！
（假设您的项目文件夹中有一个 index.html 文件）。
在同一个终端窗口（Windows 中的命令提示符）中运行以下命令：
启动
如何在Visual Studio 2012中的html页面的文件后面获取代码？
[英]How to get code behind file for the html page in Visual Studio 2012?
Visual Studio Code：在浏览器中打开当前的 HTML 文件 (launch.json)
[英]Visual Studio Code: Open current HTML file in browser (launch.json)
如何将工作 HTML、CSS、Javascript 代码从 Codepen 传输到 Visual Studio 代码和浏览器
[英]How to Transfer Working HTML, CSS, Javascript Code from Codepen to Visual Studio Code and Browser
如何通过Mac上的Visual Studio Code在浏览器中显示HTML / CSS文件？
[英]How do I display my HTML/CSS files on a browser via Visual Studio Code on Mac?
修改html文件时Visual Studio 2013自动浏览器链接
[英]Visual Studio 2013 automatic browser link when html file modified
如何在 Visual Studio Code 中查看实时服务器上的两个 html 页面？
[英]How Can I View Two html pages on live server in Visual Studio Code?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.