vscode怎么实现实时预览

vscode怎么实现实时预览

打开vscode,点击坐标工具栏的最后一个进入插件安装

e79e75a45d409f63fb298dcc224f134.png

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

7e04220995065c17765df78433db769.png

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

4f5cccb9e15e2d1e5695899f24e2a67.png

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

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

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

70d108869cc420b27b8d56ae47cf357.png

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

0c8cea874610558eb18ea303d791670.png

接下来修改代码我们只需要ctrl+S保存修改后的代码,浏览器自动刷新

018830df79ecf693e22efdcf08980e8.png

相关文章教程推荐:vscode教程

以上就是vscode怎么实现实时预览的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3241528.html

(0)
上一篇 2025年4月2日 07:17:29
下一篇 2025年3月2日 02:08:11

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vscode怎么创建css文件

    首先点击文件选择新建文件,如下图所示: 然后就建立了一个临时的文件,如下图所示: 接着看底部的文档类型是纯文本,点击纯文本 立即学习“前端免费学习笔记(深入)”; 在弹出的界面中选择css,如下图所示: 然后按ctrl+S保存文档,如下图所…

    2025年4月2日 编程技术
    100
  • vscode如何实现同时编辑多行代码

    vscode对多行编辑有两种模式。 第一种模式 Alt+Shift   竖列选择 登录后复制 这种模式下只可以选择竖列,不可以随意插入光标。所以只限制于同一列且不间隔的情况下。 第二种模式 Shift+Ctrl 竖列选择Ctrl+光标点击 …

    2025年4月2日
    100
  • vscode如何修改终端

    在日常使用vscode编辑器中, 我们可以通过“Ctrl+`”快捷键来调出终端面板, 如下图: 其中的shell(上图右下圈红部分)是可以设置的,  下面我们来看一下修改默认shell的方法: 在文件 -> 首选项 -> 设置中…

    2025年4月2日
    100
  • vscode如何快速补全div标签

    1、首先安装插件 2、配置files.associations对象 打开后如下所示: 在Comm Used列表中找到”files.associations”: {} 点击左边的edit按钮,在右边的编辑框编辑,结果如…

    2025年4月2日 编程技术
    100
  • vscode如何预览md文件

    1、首先需要安装md插件 选择Extensions,输入Markdown Theme Kit,下面会出现相应插件,进行安装即可 或者安装插件Markdown Shortcuts也可以。 2、安装完毕后,重启VSCode。 3、然后打开.md…

    2025年4月2日
    100
  • vscode如何实现缩放界面

    实现  ctrl + 鼠标滑轮 对显示界面的放大与缩小 步骤: 依次点击 file ==> preferences ==> settings  进入设置。 如下图: 搜索   editor.mouse 修改后如下图: 另一种方法…

    2025年4月2日 编程技术
    100
  • vscode如何实现侧边栏缩放以及代码自适应屏幕

    侧边栏缩放 进入vscode目录,打开workbench.desktop.main.css文件,如下图所示: 记事本打开后,如下图所示: 重启vscode即可。 设置代码自适应屏幕 步骤如图所示: 相关文章教程推荐:vscode教程 以上就…

    2025年4月2日 编程技术
    100
  • vscode如何调试运行c#程序

    前提条件: 安装.NET Core SDK 安装vscode 步骤: 安装c#extension插件 创建第一个项目,手动创建workspace文件夹 在vscode中使用快捷键CTRL+K+CTRL+O选择刚才创建的文件夹 使用快捷键CT…

    2025年4月2日 编程技术
    100
  • vscode如何编译sass

    使用vscode来编译sass 第一步,在vscode中安装easy sass 下图是已经安装成功的状态 第二步,修改vscode的配置 “easysass.compileAfterSave”: true,  “easysass.forma…

    2025年4月2日 编程技术
    100
  • vscode中tab键失效

    在任务栏的tab选项卡下,依次点击文件—>首选项—>设置,打开设置界面 设置如下图: 注意全半角的问题(可直接拷贝) “emmet.syntaxProfiles”: {“vue-html”:”html”,…

    2025年4月2日
    100

发表回复

登录后才能评论