如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?
使用notepad++,您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?
如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?
使用notepad++,您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?
当前回答
在linux下,可以使用xdg-open命令在默认浏览器下打开文件:
{
"version": "0.1.0",
"linux": {
"command": "xdg-open"
},
"isShellCommand": true,
"showOutput": "never",
"args": ["${file}"]
}
其他回答
在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
@InvisibleDev -让这个在mac上工作尝试使用这个:
{
"version": "0.1.0",
"command": "Chrome",
"osx": {
"command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
},
"args": [
"${file}"
]
}
如果你已经打开了chrome浏览器,它会在一个新的选项卡中启动你的html文件。
打开自定义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。可执行}与您的自定义chrome位置,例如。"C:/Program Files (x86)/谷歌/Chrome/Application/ Chrome .exe" 替换${配置:chrome。profileDir}与您的自定义chrome配置文件目录,例如。 “C:/My/Data/chrome/profile”或省略 如果你愿意,你可以像上面那样保留变量。为此,在设置中添加以下条目。Json -用户或工作区-,根据需要调整路径:
"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"
你可以重复使用这些变量,例如在启动。"runtimeExecutable": "${config:chrome.executable}"
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
打开扩展工具栏(Ctrl + Shift + X) 在浏览器中搜索open并安装 右键点击你的html文件,选择“在浏览器中打开”(Alt + B)