如何使用新的 Microsoft Visual Studio Code 在浏览器中查看我的 HTML 代码？
使用 Notepad++，您可以选择在浏览器中运行。如何使用 Visual Studio Code 做同样的事情？
【问题讨论】：
Live Preview 适用于内部和外部浏览器，这是一个很棒的功能。
标签： html visual-studio-code preview
最近在 www.lynda.com 的 Visual Studio 代码教程之一中发现了此功能
按Ctrl + K，然后按M，它将打开“选择语言模式”（或点击右下角那个笑脸前面写着HTML的），输入markdown并回车
现在按 Ctrl + K 然后按 V，它将在附近的选项卡中打开您的 html。
多多！！！
现在 emmet 命令在我的 html 文件中无法在此模式下工作，所以我回到了原始状态（注意 - html 标签tellisense 工作正常）
要返回原始状态 - 按 Ctrl + K，然后按 M，选择自动检测。 emmet 命令开始工作。如果您对仅 html 的查看器感到满意，那么您无需返回原始状态。
想知道为什么vscode默认没有html查看器选项，当它能够在markdown模式下显示html文件时。
【讨论】：
点击这个左下管理图标。点击Extensions或快捷方式Ctrl+Shift+X
然后使用这个关键语句在扩展中搜索在默认浏览器中打开。你会发现this 分机。对我来说更好。
现在右键单击html 文件，您将看到在默认浏览器中打开 或快捷方式Ctrl+1 在浏览器中查看html 文件。
【讨论】：
ctrl+1智能覆盖默认ctrl+1，在资源管理器中html时打开浏览器，否则将光标设置在当前editor。
VS Code 团队现在有一个名为“实时预览”的官方扩展
快速设置：
> 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
【讨论】：
启动本地网络服务器！
（假设您的项目文件夹中有一个 index.html 文件）。
在同一终端窗口（Windows 中的命令提示符）中运行以下命令：
npm 开始
【讨论】：
以下在 Windows 10 上的 1.53.2 版本中有效 ->
【讨论】：
打开扩展侧边栏 (Ctrl + Shift + X)
搜索open in browser并安装
右键单击您的 html 文件，然后选择“在浏览器中打开”(Alt + B)
【讨论】：
Cmd + Shift + X 然后其余的都是一样的。
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",
}
}
]
}
【讨论】：
我只是重新发布我在 msdn 博客中使用的步骤。它可能会对社区有所帮助。
这将帮助您
使用VS Code 设置一个名为lite-server 的本地Web 服务器，并指导您将静态html 文件托管在localhost 和debug 您的Javascript 代码中。
1.安装 Node.js
如果尚未安装，请获取here
它带有 npm（用于获取和管理开发库的包管理器）
2。为您的项目创建一个新文件夹
在您的驱动器的某个位置，为您的网络应用创建一个新文件夹。
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 配置为自动保存（菜单文件/自动保存），您会在键入时在浏览器中看到更改！
注意事项：
就是这样。现在在任何编码会话之前只需输入 npm start 就可以了！
最初在 msdn 博客中发布 here。
致谢作者：@Laurent Duveau
【讨论】：
对于 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
}
}
]
}
【讨论】：
{
"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}，例如"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
${config:chrome.profileDir}，例如
"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}"
【讨论】：
这是 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
【讨论】：
可能大多数人都能从上述答案中找到解决方案，但看到没有一个对我有用 (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 文件，没有麻烦。
简单。
【讨论】：
对于 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”的值，将其设置为打开您当时打开的任何文件。注意$在{...}之外，所以["{$file}"]是不正确的。
保存文件。
切换回您的 html 文件（在本例中为“text.html”），然后按 ctrl + shift + b kbd> 在您的网络浏览器中查看您的页面。
【讨论】：
【讨论】：
这是 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}"
]
}
]
}
【讨论】：
一键式解决方案只需从 Visual Studio 市场安装 open-in-browser Extensions。
【讨论】：
【讨论】：
如果您只是在 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 将为您提供向下滚动菜单，如果它选择“Other”。如果你以前这样做过，VS Code 只会将你直接发送到 tasks.json。
在 tasks.json 文件中。删除显示的脚本并将其替换为以下内容：
{ "version": "0.1.0", "command": "Chrome", "osx": { "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" }, "args": ["${file}"] }
【讨论】：
Ctrl + F1 将打开默认浏览器。或者，您可以按 Ctrl + shift + P 打开命令窗口并选择“在浏览器中查看”。 html 代码必须保存在文件中（编辑器上未保存的代码 - 没有扩展名，不起作用）
【讨论】：
这里是你如何在 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...只是我喜欢在私人窗口中查看它
【讨论】：
tasks 部分。 "args":["/C"] 是这项工作的原因。出于好奇，这是做什么的？
在linux中，可以使用xdg-open命令用默认浏览器打开文件：
{
"version": "0.1.0",
"linux": {
"command": "xdg-open"
},
"isShellCommand": true,
"showOutput": "never",
"args": ["${file}"]
}
【讨论】：
Ctrl + Shift + b 才能在浏览器中启动它。对我来说，助记符是“b = browser”。 :-)
我的运行脚本看起来像：
{
"version": "0.1.0",
"command": "explorer",
"windows": {
"command": "explorer.exe"
},
"args": ["{$file}"]
}
当我在 index.html 文件中按 ctrl shift b 时，它只是打开了我的资源管理器
【讨论】：
如果您想实时重新加载，您可以使用 gulp-webserver，它会监视您的文件更改并重新加载页面，这样您就不必每次在页面上按 F5：
这是怎么做的：
打开命令提示符 (cmd) 并输入
npm install --save-dev gulp-webserver
在 VS Code 中输入 Ctrl+Shift+P 并输入 Configure Task Runner。选择它并按回车键。它将为您打开 tasks.json 文件。从中删除所有内容，然后输入以下代码
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
来运行您的任务【讨论】：
npm install -g gulp、npm install -g gulp-webserver 并添加一个指向我的 AppData\npm\node_modules 的 NODE_PATH 环境变量。然后我能够运行网络服务器任务，但是当浏览器启动时我得到一个 404。知道我错过了什么吗？
gulp.src('app') 行，因此它实际上指向了我的源（不是 /app 而是 '.'） .完美运行。谢谢！
@InvisibleDev - 让它在 Mac 上工作，尝试使用它：
{
"version": "0.1.0",
"command": "Chrome",
"osx": {
"command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
},
"args": [
"${file}"
]
}
如果您已经打开了 chrome，它将在新选项卡中启动您的 html 文件。
【讨论】：
在 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，输入task opera并回车
【讨论】：
CTRL+SHIFT+P 将调出命令面板。
当然，这取决于您正在运行的内容。在 ASP.net 应用程序中的示例，您可以输入：>kestrel，然后打开您的 Web 浏览器并输入 localhost:(your port here)。
如果您输入>，它将显示显示和运行命令
或者在您使用 HTML 的情况下，我认为 F5 在打开命令面板后应该打开调试器。
来源：link