vs编辑静态html文件,如何使用Visual Studio Code在浏览器中查看HTML文件

我只是重新发布我在msdn博客中使用的步骤。它可以帮助社区。

这将帮助您设置被称为本地Web服务器精简版服务器用VS Code，并引导你到你的主机静态html的文件localhost和debug你的Javascript代码。

1.安装Node.js

如果尚未安装，请在此处获取

它带有npm(用于获取和管理您的开发库的软件包管理器)

2.为您的项目创建一个新文件夹

在驱动器中的某个位置，为Web应用程序创建一个新文件夹。

3.将package.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":"^1.3.1"}}

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上打开，但是您可以通过编辑package.json文件来更改端口。

而已。现在，在任何编码会话之前，只需键入npm start，您就可以开始了！

最初张贴在这里的msdn博客。学分归作者：@Laurent Duveau