如何使用 Visual Studio Code 在浏览器中查看 HTML 文件
Posted
技术标签:
【中文标题】如何使用 Visual Studio Code 在浏览器中查看 HTML 文件【英文标题】：How to view an HTML file in the browser with Visual Studio Code 【发布时间】：2015-07-14 09:25:19 【问题描述】：如何使用新的 Microsoft Visual Studio Code 在浏览器中查看我的 html 代码？
使用 Notepad++，您可以选择在浏览器中运行。如何使用 Visual Studio Code 做同样的事情？
【问题讨论】：
VS Code 现在有一个 Live Server 扩展。请看我的回答：***.com/a/48721885/466066 实时服务器扩展为我工作。我不想配置任何文件来执行此操作。 也相关：***.com/questions/47519768/… 微软发布了更容易设置的“实时预览”扩展。见***.com/a/69210917/2713729Live Preview 适用于内部和外部浏览器，这是一个很棒的功能。
【参考方案1】：
最近在 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文件时。
【讨论】：
问题是关于如何在浏览器中查看。【参考方案2】：点击这个左下管理图标。点击Extensions或快捷方式Ctrl+Shift+X
然后使用这个关键语句在扩展中搜索在默认浏览器中打开。你会发现this 分机。对我来说更好。
现在右键单击html 文件，您将看到在默认浏览器中打开 或快捷方式Ctrl+1 在浏览器中查看html 文件。
【讨论】：
快捷方式ctrl+1智能覆盖默认ctrl+1，在资源管理器中html时打开浏览器，否则将光标设置在当前editor。【参考方案3】：
VS Code 团队现在有一个名为“实时预览”的官方扩展
快速设置：
-
从 Microsoft 安装“实时预览”扩展。
从工作区打开一个 html 文件，当前工作区之外的文件不起作用。
运行命令
> 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
【讨论】：
【参考方案4】：启动本地网络服务器！
（假设您的项目文件夹中有一个 index.html 文件）。
在同一终端窗口（Windows 中的命令提示符）中运行以下命令：
npm 开始
【讨论】：
【参考方案5】：以下在 Windows 10 上的 1.53.2 版本中有效 ->
在终端菜单中选择运行活动文件 它在默认边缘浏览器中执行 html 文件【讨论】：
【参考方案6】：打开扩展侧边栏 (Ctrl + Shift + X)
搜索open in browser并安装
右键单击您的 html 文件，然后选择“在浏览器中打开”(Alt + B)
【讨论】：
在 Windows 中效果很好。 也适用于 mac。你只需要使用Cmd + Shift + X 然后其余的都是一样的。【参考方案7】：
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",
]
【讨论】：
【参考方案8】：我只是重新发布我在 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 配置为自动保存（菜单文件/自动保存），您会在键入时在浏览器中看到更改！
注意事项：
在您完成编码之前不要关闭命令行提示符 当天的应用 它在 http://localhost:10001 上打开，但您可以通过以下方式更改端口 编辑 package.json 文件。就是这样。现在在任何编码会话之前只需输入 npm start 就可以了！
最初在 msdn 博客中发布 here。
致谢作者：@Laurent Duveau
【讨论】：
【参考方案9】：对于 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
]
【讨论】：
【参考方案10】：使用提示中的 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 属性替换为其他操作系统
用您的自定义 chrome 位置替换 $config:chrome.executable，例如"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
用您的自定义 chrome 配置文件目录替换 $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"
【讨论】：
【参考方案11】：这是 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
【讨论】：
【参考方案12】：可能大多数人都能从上述答案中找到解决方案，但看到没有一个对我有用 (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 文件，没有麻烦。
简单。
【讨论】：
【参考方案13】：对于 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> 在您的网络浏览器中查看您的页面。
【讨论】：
如果您有多个 HTML 文件，您甚至可以使用变量。你可以这样做： "args": ["$file"] 来传递当前打开的文件。另见code.visualstudio.com/Docs/tasks#_variables-in-tasksjson 如何在 Mac 中进行操作？没有exe文件。我想在 Mac 上用 chrome 打开网页 刚刚得到“无法启动外部程序 chrome $file.spawn chrome ENOENT” 在新文件夹中配置任务：选择任务：配置任务运行程序命令，您将看到任务运行程序模板列表。选择 Others 以创建运行外部命令的任务。 . . .您现在应该会在工作区 .vscode 文件夹中看到一个 tasks.json 文件，其中包含以下内容：. . . code.visualstudio.com/Docs/editor/tasks Configure Task Runner 在 VSC 1.24.0 中不再存在 - Control-Shift-P 不返回该字符串的结果。【参考方案14】：VS Code 有一个Live Server Extention 支持从状态栏一键启动。
一些特点：
从状态栏一键启动 实时重新加载 支持 Chrome 调试附件【讨论】：
这个扩展还有一个网络插件，可以为动态页面提供自动重新加载功能。 @M.Sundstrom 你能给我那个插件的名字/链接吗？ 还是很有用的，尤其是完全免配置！ 不推荐用于复杂页面，可能对新编码人员有好处 但您似乎无法预览未保存的活动文件，对吧？ （运行它，不预览 html，但在浏览器上显示文件夹层次结构）【参考方案15】：这是 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"
]
]
【讨论】：
【参考方案16】：一键式解决方案只需从 Visual Studio 市场安装 open-in-browser Extensions。
【讨论】：
【参考方案17】：您现在可以安装扩展程序View In Browser。我在带有 chrome 的 windows 上对其进行了测试，它可以正常工作。
vscode 版本：1.10.2
【讨论】：
那个扩展得到了可怕的评论。 这不会自动刷新浏览器，这不是 OP 想要的【参考方案18】：如果您只是在 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"],
这会做你想做的事，如果应用已经打开，就像在新标签页中打开一样。
【讨论】：
【参考方案19】：对于 Mac - 在 Chrome 中打开 - 在 VS Code v 1.9.0 上测试
-
使用 Command + shift + p 打开命令面板。
键入 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"]
-
切换回您的 html 文件并按 Command + Shift + b 以在 Chrome 中查看您的页面。
【讨论】：
【参考方案20】：Ctrl + F1 将打开默认浏览器。或者，您可以按 Ctrl + shift + P 打开命令窗口并选择“在浏览器中查看”。 html 代码必须保存在文件中（编辑器上未保存的代码 - 没有扩展名，不起作用）
【讨论】：
您使用的是什么版本的 Visual Studio Code？这些命令在我刚刚更新的 1.8.1 中不起作用。 Ctrl+F1 什么都不做，我在命令面板中没有“在浏览器中查看”选项。也许您的 tasks.json 中有超出默认安装或额外任务的内容？ 我有相同的版本，但我意识到我为它安装了一个扩展。它是：marketplace.visualstudio.com/…【参考方案21】：这里是你如何在 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"] 是这项工作的原因。出于好奇，这是做什么的？【参考方案22】：
在linux中，可以使用xdg-open命令用默认浏览器打开文件：
"version": "0.1.0",
"linux":
"command": "xdg-open"
,
"isShellCommand": true,
"showOutput": "never",
"args": ["$file"]
【讨论】：
谢谢！我是 Linux 用户，感觉很迷茫。我想补充一点，需要按Ctrl + Shift + b 才能在浏览器中启动它。对我来说，助记符是“b = browser”。 :-)
它有效，但似乎已弃用，如果您有更新版本，谢谢
你能把版本条目留在tasks.json里吗？【参考方案23】：
我的运行脚本看起来像：
"version": "0.1.0",
"command": "explorer",
"windows":
"command": "explorer.exe"
,
"args": ["$file"]
当我在 index.html 文件中按 ctrl shift b 时，它只是打开了我的资源管理器
【讨论】：
【参考方案24】：如果您想实时重新加载，您可以使用 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。知道我错过了什么吗？
没关系，只需将示例中的“应用程序”更改为“。” （所以它从当前目录提供服务）。
对答案的评论：如果你想在浏览器中运行一个 html 文件，它会在更改时自动重新加载，你的 gulpfile.js 应该看起来像这样，带有一个 '.'而不是“应用程序”。代码 = var gulp = require('gulp'), webserver = require('gulp-webserver'); gulp.task('webserver', function () gulp.src('.') .pipe(webserver( fallback: 'index.html', livereload: true, open: true )); );跨度>
这太棒了。感谢您将此解释为一个有价值的选择。我还应用了一点 Krill 和 Friis 的答案来完成这项工作。但确实如此！
我收到“Cannot GET /”，因为我复制粘贴了 gulpfile.js 而没有配置 gulp.src('app') 行，因此它实际上指向了我的源（不是 /app 而是 '.'） .完美运行。谢谢！【参考方案25】：
@InvisibleDev - 让它在 Mac 上工作，尝试使用它：
"version": "0.1.0",
"command": "Chrome",
"osx":
"command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
,
"args": [
"$file"
]
如果您已经打开了 chrome，它将在新选项卡中启动您的 html 文件。
【讨论】：
【参考方案26】：在 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并回车
【讨论】：
【参考方案27】：CTRL+SHIFT+P 将调出命令面板。
当然，这取决于您正在运行的内容。在 ASP.net 应用程序中的示例，您可以输入：>kestrel，然后打开您的 Web 浏览器并输入 localhost:(your port here)。
如果您输入>，它将显示显示和运行命令
或者在您使用 HTML 的情况下，我认为 F5 在打开命令面板后应该打开调试器。
来源：link
【讨论】：
我得到了这个开场白content.screencast.com/users/Orphydian/folders/3ds%20max/media/…以上是关于如何使用 Visual Studio Code 在浏览器中查看 HTML 文件的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Visual Studio Code 显示隐藏文件
如何使用 Visual Studio Code 启用 lintr
如何使用 Visual Studio Code 在浏览器中查看 HTML 文件
如何在OSX上的Visual Studio Code中使用三个斜杠注释？