VSCode Live Server 插件安装和使用

VSCode Live Server是一个由Ritwick Dey开发的Visual Studio Code扩展插件,它提供了一个带有实时重载功能的本地开发服务器。在VSCode中安装和使用Live Server插件进行实时预览和调试Web应用程序。这将大大提高前端开发效率,使网页设计和开发变得更为流畅。

1、安装 Live Server 插件

2、打开HTML项目

在VSCode中打开包含HTML文件的工作区。

3、启动Live Server

有2种方式可以启动Live Server:

  • 点击右下角状态栏中的"Go Live"图标。
  • 右键点击HTML文件,在弹出菜单中选择"Open with Live Server"。

4、修改端口

打开 live server 设置

找到settings: port,点击 "Edit in settings.json" 修改

修改端口配置,这里端口修改成8080

bash 复制代码
"liveServer.settings.port": 8080

5、访问页面

Live Server启动后,在浏览器中输入http://localhost:8080来访问页面。

在编辑HTML、CSS或JavaScript文件时,保存文件后,页面会自动刷新以展示最新的内容。

6、注意事项

端口冲突

确保没有其他应用占用了Live Server的端口,否则可能需要更改端口号。

相关推荐
JohnnyCS1 天前
VSCode 自动换行设置完全指南
vscode·编辑器
小龙报1 天前
【算法通关指南:算法基础篇】二分算法: 1.A-B 数对 2.烦恼的高考志愿
c语言·开发语言·数据结构·c++·vscode·算法·二分
lightqjx1 天前
VS Code 的安装与如何搭建C/C++开发环境?
vscode·c/c++开发工具·vs code安装教程·vs code的使用
bu_shuo1 天前
Windows电脑使用VSCode远程控制Windows主机方法记录
windows·vscode·ssh·powershell
zhensherlock1 天前
Protocol Launcher 系列:一键唤起 Windsurf 智能 IDE
javascript·ide·vscode·ai·typescript·github·ai编程
喵手1 天前
Python爬虫实战:VS Code 扩展市场热门榜单“脱壳”实战!
vscode·爬虫·python·爬虫实战·零基础python爬虫教学·vscode扩展市场热门榜单·vs热门榜单数据采集
zhensherlock1 天前
Protocol Launcher 系列:一键唤起 VSCodium 智能 IDE
javascript·ide·vscode·typescript·开源·编辑器·github
FreeFly辉1 天前
VScode搭建javaDemo
java·vscode
lanhuazui101 天前
vscode打不开终端窗口
ide·vscode·编辑器
蒙塔基的钢蛋儿1 天前
使用STM32CUEBEIDE/S32DS 开发时,生成compile_commands.json 方便VSCODE智能提示
vscode·stm32·单片机·json