当前位置: 首页 > article >正文

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

"liveServer.settings.port": 8080

5、访问页面

Live Server启动后,在浏览器中输入http://localhost:8080来访问页面。
在编辑HTML、CSS或JavaScript文件时,保存文件后,页面会自动刷新以展示最新的内容。

6、注意事项

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


http://www.kler.cn/a/473181.html

相关文章:

  • 日语IT用语笔记
  • 00000008_C并发编程与多线程
  • Flink源码解析之:Flink on k8s 客户端提交任务源码分析
  • 用OpenCV实现UVC视频分屏
  • 联邦学习中的LoRA:FedLoRA
  • ProtonBase 荣获 Datafun “数智技术最佳探索奖”
  • HTTPS 原理详解
  • [Linux]生产消费者模型
  • 概率论常用的分布公式
  • Monaco Editor 系列报错修复:webpack-cli已经下载了但是还报错
  • 用JavaScript和python实现简单四则运算出题机
  • 如何在Jupyter中快速切换Anaconda里不同的虚拟环境
  • HQChart使用教程30-K线图如何对接第3方数据44-DRAWPIE数据结构
  • maven依赖的配置和排除依赖
  • 【Vim Masterclass 笔记08】第 6 章:Vim 中的文本变换及替换操作 + S06L20:文本的插入、变更、替换,以及合并操作
  • Ruby语言的并发编程
  • 2025-1-7-sklearn学习(33)数据集转换-特征提取 我不去想未来是平坦还是泥泞,只要热爱生命,一切 都在意料之中。
  • 【STM32+QT项目】基于STM32与QT的智慧粮仓环境监测与管理系统设计(完整工程资料源码)
  • 使用wav2vec 2.0进行音位分类任务的研究总结
  • HunyuanVideo: A Systematic Framework For LargeVideo Generative Models 论文解读
  • 网络基础1 http1.0 1.1 http/2的演进史
  • 【Uniapp-Vue3】创建自定义页面模板
  • C++语言的计算机基础
  • 【LeetCode】307. 区域和检索 - 数组可修改
  • GPT解释联合训练中的颜色映射概念
  • 设计模式学习笔记——结构型模式