如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?
使用notepad++,您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?
如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?
使用notepad++,您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?
当前回答
下面是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}"
]
}
]
}
其他回答
在linux下,可以使用xdg-open命令在默认浏览器下打开文件:
{
"version": "0.1.0",
"linux": {
"command": "xdg-open"
},
"isShellCommand": true,
"showOutput": "never",
"args": ["${file}"]
}
Windows -打开默认浏览器-在VS Code v 1.1.0上测试
回答既打开一个特定的文件(名称是硬编码)或打开任何其他文件。
步骤:
Use ctrl + shift + p (or F1) to open the Command Palette. Type in Tasks: Configure Task or on older versions Configure Task Runner. Selecting it will open the tasks.json file. Delete the script displayed and replace it by the following: { "version": "0.1.0", "command": "explorer", "windows": { "command": "explorer.exe" }, "args": ["test.html"] } Remember to change the "args" section of the tasks.json file to the name of your file. This will always open that specific file when you hit F5. You may also set the this to open whichever file you have open at the time by using ["${file}"] as the value for "args". Note that the $ goes outside the {...}, so ["{$file}"] is incorrect. Save the file. Switch back to your html file (in this example it's "text.html"), and press ctrl + shift + b to view your page in your Web Browser.
打开扩展工具栏(Ctrl + Shift + X) 在浏览器中搜索open并安装 右键点击你的html文件,选择“在浏览器中打开”(Alt + B)
如果你想要实时重载,你可以使用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来运行你的任务
我只是重新发布我从msdn博客使用的步骤。这可能对社区有所帮助。
这将帮助你 使用VS Code设置一个本地web服务器,称为lite-server,并指导你在localhost中托管静态html文件和调试Javascript代码。
1. 安装node . js
如果还没有安装,请从这里获取
它带有npm(用于获取和管理开发库的包管理器)
2. 为项目创建一个新文件夹
在你的驱动器的某个地方,为你的web应用程序创建一个新文件夹。
3.添加包。Json文件到项目文件夹
然后复制/粘贴以下文本:
{
"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. 安装web服务器
在项目文件夹上打开的终端窗口(Windows中的命令提示符)中,运行以下命令:
npm install
这将安装lite-server(在package.json中定义),这是一个静态服务器,它在默认浏览器中加载index.html,并在应用程序文件更改时自动刷新它。
5. 启动本地web服务器!
(假设在项目文件夹中有index.html文件)。
在同一终端窗口(Windows中的命令提示符)运行以下命令:
npm start
等待一秒钟,index.html被加载并显示在您本地web服务器提供的默认浏览器中!
Lite-server正在监视您的文件,并在您对任何html, js或CSS文件进行更改时刷新页面。
如果你将VS Code配置为自动保存(菜单文件/自动保存),你会在浏览器中看到你输入的变化!
注:
不要关闭命令行提示符,直到您在 每日应用 它在http://localhost:10001上打开,但是您可以通过更改端口 编辑包。json文件。
就是这样。现在,在任何编码会话之前,只需输入npm start,你就可以开始了!
最初发表于msdn博客。 致谢作者:@Laurent Duveau