如何使用Visual Studio代码在浏览器中查看我的HTML代码？

如何使用新的Microsoft Visual Studio代码在浏览器中查看我的HTML代码？

使用Notepad ++，您可以select在浏览器中运行。 我怎样才能用Visual Studio Code做同样的事情？

Answer 1

对于Windows – 打开您的默认浏览器 – testingVS代码V1.0.0

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

脚步：

1. 使用ctrl + shift + p打开命令面板。

2. 键入configuration任务运行器 。 select它将打开tasks.json文件。 删除显示的脚本并将其replace为以下内容：

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

   请记住将tasks.json文件的“args”部分更改为文件的名称。 当你点击F5时，这将始终打开该特定文件。

   您也可以通过使用["${file}"]作为“args”的值，将此设置打开当前打开的任何文件。 请注意， $超出了{...} ，因此["{$file}"]不正确。

3. 保存文件。

4. 切换回你的html文件（在这个例子中是“text.html”），然后按ctrl + shift + b在Web浏览器中查看你的页面。

Answer 2

@InvisibleDev – 试图使用这个工作在Mac上：

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

如果你已经打开chrome，它会在一个新标签中启动你的html文件。

Answer 3

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

这里是如何做到这一点：

• 打开命令提示符（cmd）并键入

  npm install –save-dev gulp-webserver

• 在VS Code中inputCtrl + Shift + P ，然后键入Configure Task Runner 。 select它，然后按回车。 它会为你打开tasks.json文件。 删除它的一切结束input下面的代码

tasks.json

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

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

gulpfile.js

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

• 现在在VS代码中inputCtrl + Shift + P并input“运行任务”时，你会看到你的任务“networking服务器”select，然后按回车。

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

这里是一个关于如何configuration“gulp-webserver”作为实例端口的信息，以及要加载的页面，…

您也可以通过inputCtrl + P并input任务webserver来运行您的任务

Answer 4

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

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

Answer 5

您现在可以安装一个扩展在浏览器中查看 。 我用铬在windows上testing它，它正在工作。

vscode版本：1.10.2

Answer 6

如果你只是在Mac这个tasks.json文件：

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

…就是你需要在Safari中打开当前文件，假设它的扩展名是“.html”。

如上所述创buildtasks.json ，并用⌘ + shift + b调用它。

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

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

这将做你想做的，就像在打开一个新的选项卡，如果应用程序已经打开。

Answer 7

Chrome浏览器中的当前文档的2.0.0版本带有键盘快捷键：

tasks.json

  { "version": "2.0.0", "tasks": [ { "taskName": "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" } 

Answer 8

CTRL+SHIFT+P将popup命令调色板。
取决于你正在运行的东西。 您可以input一个ASP.net应用程序中的示例：
>kestrel ，然后打开你的网页浏览器并inputlocalhost:(your port here) 。

如果你input>它会告诉你显示和运行命令

或者你的情况与HTML，我认为打开命令面板后， F5应打开debugging器。

来源： 链接

Answer 9

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

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

注意“command”：行的path格式。 不要使用“C：\ path_to_exe \ runme.exe”格式。

要运行这个任务，打开你想要查看的html文件，按F1，inputtask opera并按回车

Answer 10

我的跑步者脚本如下所示：

 { "version": "0.1.0", "command": "explorer", "windows": { "command": "explorer.exe" }, "args": ["{$file}"] } 

它只是打开我的资源pipe理器，当我按Ctrl键转移b在我的index.html文件

Answer 11

这里是如何在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中input任何内容，因为Edge是我的默认浏览器，只是给了它文件的名字。

编辑：你也不需要-incognito和-private-window …这只是我我喜欢在一个私人窗口中查看它

Answer 12

对于Mac – 在Chrome中打开 – 在VS Code v 1.9.0上testing

1. 使用Command + shift + p打开命令选项板。

2. inputConfigure Task Runner，首次执行此操作，VS Code会给你下拉菜单，如果确实select了“Other”。 如果你之前做过这个，VS Code将直接发送给tasks.json。

3. 一旦进入tasks.json文件。 删除显示的脚本并将其replace为以下内容：

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

4. 切换回你的html文件并按下Command + Shift + b在Chrome中查看你的页面。

Answer 13

Ctrl + F1将打开默认的浏览器。 也可以按Ctrl + Shift + P打开命令窗口，然后select“在浏览器中查看”。 html代码必须保存在一个文件中（编辑器中未保存的代码 – 没有扩展名，不起作用）

Answer 14

一键式解决scheme只需从Visual Studio市场安装开放式浏览器扩展。

Answer 15

你不能。 Visual Studio不适用于网页devise或开发。 你必须编写一些代码才能工作。