我只是重新发布我从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

如果你想要实时重载，你可以使用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来运行你的任务

最近在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模式。

一键解决方案，只需从Visual Studio市场安装开放的浏览器扩展。

下面是如何在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…只有我，我喜欢在私人窗口看

Live Preview扩展刚刚添加了(在Insiders Build now和稳定2023年2月初)改变打开默认浏览器的能力(当你选择在外部浏览器中打开它，而不是在vscode中的另一个选项卡中打开它)。参见添加选项以选择默认外部浏览器。

背景是

Live Preview: Custom External Browser
livePreview.customExternalBrowser

选项:Edge、Chrome、Firefox、无

没有一个浏览器会使用您在操作系统中设置的默认浏览器。新的设置允许您覆盖默认设置与另一个浏览器的目的Live预览扩展打开外部浏览器，通过命令:

Live Preview: Show Preview (External Browser)