开发工具|Visual Studio Code 插件 Live Server 安装与配置完全指南

Visual Studio Code 插件 Live Server 安装与配置完全指南

vscode-live-server Launch a development local Server with live reload feature for static & dynamic pages. 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-live-server

项目基础介绍及主要编程语言

Live Server 是一个广受欢迎的Visual Studio Code插件，由 Ritwick Dey 开发，旨在为前端开发者提供便捷的本地开发服务器，并支持实时页面重载功能。这个工具特别适合静态和动态网页的快速迭代开发。项目主要使用 TypeScript 编写，确保了代码的类型安全和可维护性。

关键技术和框架

VSCode Extension API: 利用Visual Studio Code的扩展API来集成到编辑器中。
** Livereload.js**: 实现浏览器自动刷新的技术核心，监测文件变动并通知浏览器刷新。
Chokidar: 用于监视文件系统变化的库，高效地检测到任何更新。
Express: 虽然项目内部不直接使用Express作为Web服务器，但其设计理念借鉴了轻量级服务架构。

准备工作与详细安装步骤

步骤一：安装Visual Studio Code

首先，确保您的电脑上安装有Visual Studio Code。如果没有，请访问官方网站下载并安装。

步骤二：获取Live Server插件

打开Visual Studio Code。
点击左侧边栏中的 Extensions 图标（或按下 Ctrl + Shift + X 快捷键）进入扩展市场。
在搜索框中输入“Live Server”，选择由 Ritwick Dey 提供的那个（图标是绿色的地球）。
单击 “Install” 安装插件。等待安装完成。

步骤三：配置Live Server

自动启动设置（可选）

打开设置界面（可以通过点击左下角齿轮图标，选择“首选项: 设置”或者按 Ctrl + , 快捷键）。
在设置搜索框中输入“liveserver”以过滤出相关的设置选项。
可以根据需要勾选如 “Live Server > Settings: Workspace > Open In Browser On Save” 来使保存时自动在浏览器中打开页面。

高级配置

若需自定义端口、默认浏览器等，您可以在 .vscode/settings.json 文件中添加以下配置：


{
    "liveServer.settings.CustomPort": 8081, // 自定义端口号
    "liveServer.settings.NoBrowser": false, // 是否不在保存后自动打开浏览器
    "liveServer.settings.DefaultBrowser": "google chrome", // 指定默认浏览器
    "liveServer.settingsrowserNotify": true, // 通知当浏览器被打开
}

如果不存在 .vscode/settings.json 文件，您可以在设置界面点击右上角的“{}”按钮新建它。

步骤四：启动Live Server

打开您想要预览的HTML文件。
简单方法：在Status Bar底部会有一个 “Go Live” 的按钮，点击即可启动服务器并打开浏览器。
或者，右键点击任何HTML文件，在弹出菜单中选择 “Open with Live Server”。
对于快捷键爱好者，可以使用默认的 Alt+L 后跟 Alt+O 来启动服务器，用 Alt+L 后跟 C 来停止。

至此，您的Live Server已经成功搭建并运行，可以愉快地进行网页的实时开发和预览了！

通过以上步骤，即便是初学者也能轻松地配置并使用Live Server，极大地提升前端开发效率。记得在开发过程中，利用好Live Server的强大特性，让网页设计和开发变得更为流畅。