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

相关推荐
飞Link15 小时前
Windows 环境下 LaTeX 的安装配置教程
windows·vscode
IOT那些事儿18 小时前
VSCode类软件(Trae、Cursor)占用C盘问题
ide·vscode·编辑器
雍凉明月夜21 小时前
c++ 精学笔记记录Ⅱ
开发语言·c++·笔记·vscode
Wallace Zhang1 天前
PySide6 + QML - Charts07 - 使用checkbox选择需要显示的曲线
vscode·pyside6·qml
我命由我123451 天前
VSCode - VSCode 插件 Prettier Tab 键缩进设置
前端·ide·vscode·学习·职场和发展·编辑器·学习方法
JosieBook1 天前
【AI】在 VSCode 中薅大模型羊毛?我用 Kilo Code + AI Ping 实现免费智能编程
人工智能·vscode
程序员小寒1 天前
开发提效利器 - 用好Snippets
前端·javascript·vscode
Lj2_jOker1 天前
Window vscode 使用cmake编译jpeg-turbo for android
android·ide·vscode
fruge1 天前
AI Ping 免费领算力,VsCode结合Roo Code实现免费编程
ide·人工智能·vscode
AndreasEmil1 天前
JavaSE - 继承
java·开发语言·ide·vscode·intellij-idea·idea