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

相关推荐
学嵌入式的小杨同学36 分钟前
从零打造 Linux 终端 MP3 播放器!用 C 语言实现音乐自由
linux·c语言·开发语言·前端·vscode·ci/cd·vim
badfl4 小时前
VSCode Claude Code插件配置教程:使用、配置中转API、常见问题
人工智能·vscode·ai
aidou13149 小时前
Visual Studio Code(VS Code)安装步骤
vscode·npm·node.js·环境变量
学嵌入式的小杨同学11 小时前
【Linux 封神之路】进程进阶实战:fork/vfork/exec 函数族 + 作业实现(含僵尸进程解决方案)
linux·开发语言·vscode·嵌入式硬件·vim·软件工程·ux
一路向北North15 小时前
vscode 安装插件非常慢
ide·vscode·编辑器
小乔的编程内容分享站16 小时前
C语言函数的声明和定义(文章包括当VScode中含多个.c文件且含.h文件如何同时编译
c语言·开发语言·vscode
怣疯knight16 小时前
vscode的md文件显示memaid图
vscode
小乔的编程内容分享站1 天前
记录使用VSCode调试含scanf()的C语言程序出现的两个问题
c语言·开发语言·笔记·vscode
mancy_1212121 天前
复古C语言代码复活!——以121+hello.c为例摘要
c语言·vscode·gitee·visual studio·新人首发·turbo c
qq_397562312 天前
使用vscode , 开发keil单片机工程 . (为了使用ai助手)
ide·vscode·编辑器