VS Code的Live Preview扩展图标消失如何恢复
VS Code Live Preview侧边图标消失修复方案
按以下顺序操作,每做完一步检查图标是否恢复,不用全部做完:
- 检查右侧辅助侧边栏是否被误关闭
这是最高发的原因:Live Preview默认的快捷图标放在VS Code右侧的辅助侧边栏,不小心关掉侧边栏就看不到图标。
操作:点VS Code顶部菜单栏的「查看」-「外观」,找到「辅助侧边栏」(部分旧版本翻译为次级侧边栏、右侧边栏)选项,点一下把前面的勾选打上,右侧栏重新出现后就能找到对应预览图标。 - 检查图标是否被从活动栏隐藏
操作:把鼠标移到侧边栏图标区域(不管左右侧)的空白位置,右键点击,在弹出的菜单里找「Live Preview」选项,如果前面的勾选没打上,点一下勾选即可恢复图标。
如果右键菜单里根本找不到Live Preview选项,继续走后续步骤 - 重置VS Code视图布局
图标很多时候不是消失,是被误拖拽到了其他面板区域找不到。
操作:按快捷键Ctrl+Shift+P调出顶部的命令输入框,直接输入View: Reset View Locations,按回车确认,所有侧边栏、底部面板的布局会恢复到软件初始默认状态,重启VS Code即可。
验证扩展是否正常运行:同样按Ctrl+Shift+P,输入Live Preview: Show Preview按回车,如果能正常弹出HTML预览页面,说明扩展本身功能没问题,只是UI布局错位。 - 修复扩展版本兼容/激活异常
操作:- 点左侧扩展图标,在已安装列表找到Live Preview,点卡片右下角的小齿轮图标选择「扩展设置」
- 找到
Live Preview: Show Status Bar Indicator选项,打上勾选;找到Live Preview: Open Preview Target选项,确认选中的是「Embedded Preview(内置预览)」 - 回到扩展详情页,点「卸载」按钮旁边的下拉箭头,选择「安装另一个版本...」,选比当前版本早1-2个的稳定版本安装,装完重启VS Code。最新版扩展经常会和你当前安装的VS Code版本存在兼容问题,导致图标不加载。
- 清除损坏的软件缓存
如果以上操作都无效,大概率是VS Code本地缓存损坏导致UI元素加载失败:- 完全关闭VS Code,打开Windows任务管理器,把所有带「Visual Studio Code」字样的后台进程全部结束
- 打开任意文件资源管理器窗口,在顶部地址栏输入
%APPDATA%\Code\CachedData按回车,把打开的文件夹里所有内容全选删除(这些都是临时缓存,删除不会丢失你的代码、配置和扩展) - 再在地址栏输入
%USERPROFILE%\.vscode\extensions按回车,找到名字里带live-preview的文件夹删除 - 重新打开VS Code,到扩展商店重新安装Live Preview即可。
内容的提问来源于stack exchange,提问作者gcl_codeguy
相关产品推荐
相关产品推荐

