安装完其实就可以直接使用了，一般来说不必手动配置，点击右下角的go live按钮就可以运行。默认端口是5500
好的，为你详细说明如何在 VS Code 中配置 Live Server 插件。这是一个非常有用的插件，我们不仅会讲如何安装和使用，还会介绍如何根据你的偏好进行个性化配置。
第一步：安装 Live Server
如果还没安装，这是第一步。
- 打开 VS Code。
- 点击左侧边栏的 扩展(Extensions) 图标（四个方块的图标）。
- 在搜索框中输入
Live Server。 - 找到由 Ritwick Dey 开发的那个插件，点击 Install (安装)。
第二步：基本使用方法
安装成功后，VS Code 右下角的状态栏会出现一个 Go Live 的按钮。
你有两种方式启动它：
- 点击
Go Live按钮：直接点击状态栏的Go Live按钮，它会自动为你当前的 HTML 文件启动一个服务器。 - 右键菜单：在你的 HTML 文件上右键，在弹出的菜单中选择
Open with Live Server。
启动后，它会自动用你的默认浏览器打开页面。现在，每当你修改并保存 HTML、CSS 或 JavaScript 文件时，浏览器里的页面都会自动刷新，无需手动操作。
要关闭服务器，只需再次点击右下角那个已经变为显示端口号（如 Port: 5500）的按钮即可。
第三步：个性化配置 (核心部分)
现在我们来回答你的问题：如何“配置”它。Live Server 的所有配置都在 VS Code 的设置 (settings.json) 文件中进行。
如何打开 settings.json？
- 使用快捷键
Ctrl + Shift + P(macOS:Cmd + Shift + P) 打开命令面板。 - 输入
settings.json，然后选择首选项: 打开用户设置 (JSON)(Preferences: Open User Settings (JSON))。 - 这会打开一个 JSON 文件，你可以在这里添加或修改配置项。
下面是一些最常用的配置项，你可以把它们复制到你的 settings.json 文件的大括号 {} 内。
常用配置示例
{// 在这里添加你的 Live Server 配置"liveServer.settings.port": 8080, // 设置服务器端口号，默认为 5500。如果 5500 端口被占用，可以改成其他的，比如 8080"liveServer.settings.root": "/src", // 设置服务器的根目录。默认是当前打开的文件夹。如果你的入口文件在 src 目录下，可以这样设置"liveServer.settings.CustomBrowser": "chrome", // 设置要使用的浏览器。'chrome', 'firefox', 'safari' 等。在 Windows 上是 'chrome'，在 macOS 上可能是 'google chrome'"liveServer.settings.NoBrowser": true, // 设置为 true 后，启动服务器时不会自动打开浏览器，你需要手动输入地址（如 http://127.0.0.1:8080）"liveServer.settings.fullReload": true, // 设为 true 时，每次保存都会强制整个页面重新加载，而不是热重载（hot reload）"liveServer.settings.wait": 100, // 保存文件后，等待多少毫秒再刷新浏览器。单位是毫秒// 如果你想使用 HTTPS"liveServer.settings.https": {"enable": false, // 设置为 true 来启用 https"key": "", // https key 的路径"cert": "" // https cert 的路径},// 其他 VS Code 设置..."editor.fontSize": 16
}
如何使用上面的示例？
- 打开你的
settings.json文件。 - 如果文件是空的（只有一个
{}），直接把"liveServer.settings.port": 8080,这样的单行配置复制进去。 - 如果文件里已经有其他配置了，确保在每一行配置的末尾加上逗号
,(最后一行除外)。
例如，只修改端口和浏览器：
{"editor.fontSize": 14,"workbench.colorTheme": "Default Dark+",// --- 在这里添加你的 Live Server 配置 ---"liveServer.settings.port": 9000,"liveServer.settings.CustomBrowser": "firefox"
}
修改并保存 settings.json 文件后，配置会立即生效。下次你再启动 Live Server 时，它就会使用新的配置了（比如，用 Firefox 在 9000 端口打开页面）。
第四步：故障排查
如果你遇到 Live Server 无法正常工作的情况，可以检查以下几点：
- 端口被占用：最常见的问题。如果终端提示 “Port is already in use”，就按照上面的方法，在
settings.json里换一个端口号（比如5501、8888等）。 - 无法自动打开浏览器：检查
liveServer.settings.CustomBrowser的值是否正确。- Windows: 可能是
chrome,firefox。 - macOS: 可能是
google chrome,firefox。 - 如果不确定，可以先将这项配置删除，让它使用系统默认浏览器。
- Windows: 可能是
- HTML 文件结构不完整：Live Server 需要一个标准的 HTML 结构才能正确注入刷新脚本。请确保你的 HTML 文件至少包含
<html>,<head>, 和<body>标签。 - 防火墙问题：在极少数情况下，操作系统的防火墙可能会阻止 Live Server 的网络连接。你可以检查防火墙设置，允许 VS Code 或 Node.js 的网络访问。
总结
配置 Live Server 非常简单，核心就是修改 VS Code 的 settings.json 文件。最常用的配置是修改端口 (port) 和 指定浏览器 (CustomBrowser)。希望这份指南能帮助你更好地使用这个强大的工具！
