前端 | VScode实现一边写代码一边可以实时查看页面效果[图文详解]

已于 2023-07-17 20:10:38 修改
阅读量1.3w 收藏 32
点赞数 13
分类专栏： - 环境配置 - 文章标签： 前端 vscode ide
于 2023-07-01 23:41:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44649780/article/details/131495758
版权
使用VSCode的两个插件LiveServer和LivePreview，开发者现在可以方便地实现前端代码的实时预览功能。只需安装这两个插件，无需额外设置浏览器，点击代码右键选择ShowPreview，即可在编辑器中同时看到代码和页面效果。

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

本文主要是基于VSCode实现实现一边写前端代码一边可以实时查看页面效果。

自从VScode更新后，不用自己另外设置浏览器的打开方式，只需要俩个插件就可以简单搞定:

- Live Server

- Live Preview

🔥安装live server插件

🔥安装Live Preview插件

 当然也可以下载别的浏览器

点击代码，右键选择Show Preview ,就会实现左边代码，右边页面预览啦~ 

 

【React】6、图文详解react组件生命周期——React v16.8
Coding and studying
05-29 1115
系列文章目录 👏欢迎来到我的React系列文章 🍭本系列文章从React入门开始，涵盖了React的一切基础，属于是从零开始的一个系列 🍭文章会以图文结合-动图-代码实现-解释代码的形式带领大家走进React的世界 🍭本系列会从React v16.8 开始 => 直到React v 18.0 新版旧版一起抓 🍭持续更新中～希望大家能够喜欢，系列文章👉点这里 🌈博客主页👉点这里 👋回见～ 🔥React入门与概览（JSX语法) 🔥面向组件编程——组件实例的三大核心属性state、pr...
web前端开发流程，前端微信支付流程
m0_60125134的博客
07-24 1221
第一个阶段，开发环境和工具准备 浏览器 （Google，FireFox，…） 下载，安装前端开发工具vscode， 下载、安装 node、npm、webpack、webpack-cli、cnpm，配置前端开发环境 下载、配置PHP和MySQL 第二个阶段，前端入门，网页制作 1，HTML： 常用标签（div标签，p标签，span标签，a标签，img标签） 锚点 列表标签（有序列表，无序列表，自定义列表） 表单标签 表格标签 标签分类 标签语义化 注释 字符实体 2，CSS： CSS介绍 全局
VSCode设置网页代码实时预览的实现
10-15
主要介绍了VSCode设置网页代码实时预览的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VSCode设置网页代码实时预览
热门推荐
TianXinCoord的博客
10-14 18万+
目录 一、设置描述 二、操作步骤 一、设置描述 1.VSCode作为一款很不错的开发软件，相比DW更小巧，用来测试前端特别不错，那么我们平时开发网页发现只有写完代码，然后保存，接下来到浏览器中刷新查看效果，然后不停重复，我们发现很多时间就这样浪费到了这三个步骤上。 2.其实我们可以在VSCode中配置一个网页服务器，修改完代码之后只需要保存代码浏览器就可以实时预览 二、...
VS Code查看html格式文件插件：Live Server、HTML Preview
最新发布
captain
04-01 291
【代码】VS Code查看html格式文件插件：Live Server、HTML Preview。
VS Code设置一边写代码一边浏览效果
geek_xiong的博客
04-21 7799
vscode，一边写代码一边浏览效果，内置浏览器
VScode实现分屏显示浏览器（一边写前端代码一边可以实时查看结果）
liuyunye的博客
03-04 2万+
写在开始前：闲来无事自己开发了一个网站，需要进行前端的开发，因为又是写代码又是打开浏览器的非常的不方便，于是找到了以下的方法 第1步 安装live server插件 第2步 在文件->设置->首选项->扩展中找到这款插件，然后如图一样勾选这个选项 第三步 安装browser preview这个插件 第四步 在你写代码的地方打开Open with Live Server就会出现下图的界面，代表完成配置 ...
VSCode 实时预览HTML网页效果 - Live Server插件
鳄鱼儿
08-23 1万+
操作步骤 1.打开VScode，点击坐标工具栏的最后一个进入插件安装 2.在搜索框中输入Live Server，在搜索结果中找到Live Server，选择安装 3.实时预览，在文件上单击右键，选择Open With Live Server这一项，此时浏览器打开的网页就可以实时预览了 以上如有不对，请大家指正 ...
vscode边写代码边看变化
BeryL04的博客
03-14 1828
vscode把一些功能内置了，所以只需要安装Live Preview这个插件。右上角，点击那个带着搜索符号的，右侧就会显示浏览器中的效果了。然后在编辑区的右上角就会有显示了。
使用vscode边开发页面边预览
weixin_44151448的博客
08-31 4995
最终实现效果,不需要按保存键或者刷新键就可以实时预览结果,建议去下载vscode最新版,旧版本可能无法正常使用这个插件 去插件商店搜索下载Live Preview插件 安装完成后点击下图中的图标就可以边开发边预览 ...
vscode配置leetcode插件并解决无法登录问题(图文详解)
10-15
VSCode是微软推出的一款轻量级且功能强大的源代码编辑器，广泛应用于前端开发、后端开发、Web开发、移动应用开发以及云开发等领域。它不仅拥有丰富的插件生态，还支持通过安装插件来扩展其功能。对于程序员来说，...
VsCode开发html5网页之表单day2（新手向5）
weixin_42515365的博客
08-14 2797
I.VsCode工作区中新建文件夹及文件 我们要新建一个总的文件工作区文件夹Workspace，然后在Workspace下新建文件夹Test1，在Test1下新建demo.html II.demo.html写表单 a. html的基本结构： <!DOCTYPE html> <html> <head> <meta charset=utf-8"> <title></title> </head> <body> 网页
HTML5七夕情人节表白网页制作【生日快乐粒子烟花】HTML+CSS+JavaScript 生日祝福网页代码
08-10
- **动画效果**: 通过CSS动画实现动态效果，增强页面互动性。 #### 3. JavaScript交互逻辑 - **DOM操作**: 通过`document.createElement`创建HTML元素，并利用`appendChild`方法将其添加到DOM树中。 - **事件监听**...
vscode实现边写边查
jiangjiang_1995的博客
06-18 3634
一、点击vscode左侧拓展按钮，安装Browser Preview 和 live server两个插件
vscode的“安装”、“软件中文化”、“代码格式化”和“前端边编程边看到效果”的过程设置方法
hotdogbs的博客
04-30 1489
安装vscode。 这个软件的安装过程很简单，全程只需按照提示安装即可。但当处在安装过程中的上面这个界面时，要记得勾上“创建桌面快捷方式”、“将‘通过Code打开’操作添加到Windows资源管理器文件上下文菜单’”和“将‘通过Code打开’操作添加到Windows资源管理器目录上下文菜单”。原因：“创建桌面快捷方式”有助于 安装中文语言包，使软件中文化。 尝试安装软件主题，使软件界面个性化。 将一个文件目录作为项目目录打开。 创建一个新网页。 添加beautify插件，用于代码格式..
Vscode——vscode实时预览httml网页插件—live server
qq_43201350的博客
01-10 2165
Vscode——vscode实时预览httml网页插件—live server
2023年vscode插件推荐,实现边写代码边看实时效果
全栈技术分享，项目分享，资料分享
03-11 2766
Visual Studio Code是一个轻量级但功能强大的源代码编辑器，可在您的桌面上运行，可用于Windows，macOS和Linux。它内置了对JavaScript，TypeScript和Node的支持.js并具有针对其他语言和运行时（如C++，C#，Java，Python，PHP，Go，.NET）的丰富扩展生态系统。通过这些介绍性视频开始您的 VS Code 之旅。
VSCode浏览器实时预览插件的使用
qq_43310920的博客
01-05 1万+
一：设置概要 当写起网页代码时会因为每次看效果必须每次打开浏览器查看，非常影响效率，我推荐一个可以实时预览的插件，可以在vscode内实时查看网页效果。 二：操作步骤 第一步：打开扩展工具，快捷键(ctrl+shift+x) 第二步：搜索框输入preview on web server 第三步：点击安装按钮，我这里已经安装过。 第四步：点击设置，快捷键(ctrl+,) 第五步：在设置搜索框搜索settings，然后配置文件settings.json 第六步：添加"previ.
vscode示例代码
01-27
### VSCode 示例代码使用教程 #### 创建并运行简单的Python脚本 为了展示如何在VSCode中创建和执行Python脚本，下面提供了一个简单例子： ```python def hello_world(name): """返回问候语""" greeting = f"Hello, {name}!" return greeting if __name__ == "__main__": user_name = input("请输入您的名字: ") print(hello_world(user_name)) ``` 此段代码展示了基本的输入输出操作以及函数定义[^1]。 #### 利用Markdown插件编写文档 通过安装`vscode-markdown`插件可以更方便地编辑Markdown文件。例如，在撰写技术博客或记录学习心得时可采用如下结构： ```markdown # 文章标题 ## 章节一：简介 这里是关于主题的一些背景信息... ## 章节二：主要内容 深入探讨核心概念和技术细节... ``` 上述模板有助于保持文章条理清晰，并且支持实时预览效果[^2]。 #### 自定义代码片段提高效率 借助于VSCode内置功能——自定义代码片段，能够快速插入常用的代码模式而不必每次都手动敲写一遍。比如设置HTML标签快捷方式： ```json { "html": { "prefix": "htm", "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "\t<head>", "\t\t<meta charset=\"UTF-8\">", "\t\t<title>$TM_FILENAME</title>", "\t</head>", "\t<body>", "\t\t$0", "\t</body>", "</html>" ], "description": "Create a basic HTML5 file" } } ``` 这段JSON配置使得开发者只需键入特定前缀就能自动展开成完整的HTML框架[^3]。 #### 调试网页应用 对于前端开发人员来说，`vscode-edge-devtools`扩展提供了直接从IDE内部调试浏览器的功能。连接到Microsoft Edge实例之后即可修改样式表、分析性能瓶颈等问题所在页面上即时生效[^4]。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

夏天｜여름이다

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

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

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

打赏作者

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

抵扣说明：

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

余额充值