VSC系列 | 自动刷新浏览器——Live Server（插件篇）（十一）

最新推荐文章于 2024-05-15 10:00:45 发布
最新推荐文章于 2024-05-15 10:00:45 发布
阅读量3.5k 收藏 2
点赞数 2
分类专栏： Visual Studio Code
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37930716/article/details/104068298
版权

问题描述

有时候，项目编辑后不能自动刷新浏览器，那么就需要手动刷新浏览器，这样就非常麻烦。在VSC中如何实时预览页面呢？

Live Server是什么？

  • 为静态和动态页面启动具有实时重新加载功能的本地开发服务器。
  • 适用于.html或.htm文件

解决办法

1、搜索并安装插件Live Server

2、右键点击“Open with Live Server”。此时会开启一个本地服务器。

效果图

自动刷新

 

 

前端杂记
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
使用live-server快速搭建本地服务器+自动刷新的方法
08-27
下面小编就为大家分享一篇使用live-server快速搭建本地服务器+自动刷新的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VSCode插件开发全攻略之跳转到定义、自动补全、悬停提示功能
08-19
VSCode 插件开发全攻略之跳转到定义、自动补全、悬停提示功能 VSCode 插件开发中的跳转到定义、自动补全、悬停提示功能是插件开发中非常重要的功能之一。跳转到定义功能可以帮助用户快速地跳转到变量或函数的定义...
live-server实现自动刷新
冯晓东——java,activiti
11-08 3036
1.执行命令, 安装到全局 npm install -g live-server 2.启动 live-server 3.浏览器打开,点击保存,实现自动刷新
探索音乐新纪元：VSC Netease Music
最新发布
gitblog_00076的博客
05-15 412
探索音乐新纪元：VSC Netease Music 项目地址:https://gitcode.com/nondanee/vsc-netease-music 如果你是一位热爱编程的同时也是音乐发烧友，那么这款Visual Studio Code扩展——VSC Netease Music，将会为你的开发环境带来全新的音乐体验。这款非官方的网易云音乐插件，无缝融合了代码开发和音乐享受，让你的编程之旅不再...
live-server自动刷新浏览器
EmotionComputer
11-20 1473
作为一个懒人，即使调试HTML代码，当代码变动的时候也不想去刷新浏览器，那么这个时候我们可以借助live-server，当代码变动的时候自动刷新浏览器（像极了dev-server的热更新）。 1. 安装： sudo npm install live-server -g 2. 启动： live-server ...
live-server(在线自动更新服务器)
庚中
03-20 715
1.先建好index.html文件: 2.全局安装: cnpm install live-server -g 3.在终端中运行: live-server 4.接着它会自动打开页面,并自动刷新.
VScode下安装Live Server（自动刷新html页面）
追求卓越583的博客
08-30 5221
VScode下安装Live Server（自动刷新html页面）
自动根据模板插入header、body内容插件
03-16
标题中的“自动根据模板插入header、body内容插件”指的是一个用于Visual Studio Code（VSC）的扩展插件，它的主要功能是自动化地在代码文件中插入预定义的header和body部分。这样的插件对于软件开发团队尤其有用，...
VSC开发VUE插件大全
03-16
因公司下载插件慢或者无法下载的小伙伴，来这里下载吧：） Beautify: HookyQR.beautify-1.5.0.vsix ESLint: dbaeumer.vscode-eslint-2.1.1.vsix ... vuex-suggest: mishannn.vuex-suggest-1.1.1.vsix ...
VSC-HVDC模型结构示意图
12-28
VSC-HVDC模型结构示意图，绘制的为两端vsc-hvdc输电模型结构示意图。由两端交流系统、变压器、交流滤波器、电压源型换流器、换流电抗器、电容等构成
VSC文件浏览器（中文版）
04-16
1. **Visual Studio Code (VSC)**：VSC是一个强大的源代码编辑器，支持多种编程语言，拥有丰富的插件生态系统，可帮助开发者进行代码编辑、调试和版本控制等任务。它的配置文件（如settings.json）允许用户自定义...
vscode-live-server：为静态和动态页面启动具有实时重新加载功能的开发本地服务器
02-06
[要尝试使用 （BETA）吗？ 它将启用实时更改，而无需保存文件。 ] 实时服务器 Live Server喜欢 :heart_with_arrow: 您的多根工作区 服务器端页面（如PHP）的Live Server。 [针对“找不到命令错误” ] 启动具有实时重新加载功能的本地开发服务器，以处理静态和动态页面。 启动/停止服务器的快捷方式 [注意：如果您的工作区中没有任何.html或.htm文件，则必须遵循方法4和5来启动服务器。 打开一个项目，然后从状态栏中单击Go Live启用”以打开/关闭服务器。 右键单击资源管理器窗口中的HTML文件，然后单击“ Open with Live Server 。 。 打开
Update-VSCode:自动更新VS Code，因此您不必再为它担心
05-12
。 这可以解决该缺点，并允许用户仅使用VS Code。 描述 这是我为工作管理的更复杂的安装程序/更新程序的简单实现。 我希望该脚本可以作为计划任务执行； 手动或通过GPO。 快速开始 请参阅的。 参数 使用参数可以自定义一些安装程序选项。 还可以使用如下环境变量来设置所有参数： UpdateVSCode${Parameter} 。 例如，将SetupSilent变量作为环境变量为： UpdateVSCodeSetupSilent 。 请记住，环境变量始终是字符串。 因此，通过环境变量将switch参数设置为'$false'仍然是$true 。 您可以通过以下示例看到我的意思： [bool]'true' ， [bool]'false' ， [bool]'$true' ， [bool]'$false' ， [bool]'0'和[bool]'' 。 禁止封锁 类型： [switch] 如果
网页自动刷新插件
09-06
浏览器网页自动刷新插件，根据需要设置自动刷新间隔、重复次数等
VSCode Live Server插件 开启了自动刷新，依旧不刷新解决方法
lklalmq的博客
01-17 1054
注：AdvanceCustomBrowserCmdLine中的路径为电脑本地安装chrome的启动程序路径。困扰了很久的live sever不能自动刷新的,找了很多教程都没成功,后面终于成功了!2、打开VS code ，重新安装live sever，重新启动测试；问题:live serve插件打开页面后不自动刷新页面,需要自己点刷新。3、将如下代码粘贴到打开的代码中，保存之后重启VS code就可以了。这样重新打开vscode就成功了!文件-首选项-设置，找到如图位置点开。
Mac端，VS code （HTML页面）关于live sever扩展插件无法自动刷新的解决方案
weixin_42403745的博客
11-19 745
1、LiveServer是只能识别标准HTML结构体，也就是说，必须要有明确的HTML结构(也就是说，必须要有<html> 、<head> 、<body>这些标签才可以)太TM坑了，愣是看了一下午；VsCode插件live sever浏览器不自动刷新问题排查。
VS code 关于live sever扩展插件无法自动刷新的解决方案
qq_46372132的博客
08-09 1456
live sever 不能自动更新解决
live server使用后Chrome无限刷新很快，html5延迟代码无法正常使用
wk6tvd28的博客
04-23 1066
项目场景： 在vscode中安装了live server后Chrome无限刷新。HTML5无法使用延迟跳转功能 原因分析： 禁止live server后手动调节Chrome正常，那么问题就出现在live server这个插件上面 解决方案： 点击插件左下角的图标，再选择在setting.json在编辑,将liveServer.settings.wait=100改成2000后保存即可，这样Chrome自动刷新时间的间隔就会慢一些，延迟跳转的功能就可以正常实现 { "workbench.col
解决VS code中点击Open With Live Server无反应问题
BAB__的博客
05-09 8165
Open With Live Serevr点击无反应
vsc英语翻译插件 鼠标悬停自动翻译
09-16
为了实现鼠标悬停自动翻译的功能，你可以使用以下步骤： 1. 在你的项目中安装一个适用于 Visual Studio Code 的英语翻译插件，比如 "Translate"。 2. 打开 Visual Studio Code，点击菜单栏的 "插件"，然后选择 ...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值