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

CTRL+SHIFT+P将打开命令面板 当然，这取决于你在运行什么。例如，在ASP.net应用程序中，你可以输入:
>kestrel，然后打开浏览器，输入localhost:(your port here)。< br > < / p >

如果你输入>，它会显示给你显示和运行命令

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

来源:链接

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

回答既打开一个特定的文件(名称是硬编码)或打开任何其他文件。

步骤:

1. 使用ctrl + shift + p(或F1)打开命令面板。

2. 在Tasks: Configure Task或在旧版本中键入Configure Task Runner。选择它将打开tasks.json文件。删除显示的脚本，替换如下:

   {
   "version": "0.1.0",
   "command": "explorer",
   "windows": {
   "command": "explorer.exe"
   },
   "args": ["test.html"]
   }
   

   记住要更改任务的“args”部分。Json文件到您的文件名。当你按下F5时，它总是会打开那个特定的文件。

   你也可以通过使用["${file}"]作为"args"的值，将this设置为打开你当时打开的任何文件。注意，$在{...}之外，所以["{$file}"]是不正确的

3. 保存文件。

4. 切换回您的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文件。

在Opera浏览器中打开文件(Windows 64位)。只要加上这几行:

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

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

要运行此任务，请打开要查看的html文件，按F1，键入任务的歌剧并按enter

如果你想要实时重载，你可以使用gulp-webserver，它会监视你的文件更改和重载页面，这样你就不必每次在你的页面上都按F5:

以下是如何做到这一点:

• 打开命令提示符(cmd)并键入

  NPM install——save-dev gulp-webserver

• 在VS Code中输入Ctrl+Shift+P，输入Configure Task Runner。选择它并按enter。它将打开任务。Json文件。删除所有内容，然后输入以下代码

tasks.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并键入“运行任务”，当你输入它时，你会看到你的任务“webserver”被选中并按enter。

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

这里是关于如何为实例端口配置“gulp-webserver”的信息，以及加载什么页面，…

你也可以通过输入Ctrl + P并输入任务网络服务器来运行你的任务

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

{
"version": "0.1.0",


"command": "explorer",


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


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

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

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

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

下面是如何在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…只有我，我喜欢在私人窗口看

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

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

1. 使用命令 + 转变 + p打开命令面板。

2. 输入配置任务运行器，第一次这样做时，VS Code会给你下拉菜单，如果它选择了“其他”。如果你以前这样做过，VS Code会直接把你发送到tasks.json。

3. 一旦进入任务。json文件。删除显示的脚本，替换如下:

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

4. 切换回您的html文件，按命令 + 转变 + b在Chrome中查看您的页面。

如果你只是在Mac上，这个tasks.json文件:

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

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

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

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

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

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

你现在可以安装一个扩展浏览器查看。我在chrome的windows上测试了它，它是工作的。

Vscode版本:1.10.2

下面是一个2.0.0版本的当前文档在Chrome带键盘快捷方式:

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

在web服务器上运行:

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

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

最近在www.lynda.com中的一个visual studio代码教程中遇到了这个特性

按Ctrl + K + M，打开“选择语言模式”;(或者点击右下角那个笑脸符号前面的HTML)，输入markdown并按enter

现在按Ctrl + K后面跟着V，它将打开你的html在附近的标签。

Tadaaa ! !

现在emmet命令在我的html文件中不能在这种模式下工作，所以我回到了原始状态(注- html标签tellisense工作完美)

—按“Ctrl + K + M”，选择“auto-detect”。埃米特的命令开始生效。如果你只喜欢html查看器，那么没有必要让你回到原来的状态。

不知道为什么vscode没有html查看器选项默认情况下，当它能够显示html文件在markdown模式。

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

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

一些特点:

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

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

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配置为自动保存(菜单文件/自动保存)，你会在浏览器中看到你输入的变化!

注:

• 不要关闭命令行提示符，直到你在你的 App for the day
• 它在http://localhost:10001上打开，但是你可以通过更改端口 编辑包。李json文件。< / >

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

最初在msdn博客中发布在这里。 归属作者:@Laurent Duveau

可能大多数人都能从上面的答案中找到一个解决方案，但看到没有一个对我有效(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文件，没有麻烦。

一件容易的事。

1. 打开扩展侧栏(Ctrl + 转变 + X)

2. 搜索在浏览器中打开并安装它

   .

3. 右键单击您的html文件，并选择“在浏览器中打开”;(__abc0 + __abc1)

   .

打开自定义Chrome浏览器与URL从提示

{
"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"
• 将${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中用于调试目的

单击这个Left-Bottom管理图标。单击“扩展”或“捷径Ctrl+Shift+X”

然后在扩展中搜索这个关键句在默认浏览器中打开。你会发现这 Extension。这对我更好。

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

对于Mac，设置你的任务。将. 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
}
}
]
}

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

以下在windows 10的1.53.2版本中运行->

• 在终端菜单中选择运行活动文件
• 它在默认的边缘浏览器中执行html文件

启动本地web服务器!

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

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

npm开始

现在VS Code团队有一个官方扩展名为“Live preview”。

快速设置:

1. 安装“实时预览”;微软的扩展。
2. 打开html文件从工作空间，当前工作区之外的文件无法工作。
3. 执行命令> 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

还有另一个预览HTML文件的扩展名为实时预览。我喜欢它胜过“Live server”的几个原因在这个答案中链接。

• 无需启动服务器，预览图标集成到VS代码中(与标记预览相同)
• 预览在VS代码中以分屏视图打开(尽管在浏览器中打开的选项是可用的)
• 由微软开发(开发VS代码的同一家公司)
• 目前，“现场预览”;在“预览”中，只需要完善即可:-)