VSCode插件preview on Web Server

原创 已于 2025-02-02 04:06:09 修改 · 5k 阅读 · 30 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vscode #编辑器 #经验分享
于 2021-12-19 00:48:02 首次发布
本文介绍了使用VSCode进行前端开发的基本配置步骤，包括安装中文语言包、设置主题、安装辅助插件等，旨在提高前端开发效率。

1、打开VSCode软件，找到应用商城，搜索并安装插件“preview on Web Server”。
在这里插入图片描述
2、“preview on Web Server”插件提供浏览器实时预览效果：
（1）VSCode内置前端效果视窗展示页面效果，编辑器工作区的文件内右键选择“vscode-preview-server:Preview on side panel”。
在这里插入图片描述
（2）VSCode外唤浏览器新窗口展示页面效果，编辑器工作区的文件内右键选择“vscode-preview-server:Launch on browser”。
在这里插入图片描述

vscode-preview-server:实时预览VSCode扩展
05-02
vscode预览服务器 特征 该扩展提供了在Web服务器上执行HTML预览。 保存文件时，此扩展名会自动重新加载浏览器或侧面板（实时预览功能）。 您可以从上下文菜单或编辑器菜单调用这些功能。 主要功能如下。 Preview on side panel (ctrl+shift+v) ：在侧面板上打开HTML预览。 使用此功能，您可以轻松检查HTML，CSS和JavaScript的操作。 Launch on browser (ctrl+shift+l) ：在默认浏览器上打开网页。 您可以通过网页检查所有操作。 Stop the web server (ctrl+shift+s) ：停止Web服务器。 此功能只能在命令面板中使用。 Resume the web server (ctrl+shift+r) ：恢复Web服务器。 此功能只能在命令面板中使用。 show UI Page (c
Vscode快速跳到某一行 ❤code VScode安装配置和使用(Windows和Mac全部常见设置和使用）
林太白
01-27 1万+
Vscode快速跳到某一行 ❤code VScode安装配置和使用(Windows和Mac全部常见设置和使用）
VS Code 配置优化指南
人心有反复，好在山水有重逢。
03-13 3404
VS Code 凭借轻量、可扩展、高度自定义的特点，已经成为众多开发者的主力编辑器。本文所介绍的插件、配置以及调试终端、快捷键、美观主题等只是冰山一角，更多的玩法需要你在日常使用中不断探索和积累。循序渐进：先配置好最常用的功能（比如基本的格式化、Lint 工具、调试等），逐渐探索更高级的自定义插件和配置。及时清理：定期审视自己的插件列表和配置文件，把不再需要的部分关闭或卸载，以保持编辑器的轻量与高效。多尝试，多实践：用一段时间，找到最符合你个人或团队协作的最佳实践。
VS Code 基础配置
最新发布
weixin_46713695的博客
05-21 250
VS Code 基础配置
vs-code插件 -- Preview on Web Server 插件 使用 及设置默认浏览器
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
03-25 1万+
vs-code插件 -- Preview on Web Server 插件 使用 及设置默认浏览器
vscode安装+配置+使用+调试【保姆级教程】
哈茶的博客
07-09 40万+
保姆级教程，配置使用vscode这一片博客就够了快来看看吧，如果有啥不理解的地方欢迎来评论区和博主对线(#^.^#)
在vscode内启动服务，本地访问网站，preview on Web Server，设置插件
weixin_42737733的博客
11-09 1万+
关于html静态页面的地洞和访问，使用view in Browser或者Preview on Web Server。 下载server 步骤 在extensions插件扩展中，搜索server 完成之后重启vscode 在要启动的html页面右键 选择vscode-preview-server:Launch on Browser 自动打开网站并访问页面 配置 在插件...
vscode live-server使用失败解决办法
aaa10088的博客
04-28 1万+
一.直接用localhost:5500/手动打开 二.下载preview on web server 替代 去应用商店搜索preview on web server 配置preview 1）点击设置 选择设置 2）搜索 点击添加项，添加chrome或者其他浏览器 把端口改为5500 选择这个 就可以实现 页面 编辑器 同步效果。 ...
VSCode Live Server插件失效
qq_41008567的博客
05-18 1万+
VSCode Live Server插件失效 换用Preview on Web Server插件
vs code 好用的插件
weixin_52398126的博客
08-11 1030
vscode的插件
vscode环境配置
willis
10-30 1万+
记录vscode常用的技巧
Preview on Web Server 插件
初心 - 杨瑞超个人博客
07-30 7217
欢迎加入qq群(IT-程序猿-技术交流群)：757345416 Preview on Web Server 个人认为是一个非常好用的插件，他可以让你预览的web界面同步手机，浏览器，互相同步，达到非常好的测试效果。安装方法如下： 1、点击扩展 2、搜索 Preview on Web Server 3、点击安装 4、安装成功后点击重新加载 5、ok 详情见下图： 下载完成...
开发神器 VsCode 配置指南！(含 Python、C++、Java环境配置)
Python单行客的博客
11-25 5692
开发神器 VsCode 配置指南！(含 Python、C++、Java环境配置)
一文教你搞懂如何配置VSCode，VSCode的配置究竟在配置什么。（C语言环境）
a503244552的博客
10-05 6639
如何配置VSCode，VSCode的配置究竟在配置什么。（C语言环境）
vscode配置C/C++环境（超详细保姆级教学）
热门推荐
m0_62721576的博客
10-08 51万+
大一上学期被学长安利了vscode，但是下载安装后不会配置，自己连查带问搞了七八个小时终于配置好了。后面身边很多同学也不会配，都来找我帮忙配，加上之前自己摸索着配的时候感觉网上没有详细又靠谱的教程，所以决定把配置的过程记录一下供大家参考，希望可以帮到跟我一样想用却不会配置vscode的同学们。
vscode配置
ab_er的博客
08-30 1178
vscode配置
VS Code安装与配置
o.O
10-19 2万+
记录VS Code安装与配置全过程
最新VS code配置C/C++环境(tasks.json, launch.json,c_cpp_properties.json)及运行多个文件、配置Cmake
Python基础详解教程，让编程变得简单！
04-07 4万+
文中主要讲述vs code配置c/c++环境，配置tasks.json、launch.json、c_cpp_properties.json文件，引入第三方库、指定头文件路径的配置，VS code中Cmake的环境配置，vs code通过CMake构建工程(项目)环境运行C/C++。
vscode | 配置篇
⁢
09-27 2239
vscode作为软件开发非常好用的IDE，做好一些配置可以让我们事半功倍。这篇文章中，我将持续更新在使用vscode时，遇到的问题，以及解决问题的方法和小技巧。
【C/C++】vscode配置C/C++环境
DreamSuif的博客
11-12 9万+
windows环境下vscode配置c/c++运行环境，保姆级教学，介绍了两种配置方法，以及如何解决终端乱码问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕斯-ing

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值