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

相关推荐
coderYYY6 小时前
VSCode终端启动报错
前端·ide·vscode·npm·编辑器
qinaoaini11 小时前
[golang][MAC]Go环境搭建+VsCode配置
vscode·macos·golang
风静如云1 天前
VSCode:避免打开新文件时会在标签页覆盖旧文件
vscode
春日见2 天前
如何查看我一共commit了多少个,是哪几个,如何回退到某一个版本
vscode·算法·docker·容器·自动驾驶
西柚云2 天前
告别命令行!在VSCode中直接使用Claude Code编程
服务器·ide·vscode·编辑器·claude
___波子 Pro Max.2 天前
解决vscode code命令找不到问题
vscode
汽车软件工程师0012 天前
vscode使用ctrl+shift +F无法搜索此变量,怎么破解?
ide·vscode·编辑器
小坏坏的大世界3 天前
VSCode 配置 ROS2 Launch 调试环境(Attach 方式)
ide·vscode·编辑器
纯.Pure_Jin(g)3 天前
【Python练习四】Python 算法与进阶特性实战:数组、序列化与位运算专项练习(3道经典练习带你巩固基础——看完包会)
开发语言·vscode·python
云小逸3 天前
【Vscode插件开发教程】VSCode插件开发入门指南:从C++开发者的视角
c++·ide·vscode