• 技术文章 >开发工具 >atom

    浅谈Atom实现HTML实时预览的方法

    青灯夜游青灯夜游2021-03-17 10:36:00转载584
    本篇文章给大家介绍一下Atom 编辑器实现HTML实时预览的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    相关推荐:《atom教程

    基础实现:

    快捷键

    在编辑框中按 Ctrl + Shift + M 可以打开原生预览。(不带CSS样式)

    插件实现:atom-html-preview

    点击File->settings–>install-> 搜索 atom-html-preview ->下载
    在编辑框中按 Ctrl + Shift + H 可以打开预览面板(带CSS样式)

    已经不需要像之前网上说的要修改快捷键了

    插件实现:Dev Live Reload

    调用快捷键:CTRL+SHIFT+ALT+R

    稍微高级点,浏览器内打开

    插件实现:brower-plus

    在Atom内打开浏览器

    这里写图片描述

    插件实现:atom-live-server

    在Atom外打开浏览器

    这里写图片描述
    快捷键比较多,可能和默认的有冲突,下一篇文章写快捷键修改。

    加入IIS

    不懂的可以查看百度百科https://baike.baidu.com/item/iis/99720?fr=aladdin
    Atom+IE,实时编辑IIS网站目录下的文件,写完刷新就行。
    如果使用Chrome,则可以安装LivePage 插件 ,实现页面自动刷新。

    插件实现:livereload

    写个gulp 任务跑 livereload插件,需要架成http。
    不会Gulp可以入门:https://www.gulpjs.com.cn/

    方法还有很多

    使用browser-sync
    browser-sync start --server -files “/.html,/.css”

    写在最后,既然你考虑选择atom,那么就要一试到底,学习某个IDE操作的时间成本是很高的,千万不要三心二意。

    更多编程相关知识,请访问:编程视频!!

    以上就是浅谈Atom实现HTML实时预览的方法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:Atom HTML 实时预览
    上一篇:Atom如何汉化?方法介绍 下一篇:Atom块注释插件multi-comment的安装和使用
    第16期线上培训班

    相关文章推荐

    • 浅谈Atom编辑器进行汉化的方法• atom常用插件推荐(vue语法高亮)• mac下Atom配置js语法校验的方法• 浅谈Atom怎么配置markdown的方法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网