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插件

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

步骤三：配置Live Server

自动启动设置（可选）

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

高级配置

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

 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1">