您的位置：首页 > 软件编程 > VSCode  >  VSCode设置网页代码实时预览的实现

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

 更新时间：2020年6月29日 23:37  点击：2449

一、设置描述

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

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

二、操作步骤

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

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

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

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

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

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

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

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

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

到此这篇关于VSCode设置网页代码实时预览的实现的文章就介绍到这了,更多相关VSCode 网页代码实时预览内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

[!--infotagslink--]

相关文章

  • vscode安装git及项目开发过程

    这篇文章主要介绍了vscode安装git及项目开发过程,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-05-19

  • Vscode上使用SQL的方法

    这篇文章主要介绍了Vscode上使用SQL的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-01-26

  • VSCode 配置uni-app的方法

    这篇文章主要介绍了VSCode 配置uni-app的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11

  • vscode搭建STM32开发环境的详细过程

    这篇文章主要介绍了vscode搭建STM32开发环境的详细过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-05-02

  • VSCode C++多文件编译的简单使用方法

    这篇文章主要介绍了VSCode C++多文件编译的简单使用方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-03-29

  • VSCode配置C#运行环境的完整步骤

    这篇文章主要给大家介绍了关于VSCode配置C#运行环境的完整步骤，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-12-08

  • 浅谈Vue开发人员的7个最好的VSCode扩展

    这篇文章主要介绍了浅谈Vue开发人员的7个最好的VSCode扩展，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-20

  • vscode和cmake编译多个C++文件的实现方法

    这篇文章主要介绍了vscode和cmake编译多个C++文件的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-10

  • Windows配置VSCode+CMake+Ninja+Boost.Test的C++开发环境(教程详解)

    这篇文章主要介绍了Windows配置VSCode+CMake+Ninja+Boost.Test的C++开发环境,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-05-12

  • 如何使用VSCode配置Rust开发环境(Rust新手教程)

    这篇文章主要介绍了如何使用VSCode配置Rust开发环境(Rust新手教程),本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-07-27

  • vscode通过Remote SSH远程连接及离线配置的方法

    这篇文章主要介绍了vscode通过Remote SSH远程连接及离线配置的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-03-16

  • VSCode搭建C/C++编译环境的详细教程

    Visual Studio Code是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，这篇文章主要介绍了VSCode搭建C/C++编译环境,需要的朋友可以参考下...2020-05-15

  • VSCode 云同步扩展设置Settings Sync插件

    这篇文章主要介绍了VSCode 云同步扩展设置Settings Sync插件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-29

  • 关于VSCode格式化JS自动添加或去掉分号的问题

    这篇文章主要介绍了VSCode格式化JS自动添加或去掉分号的问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-10-12

  • VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)

    这篇文章主要介绍了VSCode 添加自定义注释的方法(附带红色警戒经典注释风格),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-08-28

  • 解决 VSCode 编写 C++11 代码报红问题分析

    今天在写 C++ 代码的时候用上 C++11 的特性，然后发现 VSCode 虽然可以编译通过，但是会在相应位置报红，这是怎么回事呢？下面小编给大家带来了解决方法，一起看看吧...2021-09-27

  • VSCode自定义配色方案的实现

    这篇文章主要介绍了VSCode自定义配色方案的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-29

  • VSCode设置网页代码实时预览的实现

    这篇文章主要介绍了VSCode设置网页代码实时预览的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-29

  • vscode 前端最佳配置小结

    这篇文章主要介绍了vscode 前端最佳配置小结,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-29

  • 利用Typings为Visual Studio Code实现智能提示功能

    最近在学习Node.js及ThinkJS这个框架，用vscode作为开发环境。默认情况下vscode对ThinkJS的代码提示并不好，所以研究了一下，原来可以同通过Typings来让vscode拥有强大的智能代码提示功能。下面本文就介绍了如何利用Typings为Visual Studio Code实现智能提示功能。...2021-09-22