惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

宝玉的分享
宝玉的分享
B
Blog RSS Feed
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
MyScale Blog
MyScale Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
S
SegmentFault 最新的问题
Y
Y Combinator Blog
月光博客
月光博客
IT之家
IT之家
T
Tailwind CSS Blog
Last Week in AI
Last Week in AI
L
LangChain Blog
博客园_首页
MongoDB | Blog
MongoDB | Blog
P
Proofpoint News Feed
博客园 - Franky
WordPress大学
WordPress大学
云风的 BLOG
云风的 BLOG
M
MIT News - Artificial intelligence
V
Visual Studio Blog
小众软件
小众软件
博客园 - 叶小钗
博客园 - 三生石上(FineUI控件)
N
Netflix TechBlog - Medium

博客园 - smil、梵音

css渐变边框的实现 C primer Plus 第六版第4章节复习题5记录 C语言第4章末尾程序找错记录 css 的z-index的层级问题 由webai项目的 AI工作台 项目有感记录 C语言标准(C89/C90)中的32个关键字全列表 Windows 系统的 vscode 通过 Remote-SSH 连接虚拟机的 Ubuntu 系统运行 C 语言的代码 Windows 系统 vscode Remote-SSH 远程连接虚拟机里面的Ubuntu系统的失败处理 Ubuntu虚拟机里安装了SSH,开启SSH服务的时候报错 VS Code的Remote - SSH功能 Ubuntu系统里面安装 g++ ,sudo apt update 的含义 C语言是不是必须得通过gcc编译成可执行的程序? c语言用gcc编译过后,执行 ./hello.c 报错 ./hello.c: 权限不够 windows系统的虚拟机里面的Ubuntu系统安装VMware Tools Ubuntu的应用中心搜索 vscode 的时候,筛选条件为Snap包、debian包是什么意思,如何安装vscode Ubuntu系统是否就是Linux系统,安装软件和Windows系统有何区别 Ubuntu系统里面vscode运行C语言的第一个 Hello World 程序 vscode 中安装C/C++相关的插件 Ubuntu 安装一个轻量级的中文输入法Fcitx5 Ubuntu安装百度网盘 Ubuntu系统里面安装vscode 乌版图系统截屏快捷键 Ubuntu 系统里面运行C++ TortoiseGit 的安装与汉化 安装虚拟机+ ubuntu24.04 系统 联想小新安装 ubuntu24.04 双系统 | 安装乌版图系统 | windows安装 ubuntu24.04 双系统 利用faststone capture制作gif动图 Sublime Text 常用编辑快捷键速查表 vscode 中的 css 样式代码不显示折叠图标的解决方法 IDEA中git的Cherry-Pick的可视化使用(个人总结) IDEA中git的Cherry-Pick的使用
VS Code——Live Server的简介、安装与使用
smil、梵音 · 2025-12-09 · via 博客园 - smil、梵音

基本概念:

Live Server:一个具有实时加载功能的小型服务器,可以使用它来破解html/css/javascript,但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。

安装

一、在VS Code扩展中搜索Live Server,并安装

3ab2f646460f0e419008069c1a054a58

 二、打开命令面板,输入settings,点击首选项

2c0f45b101b8650c7b0e3c9f20937203

 三、搜索Live Server配置项,将左侧需要修改的配置项复制到右侧用户设置并修改

56672503832346438eed4d3abe41edb9

 Live Server的配置

{
"liveServer.settings.port": 8080, //设置本地服务的端口号
"liveServer.settings.root": "/", //设置根目录,也就是打开的文件会在该目录下找
"liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
"liveServer.settings.NoBrowser": false,
"liveServer.settings.ignoredFiles": [//设置忽略的文件
    ".vscode/**",
    "**/*.scss",
    "**/*.sass"
]
}

使用

设置完毕后,重启vscode,并选择需要浏览的文件,右键开启服务

e21207396c1d4dbeb6ff8b80b91735bc

其他开启方法:

1、在窗口的最底部有Go Live可以点击,一旦点击,就会自动在浏览器中打开HTML文件

2、快捷键 

  (alt+L, O) 打开服务   

  (alt+L, C) 关闭服务

3、按F1,然后在输入栏中输入

  Live Server: Open Live Server to start a server  打开服务,

  或者 Live Server: Close Live Server to stop a server 关闭服务

可以在浏览器中浏览网页

并且在VS Code保存,浏览器即可自动刷新

02fd059c5d69178864ee89529f6e76ce

注意事项

1、注意端口占用