整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
们在使用VScode开发项目的时候，需要经常在编辑器和浏览器之间来回切换来查看页面预览效果，开发效率不是那么的高！今天就来分享下如何在VScode中实时预览html界面或vue页面。
VScode预览vue页面
VScode预览HTML页面
不得不感叹vscode插件功能真是强大！
1、HTML Preview
一个很不错的vscode预览html页面插件
在VSCode扩展搜索“HTML Preview”，点击安装，通过如下快捷键预览页面。
2、Live Server
一个超赞的微型http服务器（相当于使用nodejs的http-server ）
在VSCode扩展搜索“Live Server”，点击安装
打开命令面板（ F1 或 Ctrl + Shift + P 或 Shift + ? + P），输入“ Live Server: Open With Live Server ”开启服务，“ Live Server: Stop Live Server ” 关闭服务。
3、Preview on Web Server
在VSCode扩展中搜索“Preview on Web Server”，点击安装
如下图：还支持鼠标右键快捷打开
Browser Preview | 让你能够在VSCode中打开一个真实的浏览器进行预览并调试。
安装好 Browser Preview 插件后，左侧边栏会看到一个新增的图标。点击这个图标，就能在 VS Code 里打开一个浏览器，输入网址即可调试vue/react/angular等页面。
使用建议
按需安装Visual Studio Code插件，建议控制安装数量在三十个插件以内，否则会影响Visual Studio Code使用性能。
?? 最后
如果觉得这篇内容对你有帮助，点个「关注/转发」，让更多人也能看到你的分享！
scode怎么运行代码HTML?vscode是一款源代码编辑器软件，能够用于windows、macOS以及Linux系统，具有丰富的其他语言。网站html编写也需要使用到vscode，但是很多小伙伴们不知道如何运行编写html代码，那么今天就来教大家vscode怎么运行代码HTML以及怎么在vscode编写HTML代码，一起来看看吧。
VS Code中运行
代码有两种方法：
1.自动打开HTML文件
步骤如下：
1）在VS Code中搜索并安装Live Server插件；
2）打开HTML文件；
3）右键单击编辑器中的HTML代码，选择“Open with Live Server”；
4）浏览器将自动打开并显示HTML页面。
2.手动打开HTML文件
步骤如下：
1）打开HTML文件；
2）右键单击编辑器中的HTML代码，选择“Open with Default Application”；
3）浏览器将自动打开并显示HTML页面。
10 月 21 日消息，微软现已推出了可完全在浏览器中运行的轻量级 VS Code 网页预览版，该程序可以允许开发者直接使用浏览器中的 VS Code，无需使用本地安装版本进行开发。
早在 2019 年，微软就趁着 .dev 顶级域名开放注册时，申请了 vscode.dev、并将之重定向到code.visualstudio.com 。然而直到本周三，微软才正式发布了可完全在浏览器中运行的轻量级 VS Code 。这意味着开发者无需任何安装，就可以使用基于浏览器的 VS Code打开本地机器上的文件夹并开始编程工作。现在，当用户打开https://vscode.dev时，就会收到这个轻量级版本的 VS Code。
新的体验
基于浏览器的VS Code可提供以下体验：
可对本地文件进行查看和编辑。可以快速在Markdown中做笔记（并预览）即使您的设备受限而无法安装完整的VS Code，您依然可以使用vscode.dev来查看和编辑本地文件。
构建HTML、JavaScript 和CSS应用程序的客户端，并可结合浏览器工具进行调试。
可在很难安装VS Code的低功率机器（如 Chromebook）上编辑代码。
可以在iPad上使用。您可以上传/下载文件（甚至可以将文件存储在云中），还可以通过内置GitHub Repositories extension远程打开存储库。
除此之外，基于浏览器的 VS Code还内置了存储库（GitHub Repositories）、代码空间（Codespaces）和查询请求（Pull Request）扩展。
与GitHub.dev的区别
以下是基于浏览器的 VS Code与 GitHub.dev 在线编辑器的区别：
GitHub.dev 为深度集成到 GitHub 中的 Web 版 VS Code 定制实例，可以自动登录，URL 格式遵循 github.com 的 /organization/repo 格式，并且它是为 GitHub 定制的，允许用户简单地改变 .com 或 .dev 域名后缀来编辑某个 repo，具有亮色和暗色模式。除了 GitHub 上的存储库之外，基于浏览器的VS Code还支持 Azure Repos（作为 Azure DevOps 的一部分）。
微软在其官方博客中表示：“将 VS Code 植入浏览器是对该开发套件最初愿景的实现。对于 VS Code 也是一个全新的开始。人们只需要一台能联网的电脑和一个浏览器就可以在未来实现开发，在那种环境下人们可以随时随地的开发代码。期待未来的发展。”
<iframe scrolling="no" frameborder="0" class="vote_iframe js_editor_vote_card" data-display-style="height: 256px;" data-display-src="/cgi-bin/readtemplate?t=vote/vote-new_tmpl&__biz=MjM5MjAwODM4MA==&supervoteid=455314322&token=844817107&lang=zh_CN" data-src="/mp/newappmsgvote?action=show&__biz=MjM5MjAwODM4MA==&supervoteid=455314322#wechat_redirect" data-supervoteid="455314322" allowfullscreen=""></iframe>
参考链接：
https://mspoweruser.com/microsoft-vs-code-running-in-browser/
https://code.visualstudio.com/blogs/2021/10/20/vscode-dev
?三大院士、十大数据库掌门人，岳麓对话开启数字经济新时代！
使用了12个月的苹果M1芯片，我发现了它的「致命」弱点
*请认真填写需求信息，我们会在24小时内与您取得联系。
