如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?
使用notepad++,您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?
如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?
使用notepad++,您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?
当前回答
您现在可以在浏览器中安装一个扩展视图。我在chrome的windows上测试了它,它是工作的。
Vscode版本:1.10.2
其他回答
VS Code有一个实时服务器扩展,支持一键启动状态栏。
一些特点:
一键从状态栏启动 生活重新加载 支持Chrome调试附件
在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
可能大多数人都能从上面的答案中找到一个解决方案,但看到没有一个对我有效(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选项卡,麻烦的自由。
一件容易的事。
对于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
}
}
]
}
Ctrl + F1将打开默认浏览器。或者你可以按Ctrl + shift + P打开命令窗口,选择“在浏览器中查看”。html代码必须保存在一个文件中(未保存在编辑器上的代码-没有扩展名,不起作用)