如何使用新的Microsoft Visual Studio code在浏览器中查看我的HTML代码?
使用notepad++，您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?
当前回答
启动本地web服务器!
(假设在项目文件夹中有index.html文件)。
在同一终端窗口(Windows中的命令提示符)运行以下命令:
npm开始
其他回答
您现在可以在浏览器中安装一个扩展视图。我在chrome的windows上测试了它，它是工作的。
Vscode版本:1.10.2
以下在windows 10 ->的1.53.2版本中运行
在终端菜单中选择运行活动文件 它在默认的边缘浏览器中执行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",
}
}
]
}
最近在www.lynda.com的一个visual studio代码教程中发现了这个功能
按Ctrl + K + M，它将打开“选择语言模式”(或点击右下角的HTML前面的笑脸)，输入markdown并按enter
现在按Ctrl + K后面跟着V，它将打开你的html在附近的标签。
Tadaaa ! !
现在emmet命令在我的html文件中不能在这种模式下工作，所以我回到了原始状态(注- html标签tellisense工作完美)
—按“Ctrl + K + M”，选择“auto-detect”。埃米特的命令开始生效。如果你只喜欢html查看器，那么没有必要让你回到原来的状态。
不知道为什么vscode没有html查看器选项默认情况下，当它能够显示html文件在markdown模式。
我只是重新发布我从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
