如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?
使用notepad++，您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?
当前回答
启动本地web服务器!
(假设在项目文件夹中有index.html文件)。
在同一终端窗口(Windows中的命令提示符)运行以下命令:
npm开始
其他回答
对于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代码必须保存在一个文件中(未保存在编辑器上的代码-没有扩展名，不起作用)
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",
}
}
]
}
打开自定义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有一个实时服务器扩展，支持一键启动状态栏。
一些特点:
一键从状态栏启动 生活重新加载 支持Chrome调试附件
