VSCode实时预览网页代码的设置方法

青灯夜游

发布时间：2021-01-22 09:38:06

5943人浏览过

来源于csdn

转载

本篇文章给大家介绍一下vscode设置网页代码实时预览的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

VSCode实时预览网页代码的设置方法

一、设置描述

1.VSCode作为一款很不错的开发软件，相比DW更小巧，用来测试前端特别不错，那么我们平时开发网页发现只有写完代码，然后保存，接下来到浏览器中刷新查看效果，然后不停重复，我们发现很多时间就这样浪费到了这三个步骤上。

2.其实我们可以在VSCode中配置一个网页服务器，修改完代码之后只需要保存代码浏览器就可以实时预览

二、操作步骤

1.打开VScode，点击坐标工具栏的最后一个进入插件安装

2.如果没有显示左边的工具栏，也可以在View中找到Extensions进入插件安装

3.在搜索框中输入Live Server，在搜索结果中找到如下，选择安装

4.安装完成需要重启软件插件才能生效

Tago AI

AI生成带货视频，专为电商卖货而生

下载

5.重启过之后，新建一个工作区（也可以直接拖一个文件夹到vscode中），在这里创建一个HTML文件做测试，注意单独新建一个HTML文件拖动到IDE中是使用不了Live Server的，需要把这个HTML文件放到创建的工作区(文件夹)中，新建完成后我们可以在状态栏上看到一个Go Live，单击会自动打开浏览器并显示

提示：如果之前也有HTML项目，直接把项目根文件夹拖动到VScode中就会自动添加到工作区

6.如果没有状态栏上，也可以在文件上单击右键，选择Open With Live Server这一项

7.接下来修改代码我们只需要ctrl+S保存修改后的代码，浏览器自动刷新，动图显示

8.遇到问题解决不了别忘了留言~~

更多编程相关知识，请访问：编程入门！！

vscode的怎么装低版本插件

怎么用vscode打开微信小程序

苹果电脑的vscode怎么格式化

vscode中怎么让js代码变颜色

vscode右键在浏览器运行怎么设置

相关标签:

vscode ide vscode

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：开发vue项的一些vscode必备插件下一篇：VSCode中使用Git的方法介绍

作者最新文章

探讨如何在Vue3中编写单元测试

2023-04-25 19:41

深入了解Node中的Buffer

2023-04-25 19:49

一文理解JavaScript中的单例模式

2023-04-25 19:53

如何解决跨域？常见解决方案浅析

2023-04-25 19:57

实用Word技巧分享：简繁转换功能竟然可以这样用！

2023-04-26 17:27

实用Excel技巧分享：4种删除重复值的小妙招！

2023-04-26 17:31

一文聊聊Node中的内存控制

2023-04-26 17:37

一文讨论Vue2中key和Vue3中key的区别

2023-04-26 17:41

【整理分享】7个热门的React状态管理工具

2023-04-26 17:47

深入搞懂Redis中的哨兵

2023-04-26 17:59

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI编程开发 AI聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI编程开发 AI大模型

WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

AI办公学习 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI编程开发 AI文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI编程开发 AI文本写作

智谱清言 - 免费全能的AI助手

AI编程开发 Agent智能体

相关专题

vscode

VS Code（Visual Studio Code）是一款免费、开源的跨平台代码编辑器，由微软开发和维护。它被广泛用于软件开发和编程，支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性，使开发者可以高效地编写、编辑和调试代码。

628

2023.06.30

vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的，针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大，对JavaScript和NodeJS的支持非常好，自带很多功能，例如代码格式化，代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章，欢迎大家前来阅读学习。

228

2023.07.21

vscode使用的框架介绍

VSCode是一款跨平台代码编辑器，它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容，可以阅读本专题下面的文章。

414

2024.03.14

vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器，支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容，可以阅读本专题下面的文章。

393

2024.03.14

vscode可以写什么语言

vscode是一款强大的代码编辑器，支持多种编程语言的开发。通过安装扩展，可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容，可以阅读本专题下面的文章。

584

2024.03.15

vscode中文设置方法

方法一：在设置页面中，搜索“locale”，并选择“zh-cn”。方法二：按“Ctrl Shift P”快捷键，输入“Configure Display Language”，将语言修改为“zh-cn”。如果上述方法无效，可考虑安装中文插件。想了解更多vscode的相关内容，可以阅读本专题下面的文章。

600

2024.03.15

vscode用途介绍

Visual Studio Code（VSCode）是一款由 Microsoft 开发的多功能文本编辑器，适用于各种编程语言。作为一款开源软件，VSCode 拥有代码高亮、自动补全、调试、Git 集成等强大功能，成为程序员不可或缺的工具。想了解更多vscode的相关内容，可以阅读本专题下面的文章。

586

2024.03.15

vscode和visualstudio的区别

Visual Studio是一款功能强大的集成开发环境（IDE），适用于专业开发人员进行复杂项目的构建。而VSCode则是一款轻量级的代码编辑器，更适合各种规模的项目开发。想了解更多vscode的相关内容，可以阅读本专题下面的文章。

528

2024.03.15

C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开，系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例，帮助开发者掌握构建高可用微服务系统的关键技术，提高系统的可扩展性与维护效率。

2026.03.11

热门下载

网站特效

网站源码

网站素材

前端模板