【vscode】 使用 【Live Server】插件 展示静态网站，自动刷新

在前端开发过程中，实时预览和自动刷新是极为重要的功能，它们能帮助开发者更高效地调试代码，提升开发体验。如果你是使用 Visual Studio Code (VS Code) 作为开发环境的前端开发者，那么你可能已经听说过 Live Server 插件。它是一个简单而强大的工具，能够让你在本地开发时实时查看 HTML、CSS 和 JavaScript 文件的效果，自动刷新浏览器页面，极大地提升开发效率。

在这篇博客中，我们将详细介绍 Live Server 插件的功能、安装和使用方法，帮助你更好地利用它进行前端开发。

什么是 Live Server？

Live Server 是一个 Visual Studio Code 插件，可以启动一个本地的开发服务器，用于自动加载和实时预览你正在编辑的网页。它支持 HTML、CSS、JavaScript 文件以及其他前端资源。当你在编辑器中修改文件并保存时，Live Server 会自动刷新浏览器页面，立即显示出最新的效果。

Live Server 的主要作用是帮助开发者避免频繁手动刷新浏览器，简化了前端开发过程中调试和查看效果的繁琐步骤。这个插件适用于静态网页开发、前端框架（如 React、Vue 等）开发，以及简单的 HTML、CSS、JavaScript 项目。

Live Server 插件的主要功能

1. 自动刷新浏览器
   每当你在 VS Code 中保存 HTML、CSS 或 JavaScript 文件时，Live Server 会自动刷新浏览器并展示最新的更改。这节省了开发者手动刷新浏览器的时间，并且可以即时查看页面效果。

2. 实时预览
   你可以在 VS Code 中编辑代码的同时，立即在浏览器中查看效果。对于前端开发者来说，这使得调试过程变得更加直观和高效，特别是在修改 CSS 或调整布局时。

3. 支持热重载（Hot Reload）
   热重载是 Live Server 的一项非常实用的功能，它确保了当你保存文件时，浏览器页面会即时反映出更改。这不仅仅局限于 HTML 文件，CSS 和 JavaScript 文件的更改同样会触发页面更新，避免了开发过程中的手动刷新。

4. 易于配置和使用
   Live Server 插件易于安装和使用，几乎不需要任何额外的配置。你只需要在 VS Code 中点击一个按钮，或者通过右键菜单启动服务器，它就会自动为你创建一个本地开发环境。

5. 支持多种文件类型
   Live Server 不仅仅支持 HTML 文件，它同样支持 CSS、JavaScript 等文件类型。如果你正在开发一个包含多个前端资源的项目，Live Server 也能够很好地工作。

如何安装和使用 Live Server

安装步骤

1. 打开 Visual Studio Code 编辑器，点击左侧的扩展图标（或者按 Ctrl+Shift+X 快捷键）进入扩展市场。
2. 在搜索框中输入 "Live Server"。
3. 点击 Install 按钮安装 Live Server 插件。
4. 安装完成后，你会看到右下角出现一个 Go Live 的按钮，表示插件已经成功安装并准备使用。

启动 Live Server

1. 在 VS Code 中打开你需要查看的 HTML 文件。
2. 点击右下角的 Go Live 按钮，Live Server 会启动并在浏览器中打开当前文件。
3. 或者，你可以右键点击 HTML 文件并选择 Open with Live Server 来启动。

启动后，Live Server 会自动为你创建一个本地开发服务器，并在浏览器中展示页面。当你对 HTML、CSS 或 JavaScript 文件做出修改并保存时，浏览器页面会自动刷新并显示最新的内容。

配置 Live Server

虽然 Live Server 默认设置已经能满足大部分开发需求，但你也可以根据项目需要对它进行一些个性化配置。以下是一些常用的配置项：

1. 自定义端口号
   你可以在 VS Code 的设置中自定义 Live Server 的端口号，避免与其他应用程序发生冲突。例如，你可以在 settings.json 文件中添加以下内容：

   "liveServer.settings.port": 5500

2. 忽略文件夹或文件
   有时你可能希望 Live Server 不刷新某些不需要监控的文件或文件夹，比如 node_modules 或 .git 文件夹。你可以通过设置 liveServer.settings.ignoreFiles 来忽略这些文件：

   "liveServer.settings.ignoreFiles": [ "**/node_modules/**", "**/.git/**" ]

3. 设置默认浏览器
   如果你希望使用特定的浏览器来查看页面，可以在设置中指定浏览器路径。例如：

"liveServer.settings.Browser": "chrome"

1. 设置根目录
   如果你的项目有特定的根目录，或者你希望从某个子目录启动服务器，可以通过设置 liveServer.settings.root 来指定根目录。例如：

   "liveServer.settings.root": "/public"

Live Server 的使用场景

1. 静态网页开发
   对于简单的静态网站开发，Live Server 是一个非常方便的工具。你可以在本地实时查看修改效果，快速调试和调整页面内容。

2. 前端框架开发
   即使是使用现代前端框架（如 React、Vue 或 Angular）时，Live Server 也能够帮助你在开发过程中快速预览 HTML、CSS 和 JavaScript 文件。当然，如果你使用的是 Webpack 等工具链，这时 Live Server 的热重载功能可以与你的开发环境完美结合。

3. 教育和学习
   对于前端开发的初学者来说，Live Server 提供了一个非常简便的方式来查看代码效果，帮助他们更直观地理解前端技术的工作原理。

为什么选择 Live Server？

1. 提高开发效率
   Live Server 能够减少频繁切换浏览器和手动刷新页面的麻烦。每当你保存文件时，它会自动刷新浏览器，确保你能即时看到代码变更后的效果。

2. 简洁且强大
   与一些复杂的开发服务器相比，Live Server 的安装和使用都非常简单。它开箱即用，不需要额外的配置，就能为你提供一个高效的开发环境。

3. 免费且开源
   Live Server 是一个开源插件，你可以免费使用它来提升开发效率。同时，作为一个开源项目，它也得到了开发者社区的广泛支持和维护。