如何在VSCODE中编辑html文件源码同时实时预览HTML

最新推荐文章于 2025-04-01 17:09:38 发布

春晓禅

最新推荐文章于 2025-04-01 17:09:38 发布

阅读量3.1w

点赞数 12

分类专栏：笔记文章标签： html visual studio code

本文链接：https://blog.csdn.net/chunxiaochan/article/details/106821035

版权

笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在VSCODE中使用LiveServer和BrowserPreview插件实现实时预览HTML文件，通过简单的设置，可以在编辑HTML源码的同时，直接在VSCODE内预览效果，提高前端开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何在VSCODE中编辑html文件源码同时实时预览HTML

	为了不来回切换浏览器与vscode，vscode通过插件可以直接提供浏览器预览，需要做一些简单设置即可实现。

一、下载两个插件Live Server、Browser Preview

二、设置

1、点击VSCODE的“文件——首选项——设置"
在这里插入图片描述
2、接着点击"用户——扩展"

3、然后找到“live server config——Settings:Use Browser Preview——勾上复选框Open in Browser Preview inside VS Code,instead of default browser”

至此设置完成。