VSCode Live Server 插件安装和使用

news/2025/1/12 15:03:14/

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.ppmy.cn/news/1562540.html

相关文章

rabbitmq的三个交换机及简单使用

提前说一下,创建队列,交换机,绑定交换机和队列都是在生产者。消费者只负责监听就行了,不用配其他的。 完成这个场景需要两个服务哦。 1直连交换机-生产者的代码。 在配置类中创建队列,交换机,绑定交换机…

如何轻松反转C# List<T>中的元素顺序

在C#中&#xff0c;有多种方法可以反转 List<T> 的元素顺序。以下是几种常见的方法&#xff1a; 方法一&#xff1a;使用 List<T>.Reverse 方法 List<T> 类提供了一个内置的 Reverse 方法&#xff0c;可以就地反转列表中的元素顺序。 using System; using…

elasticsearch常见故障汇总

es的入库突然出现异常&#xff0c;大量超时 查看集群状态&#xff0c;状态为红色 GET _cluster/health 具体查看&#xff0c;实体&#xff0c;看看是那些索引状态异常&#xff0c;看到wb_info_2025-01-08索引状态异常 GET _cat/indices?v 注&#xff1a;其他上面的步骤可以在…

5种IO模型

目录 一、认识IO二、5种IO模型三、非阻塞IO代码 一、认识IO 什么是IO&#xff1f; Input(输入)和Output(输出)。 冯诺依曼体系结构中&#xff0c;数据从输入设备拷贝到内存&#xff0c;经过处理后&#xff0c;再从内存拷贝到输出设备。现实情况中&#xff0c;数据并不是那么流…

pandas与sql对应关系【帮助sql使用者快速上手pandas】

本页旨在提供一些如何使用pandas执行各种SQL操作的示例&#xff0c;来帮助SQL使用者快速上手使用pandas。 目录 SQL语法一、选择SELECT1、选择2、添加计算列 二、连接JOIN ON1、内连接2、左外连接3、右外连接4、全外连接 三、过滤WHERE1、AND2、OR3、IS NULL4、IS NOT NULL5、B…

基于单片机的粮仓环境监测系统设计

本设计是以单片机为核心的粮仓环境监测系统&#xff0c;由单片机、温湿度检测模块、烟雾检测模块、显示模块、继电器模块、NB-IoT通信模块、报警电路等组成&#xff0c;以实现对粮仓内环境的监测功能&#xff0c;使用NB-IoT通信技术将环境信息上传至云平台&#xff0c;以便管理…

【HUAWEI】HCIP-AI-MindSpore Developer V1.0 | 第五章 自然语言处理原理与应用(3 And 4) | 学习笔记

目录 第五章 自然语言处理原理与应用 3 自然语言处理应用系统 ■ 对话系统 ■ 任务型对话系统架构 ■ 对话系统关键技术-自然语言理解 ■ 对话系统关键技术-对话管理 ■ 对话系统关键技术-自然语言生成 4 基于 MindSpore 的自然语言处理实践 ■ 模型实现 ▲ MindSpor…

[Linux]Mysql9.0.1服务端脱机安装配置教程(redhat)

前言 本教程适用于在yum源不可用的LInux主机上安装Mysql的场景。 以redhat系主机做操作示例&#xff0c;debian系主机可参照步骤&#xff0c;将对应的rpm -ivh命令换成dpkg -i。 1. 官网下载安装包 https://dev.mysql.com/downloads/mysql/ 1.1 版本分类 MySQL Enterprise…