Atom 编辑器实时预览 HTML 页面

编辑器实时预览 HTML 页面

为何寻找

每次预览 HTML 页面，都需要打开各种浏览器；哪怕不是调试，只是为了查看下效果；切换来切换去，各种刷新，感觉有些浪费时间；以前用过 DW 的实时预览，感觉这个功能很赞；又踏上了 atom 插件仓库慢慢寻找之路......

插件:atom-html-preview

官方描述：A live preview tool for Atom Editor. 简言之：Atom编辑器内实时预览的工具

获取方式

1.通过命令行安装

apm install atom-html-preview

2.通过编辑器内部的 install 搜索 atom-html-preview 安装

使用方式及效果

快捷键

• 默认快捷键： CTRL + P 调用，会和内置核心插件冲突(切换文件那个) — 非常不好
• 修改版快捷键： CTRL + F12 (感觉方便使用且没有冲突的快捷键)

#实时浏览器调用快捷键'atom-text-editor':'ctrl-F12':'atom-html-preview:toggle'

Tips

写在 keymap 里面的权重是最高的......较新版本的 atom 内置了 Dev Live Reload 这个插件；

这个插件的作用就是重新加载所有样式和规则，有点类似 linux 的 source xx.sh 一样..即时生效 调用快捷键是 CTRL + SHIFT + ALT +R

当然，关闭 atom 再开 atom 编辑器也能达到重新加载所有样式规则的效果......

总结

以上是生活随笔为你收集整理的Atom 编辑器实时预览 HTML 页面的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。