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

苏琦言Rory

于 2024-09-13 22:42:33 发布

阅读量150

点赞数 2

本文链接：https://blog.csdn.net/gitblog_07464/article/details/142234037

版权

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 文件，您可以在设置界面点击右上角的“{}”按钮新建它。