Atom的 浏览器预览 快捷键是什么呢

Atom的 浏览器预览 快捷键是什么呢

代码写好之后,想在浏览器中实时预览的 快捷键是什么

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
guly 2018-03-15 09:25:38

你好,安装插件 atom-html-preview

详细安装步骤如下:

获取方式

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 编辑器也能达到重新加载所有样式规则的效果......

效果图

我用 BS 框架写的页面来测试….可以正确预览,内部 css 是 cdn 也能正确识别。

http://img1.sycdn.imooc.com//climg/5aa9cb620001949808000434.jpg

http://img1.sycdn.imooc.com//climg/5aa9cb62000149ce06000414.jpg

如果解决您的问题请采纳,祝学习愉快!





问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师