如何使用 Visual Studio 代码在浏览器中查看 HTML 文件
How to view an HTML file in the browser with Visual Studio Code
如何使用新的 Microsoft Visual Studio 代码在浏览器中查看我的 HTML 代码?
使用 Notepad++,您可以选择在浏览器中 运行。我怎样才能用 Visual Studio 代码做同样的事情?
CTRL+SHIFT+P
将调出命令面板。
当然,这取决于您 运行ning 的内容。在 ASP.net 应用程序中的示例,您可以输入:
>kestrel
然后打开您的网络浏览器并输入 localhost:(your port here)
。
如果您输入 >
,它将显示 show 和 运行 命令
或者在你使用 HTML 的情况下,我认为 F5
打开命令选项板后应该打开调试器。
来源:link
对于 Windows - 打开默认浏览器 - 在 VS Code v 1.1.0 上测试
打开特定文件(名称是硬编码的)或打开任何其他文件的答案。
步骤:
使用ctrl + shift + p(或F1) 打开命令面板。
键入 Tasks: Configure Task
或旧版本 Configure Task Runner
。选择它将打开 tasks.json 文件。删除显示的脚本并替换为以下内容:
{
"version": "0.1.0",
"command": "explorer",
"windows": {
"command": "explorer.exe"
},
"args": ["test.html"]
}
记得将 tasks.json 文件的 "args" 部分更改为您的文件名。当您按 F5 时,这将始终打开该特定文件。
您也可以使用 ["${file}"]
作为 "args" 的值,将此设置为打开您当时打开的任何文件。请注意 $
在 {...}
之外,因此 ["{$file}"]
不正确。
保存文件。
切换回您的 html 文件(在本例中为 "text.html"),然后按 ctrl + shift + b 在网络浏览器中查看您的页面。
@InvisibleDev - 让这个在 mac 上工作尝试使用这个:
{
"version": "0.1.0",
"command": "Chrome",
"osx": {
"command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
},
"args": [
"${file}"
]
}
如果您已经打开 chrome,它将在新选项卡中启动您的 html 文件。
在 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回车
如果您想实时重新加载,可以使用 gulp-webserver,它将监视您的文件更改并重新加载页面,这样您就不必每次在页面上都按 F5:
操作方法如下:
打开命令提示符 (cmd) 并键入
npm 安装--save-devgulp-webserver
在 VS Code 中输入 Ctrl+Shift+P 并键入 Configure Task Runner。 Select 并按回车键。它将为您打开 tasks.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 并输入 "Run Task" 当你输入它时你会看到你的任务 "webserver" 被选中并按下 enter .
您的网络服务器现在将在您的默认浏览器中打开您的页面。现在,您对 HTML 或 CSS 页面所做的任何更改都将自动重新加载。
这是有关如何配置 'gulp-webserver' 实例端口以及要加载的页面的信息,...
您也可以 运行 您的任务,只需输入 Ctrl+P 并输入 task webserver
我的运行脚本看起来像:
{
"version": "0.1.0",
"command": "explorer",
"windows": {
"command": "explorer.exe"
},
"args": ["{$file}"]
}
当我在我的 index.html 文件中按下 ctrl shift b 时,它只是打开我的资源管理器
在linux中可以使用xdg-open
命令用默认浏览器打开文件:
{
"version": "0.1.0",
"linux": {
"command": "xdg-open"
},
"isShellCommand": true,
"showOutput": "never",
"args": ["${file}"]
}
这是 运行 在多个浏览器中 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}"]
}
]
}
请注意,我没有在 edge 的 args 中键入任何内容,因为 Edge 是我的默认浏览器,只是为其提供了文件名。
编辑:您也不需要 -incognito 或 -private-window...只有我喜欢私下查看 window
Ctrl + F1 将打开默认浏览器。或者,您可以按 Ctrl + shift + P 打开命令 window 和 select "View in Browser"。 html 代码必须保存在文件中(编辑器上未保存的代码 - 没有扩展名,不起作用)
对于 Mac - 在 Chrome 中打开 - 在 VS Code v 1.9.0
上测试
- 使用Command + shift + p 打开命令面板。
输入 Configure Task Runner,第一次执行此操作时,VS Code 会为您提供向下滚动菜单,如果有 select "Other." 如果您已完成在此之前,VS Code 只会将您直接发送到 tasks.json.
一次在 tasks.json 文件中。删除显示的脚本并替换为以下内容:
{
"version": "0.1.0",
"command": "Chrome",
"osx": {
"command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
},
"args": ["${file}"]
}
- 切换回 html 文件并按 Command + Shift + b 在 Chrome.
中查看您的页面
如果您正在 Mac 这个 tasks.json
文件:
{
"version": "0.1.0",
"command": "open",
"args": ["${file}"],
}
...就是在 Safari 中打开当前文件所需的全部,假设其扩展名为“.html”。
如上所述创建 tasks.json
并使用 ⌘+shift+b[= 调用它27=]。
如果您希望它在 Chrome 中打开,则:
{
"version": "0.1.0",
"command": "open",
"args": ["-a", "Chrome.app", "${file}"],
}
这将执行您想要的操作,如在应用程序已打开的情况下在新选项卡中打开。
您现在可以安装扩展程序 View In Browser。我在 windows 上用 chrome 测试了它,它正在工作。
vscode版本:1.10.2
这是 Chrome 中当前文档的 2.0.0 版本,带键盘快捷键:
tasks.json
{
"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}"
],
"problemMatcher": []
}
]
}
keybindings.json
:
{
"key": "ctrl+g",
"command": "workbench.action.tasks.runTask",
"args": "Chrome"
}
网络服务器上的运行:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
一键式解决方案只需从 Visual Studio 市场安装 open-in-browser 扩展。
最近在 www.lynda.com
的 visual studio 代码教程之一中发现了此功能
按 Ctrl + K 然后按 M,它将打开“Select 语言模式”(或单击右下角那个笑脸前的 HTML),输入 markdown 和按回车
现在按 Ctrl + K,然后按 V,它将在附近的选项卡中打开您的 html。
Tadaaa!!!
现在 emmet 命令在我的 html 文件中无法在此模式下工作,所以我回到了原始状态(注意 - html 标签 tellisense 工作得很好)
要返回原始状态 - 按 Ctrl + K,然后按 M,select 自动检测。 emmet 命令开始工作。如果您对 html 只有观众感到满意,那么您就没有必要回到原来的状态。
想知道为什么 vscode 默认情况下没有 html 查看器选项,而它能够在 markdown 模式下显示 html 文件。
这是 Mac OSx 的 2.0.0 版本:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "echo",
"type": "shell",
"command": "echo Hello"
},
{
"label":"chrome",
"type":"process",
"command":"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
"args": [
"${file}"
]
}
]
}
VS Code 有一个 Live Server Extention 支持从状态栏单击启动。
部分功能:
- 从状态栏单击启动
- 实时重新加载
- 支持Chrome调试附件
我只是 re-posting 我在 msdn
博客中使用的步骤。它可能对社区有所帮助。
这将帮助您
使用 VS Code
设置名为 lite-server 的本地 Web 服务器,并指导您在 localhost
和 debug
中托管静态 html
文件 Javascript
代码。
1.安装 Node.js
如果还没有安装,获取它 here
它带有 npm(用于获取和管理您的开发库的包管理器)
2。为您的项目创建一个新文件夹
在您的驱动器中的某个位置,为您的网络应用程序创建一个新文件夹。
3。添加一个package.json文件到项目文件夹
然后copy/paste以下文字:
{
"name": "Demo",
"version": "1.0.0",
"description": "demo project.",
"scripts": {
"lite": "lite-server --port 10001",
"start": "npm run lite"
},
"author": "",
"license": "ISC",
"devDependencies": {
"lite-server": "^2.5.4"
}
}
4。安装网络服务器
在您的项目文件夹上打开的终端 window(Windows 中的命令提示符)中,运行 此命令:
npm install
这将安装 lite-server(在 package.json 中定义),一个在默认浏览器中加载 index.html 并在应用程序文件更改时自动刷新的静态服务器。
5.启动本地网络服务器!
(假设您的项目文件夹中有一个 index.html 文件)。
在同一终端中 window(Windows 中的命令提示符)运行 此命令:
npm start
请稍等,index.html 已加载并显示在由本地 Web 服务器提供服务的默认浏览器中!
lite-server 正在查看您的文件并在您对任何 html、js 或 css 文件进行更改后立即刷新页面。
如果您将 VS Code 配置为自动保存(菜单文件/自动保存),您会在键入时在浏览器中看到更改!
备注:
- 在您完成代码之前不要关闭命令行提示符
当天的应用程序
- 它在 http://localhost:10001 上打开,但您可以通过以下方式更改端口
编辑 package.json 文件。
就是这样。现在,在任何编码会话之前,只需键入 npm start 就可以开始了!
最初发布在 here 中 msdn
博客。
致谢作者:@Laurent Duveau
可能大多数人都能从上述答案中找到解决方案,但看到 none 如何为我工作 (vscode v1.34
) 我想我会分享我的经验。如果至少有一个人认为它有帮助,那么酷而不是浪费 post、amiirte?
无论如何,我的解决方案 (windows
) 是 a-top @noontz 的解决方案。他的配置对于旧版本的 vscode
可能已经足够了,但对于 1.34
就不行了(至少,我无法让它工作..)。
我们的配置 几乎 相同,除了一个 属性 —— 属性 是 group
属性。我不确定为什么,但如果没有这个,我的任务甚至不会出现在命令面板中。
所以。 windows
用户 运行 vscode 1.34
:
的工作 tasks.json
{
"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
在新的 chrome
选项卡中打开当前的 html
文件,没有麻烦。
简单。
打开扩展侧边栏 (Ctrl + Shift + X)
搜索 open in browser 并安装它
右键单击您的 html 文件,然后 select“在浏览器中打开”(Alt + B)
使用 URL 从提示符
打开自定义 Chrome
{
"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
属性替换为其他OS
- 将
${config:chrome.executable}
替换为您自定义的 chrome 位置,例如"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
- 将
${config:chrome.profileDir}
替换为您的客户 chrome 配置文件目录,例如
"C:/My/Data/chrome/profile"
或忽略它
- 如果你愿意,你可以保留上面的变量。为此,请在
settings.json
- user or workspace - 中添加以下条目,根据需要调整路径:
"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"
- 您可以重新使用这些变量,例如在
launch.json
中用于调试目的:"runtimeExecutable": "${config:chrome.executable}"
单击此左下 管理图标。单击 扩展程序 或快捷方式 Ctrl+Shift+X
然后用这个关键句在扩展中搜索在默认浏览器中打开。你会发现 this 扩展。对我来说更好。
现在右键单击 html
文件,您将看到 在默认浏览器中打开 或快捷方式 Ctrl+1
以查看 html
浏览器中的文件。
对于 Mac,将您的 tasks.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
}
}
]
}
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",
}
}
]
}
以下在 windows 10 ->
版本 1.53.2 中工作
- 在终端菜单中选择 运行 活动文件
- 它在默认边缘浏览器中执行了 html 文件
启动本地网络服务器!
(假设您的项目文件夹中有一个 index.html 文件)。
在同一终端中 window(Windows 中的命令提示符)运行 此命令:
npm 启动
VS Code 团队现在有一个名为“实时预览”的官方扩展
快速设置:
- 安装 Microsoft 的“实时预览”扩展程序。
- 从工作区打开一个html文件,当前工作区外的文件不起作用。
- 运行命令
> Live Preview: Show Preview (External Browser)
还有一个用于在内部浏览器中启动它的命令。您可能还需要从扩展设置中更改默认端口,以防它已在您的系统上使用。
文档:https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
发行说明:https://code.visualstudio.com/updates/v1_59#_live-preview
如何使用新的 Microsoft Visual Studio 代码在浏览器中查看我的 HTML 代码?
使用 Notepad++,您可以选择在浏览器中 运行。我怎样才能用 Visual Studio 代码做同样的事情?
CTRL+SHIFT+P
将调出命令面板。
当然,这取决于您 运行ning 的内容。在 ASP.net 应用程序中的示例,您可以输入:
>kestrel
然后打开您的网络浏览器并输入 localhost:(your port here)
。
如果您输入 >
,它将显示 show 和 运行 命令
或者在你使用 HTML 的情况下,我认为 F5
打开命令选项板后应该打开调试器。
来源:link
对于 Windows - 打开默认浏览器 - 在 VS Code v 1.1.0 上测试
打开特定文件(名称是硬编码的)或打开任何其他文件的答案。
步骤:
使用ctrl + shift + p(或F1) 打开命令面板。
键入
Tasks: Configure Task
或旧版本Configure Task Runner
。选择它将打开 tasks.json 文件。删除显示的脚本并替换为以下内容:{ "version": "0.1.0", "command": "explorer", "windows": { "command": "explorer.exe" }, "args": ["test.html"] }
记得将 tasks.json 文件的 "args" 部分更改为您的文件名。当您按 F5 时,这将始终打开该特定文件。
您也可以使用
["${file}"]
作为 "args" 的值,将此设置为打开您当时打开的任何文件。请注意$
在{...}
之外,因此["{$file}"]
不正确。保存文件。
切换回您的 html 文件(在本例中为 "text.html"),然后按 ctrl + shift + b 在网络浏览器中查看您的页面。
@InvisibleDev - 让这个在 mac 上工作尝试使用这个:
{
"version": "0.1.0",
"command": "Chrome",
"osx": {
"command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
},
"args": [
"${file}"
]
}
如果您已经打开 chrome,它将在新选项卡中启动您的 html 文件。
在 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回车
如果您想实时重新加载,可以使用 gulp-webserver,它将监视您的文件更改并重新加载页面,这样您就不必每次在页面上都按 F5:
操作方法如下:
打开命令提示符 (cmd) 并键入
npm 安装--save-devgulp-webserver
在 VS Code 中输入 Ctrl+Shift+P 并键入 Configure Task Runner。 Select 并按回车键。它将为您打开 tasks.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 并输入 "Run Task" 当你输入它时你会看到你的任务 "webserver" 被选中并按下 enter .
您的网络服务器现在将在您的默认浏览器中打开您的页面。现在,您对 HTML 或 CSS 页面所做的任何更改都将自动重新加载。
这是有关如何配置 'gulp-webserver' 实例端口以及要加载的页面的信息,...
您也可以 运行 您的任务,只需输入 Ctrl+P 并输入 task webserver
我的运行脚本看起来像:
{
"version": "0.1.0",
"command": "explorer",
"windows": {
"command": "explorer.exe"
},
"args": ["{$file}"]
}
当我在我的 index.html 文件中按下 ctrl shift b 时,它只是打开我的资源管理器
在linux中可以使用xdg-open
命令用默认浏览器打开文件:
{
"version": "0.1.0",
"linux": {
"command": "xdg-open"
},
"isShellCommand": true,
"showOutput": "never",
"args": ["${file}"]
}
这是 运行 在多个浏览器中 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}"]
}
]
}
请注意,我没有在 edge 的 args 中键入任何内容,因为 Edge 是我的默认浏览器,只是为其提供了文件名。
编辑:您也不需要 -incognito 或 -private-window...只有我喜欢私下查看 window
Ctrl + F1 将打开默认浏览器。或者,您可以按 Ctrl + shift + P 打开命令 window 和 select "View in Browser"。 html 代码必须保存在文件中(编辑器上未保存的代码 - 没有扩展名,不起作用)
对于 Mac - 在 Chrome 中打开 - 在 VS Code v 1.9.0
上测试- 使用Command + shift + p 打开命令面板。
输入 Configure Task Runner,第一次执行此操作时,VS Code 会为您提供向下滚动菜单,如果有 select "Other." 如果您已完成在此之前,VS Code 只会将您直接发送到 tasks.json.
一次在 tasks.json 文件中。删除显示的脚本并替换为以下内容:
{ "version": "0.1.0", "command": "Chrome", "osx": { "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" }, "args": ["${file}"] }
- 切换回 html 文件并按 Command + Shift + b 在 Chrome. 中查看您的页面
如果您正在 Mac 这个 tasks.json
文件:
{
"version": "0.1.0",
"command": "open",
"args": ["${file}"],
}
...就是在 Safari 中打开当前文件所需的全部,假设其扩展名为“.html”。
如上所述创建 tasks.json
并使用 ⌘+shift+b[= 调用它27=]。
如果您希望它在 Chrome 中打开,则:
{
"version": "0.1.0",
"command": "open",
"args": ["-a", "Chrome.app", "${file}"],
}
这将执行您想要的操作,如在应用程序已打开的情况下在新选项卡中打开。
您现在可以安装扩展程序 View In Browser。我在 windows 上用 chrome 测试了它,它正在工作。
vscode版本:1.10.2
这是 Chrome 中当前文档的 2.0.0 版本,带键盘快捷键:
tasks.json
{
"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}"
],
"problemMatcher": []
}
]
}
keybindings.json
:
{
"key": "ctrl+g",
"command": "workbench.action.tasks.runTask",
"args": "Chrome"
}
网络服务器上的运行:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
一键式解决方案只需从 Visual Studio 市场安装 open-in-browser 扩展。
最近在 www.lynda.com
的 visual studio 代码教程之一中发现了此功能按 Ctrl + K 然后按 M,它将打开“Select 语言模式”(或单击右下角那个笑脸前的 HTML),输入 markdown 和按回车
现在按 Ctrl + K,然后按 V,它将在附近的选项卡中打开您的 html。
Tadaaa!!!
现在 emmet 命令在我的 html 文件中无法在此模式下工作,所以我回到了原始状态(注意 - html 标签 tellisense 工作得很好)
要返回原始状态 - 按 Ctrl + K,然后按 M,select 自动检测。 emmet 命令开始工作。如果您对 html 只有观众感到满意,那么您就没有必要回到原来的状态。
想知道为什么 vscode 默认情况下没有 html 查看器选项,而它能够在 markdown 模式下显示 html 文件。
这是 Mac OSx 的 2.0.0 版本:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "echo",
"type": "shell",
"command": "echo Hello"
},
{
"label":"chrome",
"type":"process",
"command":"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
"args": [
"${file}"
]
}
]
}
VS Code 有一个 Live Server Extention 支持从状态栏单击启动。
部分功能:
- 从状态栏单击启动
- 实时重新加载
- 支持Chrome调试附件
我只是 re-posting 我在 msdn
博客中使用的步骤。它可能对社区有所帮助。
这将帮助您
使用 VS Code
设置名为 lite-server 的本地 Web 服务器,并指导您在 localhost
和 debug
中托管静态 html
文件 Javascript
代码。
1.安装 Node.js
如果还没有安装,获取它 here
它带有 npm(用于获取和管理您的开发库的包管理器)
2。为您的项目创建一个新文件夹
在您的驱动器中的某个位置,为您的网络应用程序创建一个新文件夹。
3。添加一个package.json文件到项目文件夹
然后copy/paste以下文字:
{
"name": "Demo",
"version": "1.0.0",
"description": "demo project.",
"scripts": {
"lite": "lite-server --port 10001",
"start": "npm run lite"
},
"author": "",
"license": "ISC",
"devDependencies": {
"lite-server": "^2.5.4"
}
}
4。安装网络服务器
在您的项目文件夹上打开的终端 window(Windows 中的命令提示符)中,运行 此命令:
npm install
这将安装 lite-server(在 package.json 中定义),一个在默认浏览器中加载 index.html 并在应用程序文件更改时自动刷新的静态服务器。
5.启动本地网络服务器!
(假设您的项目文件夹中有一个 index.html 文件)。
在同一终端中 window(Windows 中的命令提示符)运行 此命令:
npm start
请稍等,index.html 已加载并显示在由本地 Web 服务器提供服务的默认浏览器中!
lite-server 正在查看您的文件并在您对任何 html、js 或 css 文件进行更改后立即刷新页面。
如果您将 VS Code 配置为自动保存(菜单文件/自动保存),您会在键入时在浏览器中看到更改!
备注:
- 在您完成代码之前不要关闭命令行提示符 当天的应用程序
- 它在 http://localhost:10001 上打开,但您可以通过以下方式更改端口 编辑 package.json 文件。
就是这样。现在,在任何编码会话之前,只需键入 npm start 就可以开始了!
最初发布在 here 中 msdn
博客。
致谢作者:@Laurent Duveau
可能大多数人都能从上述答案中找到解决方案,但看到 none 如何为我工作 (vscode v1.34
) 我想我会分享我的经验。如果至少有一个人认为它有帮助,那么酷而不是浪费 post、amiirte?
无论如何,我的解决方案 (windows
) 是 a-top @noontz 的解决方案。他的配置对于旧版本的 vscode
可能已经足够了,但对于 1.34
就不行了(至少,我无法让它工作..)。
我们的配置 几乎 相同,除了一个 属性 —— 属性 是 group
属性。我不确定为什么,但如果没有这个,我的任务甚至不会出现在命令面板中。
所以。 windows
用户 运行 vscode 1.34
:
tasks.json
{
"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
在新的 chrome
选项卡中打开当前的 html
文件,没有麻烦。
简单。
打开扩展侧边栏 (Ctrl + Shift + X)
搜索 open in browser 并安装它
右键单击您的 html 文件,然后 select“在浏览器中打开”(Alt + B)
使用 URL 从提示符
打开自定义 Chrome{
"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
属性替换为其他OS - 将
${config:chrome.executable}
替换为您自定义的 chrome 位置,例如"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
- 将
${config:chrome.profileDir}
替换为您的客户 chrome 配置文件目录,例如"C:/My/Data/chrome/profile"
或忽略它 - 如果你愿意,你可以保留上面的变量。为此,请在
settings.json
- user or workspace - 中添加以下条目,根据需要调整路径:
"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"
- 您可以重新使用这些变量,例如在
launch.json
中用于调试目的:"runtimeExecutable": "${config:chrome.executable}"
单击此左下 管理图标。单击 扩展程序 或快捷方式 Ctrl+Shift+X
然后用这个关键句在扩展中搜索在默认浏览器中打开。你会发现 this 扩展。对我来说更好。
现在右键单击 html
文件,您将看到 在默认浏览器中打开 或快捷方式 Ctrl+1
以查看 html
浏览器中的文件。
对于 Mac,将您的 tasks.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
}
}
]
}
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",
}
}
]
}
以下在 windows 10 ->
版本 1.53.2 中工作- 在终端菜单中选择 运行 活动文件
- 它在默认边缘浏览器中执行了 html 文件
启动本地网络服务器!
(假设您的项目文件夹中有一个 index.html 文件)。
在同一终端中 window(Windows 中的命令提示符)运行 此命令:
npm 启动
VS Code 团队现在有一个名为“实时预览”的官方扩展
快速设置:
- 安装 Microsoft 的“实时预览”扩展程序。
- 从工作区打开一个html文件,当前工作区外的文件不起作用。
- 运行命令
> Live Preview: Show Preview (External Browser)
还有一个用于在内部浏览器中启动它的命令。您可能还需要从扩展设置中更改默认端口,以防它已在您的系统上使用。
文档:https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
发行说明:https://code.visualstudio.com/updates/v1_59#_live-preview