专栏首页个人学习总结VSCode中安装Live Server插件实现Html网页代码的实时预览

VSCode中安装Live Server插件实现Html网页代码的实时预览

VSCode中安装Live Server插件实现Html网页代码的实时预览

利用寒假时间学习了一些基本的网页知识,在编写Html代码时可以利用IDEA、WebStorm、Dream Weaver等工具,当然也可以选择使用拥有丰富插件、可以编写多种语言的轻量开发工具—VSCode,今天来介绍一下如何在VSCode中编写Html语言,并通过安装插件实现网页代码的实时预览。

1、打开VSCode,找到“扩展”并打开

如果没有打开左侧的工具栏,也可以在"查看—>扩展"中打开

2、在插件搜索栏中输入" Live Server" 来查找插件

然后点击"安装",等待安装完毕

3、安装插件完成后,重启VSCode软件(不要忘记这一步)

4、重启之后,打开资源管理器,接着新建一个工作区(其实也可以直接将一个空文件夹拖到VSCode中),然后我们在工作区中新建一个Html文件,就可以来编写Html文件了。这里注意:如果单独将一个HTML文件拖动到VSCode中是无法使用Live Server的,即无法实现实时预览,这是需要把该HTML文件放到我们所创建的工作区(文件夹)中,才可以发挥该插件的功能,上述工作完成后,在状态栏上看到一个Go Live标识,单击该标识会自动打开浏览器并显示网页文件的效果

下方的“Go Live”标识

6、编写好Html文件后,点击下方的“Go Live”标识,即可自动打开默认浏览器并运行编写代码,在编写的过程中可以实现网页代码的实时预览。

另一种打开方式是右击选中的Html文件,点击“Open With Live Server”,同样可以实现上述效果。

之后我们在编辑代码的过程里,只要按下“Ctrl+S”(即将文件进行保存),就可以实时看到代码的运行效果。

注意:在点击Go Live后可能会提示我们“Server is Started at port : 5500”(如下图所示),个人也不太清楚这时什么原因,希望明白的大神可以进行说明与解释,但这个提醒似乎并不影响这个插件的功能

最后,我们可以愉快地利用Live Server插件,在VSCode中一边写代码,一边实时预览网页代码的运行效果了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 按我说的来,让 VS Code 更好用 10 倍 | VS Code 新手指南

    想必你也已经听过身边不止一个人这么说。最近的 JS 2019 报告中,VS Code 也是以压倒性的优势获胜第一,其他的编辑器只能被无情碾压在地上摩擦……

    崔庆才
  • 直接把别人网站的 js css html 扒下来的 Chrome 插件【强烈推荐】

    经常在仿站的时候会遇到下载别人网站上的图片、css、js 等资源,如果你是一个个的手动下载是很麻烦的,也很慢的。

    夜尽天明
  • 按我说的来,让 VS Code 好用 10 倍 | VS Code 新手指南

    想必你也已经听过身边不止一个人这么说。最近的 JS 2019 报告中,VS Code 也是以压倒性的优势获胜第一,其他的编辑器只能被无情碾压在地上摩擦……

    GitHubDaily
  • 02_Vue 的基本代码

    在VSCode中:Ctrl + Shift+ P,搜素livereload,并回车/点击“Live Server”。

    兮动人
  • vscode学习笔记

    最近vscode编辑器在前端程序员中使用越来越频繁了,既然大家都在用,说明它一定是香的,身为webstorm党,也得赶紧跟进潮流,这是我这几天学习vscode看...

    蓓蕾心晴
  • H5 游戏开发 2:搭建 Egret 开发环境

    在上一期的“H5 游戏开发”教程中,猫哥介绍了如何通过 Whistle 工具对 Egret 文档进行资源修复和搜索增强。本期,我们以 Hello World 项...

    猫哥学前班
  • 面向前端开发人员的VSCode自动化插件

    编程是复杂的。在保证高生产力和代码质量的同时,有许多最优的方案需要记住,有许多准则需要遵循,还有许多 "已知问题 "需要避免。

    葡萄城控件
  • 程序猿开发软件插件推荐

    编程软件 JetBrains全家桶 JetBarins的全家桶操作都很类似,所以习惯其中一个之后熟悉起来so easy,妈妈再也不用单心的学习了! 之后是...

    苏州程序大白
  • 25 个提升开发幸福感的 VSCode 扩展

    我认为它如此受欢迎的原因很简单,因为 VSCode 提供了每个开发者想要的功能,包括他们甚至不知道自己需要的功能。这就是 VSCode 的秘密魅力——它总能让你...

    一只图雀
  • 作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?

    如今,Visual Studio Code无疑是最流行的轻量级代码编辑器。它确实从其他代码编辑器那借鉴了很多,最主要是从Sublime和Atom那里。然而它的成...

    葡萄城控件
  • VSCode插件大全|VSCode高级玩家之第二篇

    上一篇文章《VSCode常用快捷键大全》,我们了解到了VSCode中的常用快捷键。学会了快捷键可以让我们更高效和迅速的编写代码。但是没有IDE中的一些辅助功能,...

    三钻
  • 这些必备的VSCode JavaScript插件你都用过吗?

    如今,Visual Studio Code无疑是最流行的轻量级代码编辑器。它确实从其他代码编辑器那借鉴了很多,最主要是从Sublime和Atom那里。然而它的成...

    Javanx
  • GitHub 热点速览 Vol.22:如何打造超级技术栈

    以下内容摘录自微博@HelloGitHub 的 GitHub Trending,选项标准:新发布 | 实用 | 有趣,根据项目 release 时间分类,发布时...

    HelloGitHub
  • 分享几个我日常使用的VS Code插件

    在这篇文章中,我想介绍一下自己日常使用中最喜欢的 Visual Studio Code 扩展。大多数时候,我用 VS Code 编写的是 JavaScript ...

    深度学习与Python
  • vscode

    2019年6月11日 ⋅ 浏览量: 3    ...

    以谁为师
  • VsCode插件之Live Serve探秘.(上)

    云深无际
  • VSCode拓展推荐(前端开发)

    Text-to-speech function is limited to 200 characters

    botkenni
  • 「 工具篇 」VS Code

    之前部门想要统一代码编辑器, 最后决定统一用 VS Code,需要一篇比较系统的介绍文章。

    皮小蛋
  • vscode 常用扩展插件(工具篇)

    欲善其工必先利其器,本文以vscode编辑器为例子,分享一下笔者常用的vscode工具及技巧,同时也欢迎高手不惜赐教,分享更多的使用技巧,提高工作效率和编程幸福...

    用户3806669

扫码关注云+社区

领取腾讯云代金券