如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?
使用notepad++,您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?
如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?
使用notepad++,您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?
当前回答
我只是重新发布我从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
其他回答
还有另一个预览HTML文件的扩展,叫做Live Preview。我喜欢它胜过这个答案中链接的“活动服务器”的几个原因。
无需启动服务器,预览图标集成到VS代码中(与标记预览相同) 预览在VS代码中以分屏视图打开(尽管在浏览器中打开的选项是可用的) 由微软开发(开发VS代码的同一家公司) 目前“实时预览”在“预览”中,只需要完善:-)
在linux下,可以使用xdg-open命令在默认浏览器下打开文件:
{
"version": "0.1.0",
"linux": {
"command": "xdg-open"
},
"isShellCommand": true,
"showOutput": "never",
"args": ["${file}"]
}
可能大多数人都能从上面的答案中找到一个解决方案,但看到没有一个对我有效(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文件:
{
"version": "0.1.0",
"command": "open",
"args": ["${file}"],
}
...在Safari中打开当前文件(假设扩展名为“.html”)所需要的全部内容。
创建任务。Json,并使用⌘+shift+b调用它。
如果你想在Chrome中打开它,那么:
{
"version": "0.1.0",
"command": "open",
"args": ["-a", "Chrome.app", "${file}"],
}
这将做你想要的,如在打开一个新的标签,如果应用程序已经打开。
我只是重新发布我从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