如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?
使用notepad++,您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?
如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?
使用notepad++,您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?
当前回答
在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并按enter
其他回答
VS Code团队现在有一个官方扩展,叫做“Live Preview”
快速设置:
安装“实时预览”扩展从微软。 从工作空间打开html文件,当前工作空间之外的文件无法工作。 执行命令> Live Preview: Show Preview(外部浏览器)
还有一个命令用于在内部浏览器中启动它。您可能还需要从扩展设置中更改默认端口,以防它已经在您的系统上使用。
文档:https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
发布说明:https://code.visualstudio.com/updates/v1_59#_live-preview
如果你想要实时重载,你可以使用gulp-webserver,它会监视你的文件更改和重载页面,这样你就不必每次在你的页面上都按F5:
以下是如何做到这一点:
打开命令提示符(cmd)并键入 安装gulp-webserver 在VS Code中输入Ctrl+Shift+P并键入配置任务运行器。选择它并按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并输入task webserver来运行你的任务
可能大多数人都能从上面的答案中找到一个解决方案,但看到没有一个对我有效(vscode v1.34),我想我将分享我的经验。如果至少有一个人觉得它有帮助,那么很酷,不是一个浪费的帖子,amiirte?
无论如何,我的解决方案(窗口)是建立在@noontz的顶部。他的配置可能已经足够旧版本的vscode,但不是1.34(至少,我不能让它工作..)。
我们的配置几乎是相同的,除了一个属性,即group属性。我不知道为什么,但是如果没有这个,我的任务甚至不会出现在命令面板中。
所以。一个工作任务。Json,用于运行vscode 1.34的Windows用户:
{
"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打开当前的HTML文件在一个新的chrome选项卡,麻烦的自由。
一件容易的事。
Ctrl + F1将打开默认浏览器。或者你可以按Ctrl + shift + P打开命令窗口,选择“在浏览器中查看”。html代码必须保存在一个文件中(未保存在编辑器上的代码-没有扩展名,不起作用)
一键解决方案,只需从Visual Studio市场安装开放的浏览器扩展。