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的端口,否则可能需要更改端口号。

相关推荐
CAE虚拟与现实3 天前
VSCode中的下载VSIX是指什么?
ide·vscode·编辑器
路边闲人23 天前
vscode启用GEMINI CODE ASSIST插件
ide·vscode·gemini
CAE虚拟与现实3 天前
VSCode官方汉化包
ide·vscode·编辑器·vscode汉化
CAE虚拟与现实3 天前
VSCode创建Python项目和运行py文件
ide·vscode·编辑器
Stardep3 天前
ssh远程连接服务器到vscode上“连接失败”
服务器·vscode·ssh
superior tigre4 天前
1.linux环境配置+ssh远程连接vscode调试(问题:无法联网,无法共享粘贴板,不满足运行vscode服务器的先决条件)
linux·服务器·vscode
老黄编程4 天前
VSCode 的百度 AI编程插件
ide·vscode·ai编程
老黄编程4 天前
VSCode AI编程插件
ide·vscode·ai编程
Naiva4 天前
ESP32-C3 入门09:基于 ESP-IDF + LVGL + ST7789 的 1.54寸 WiFi 时钟(SquareLine Studio 移植)
ide·笔记·vscode
return(b,a%b);4 天前
VSCode 远程开发连接(glibc<2.28)
ide·vscode·编辑器