配置sublime的LiveReload与webstorm的插件实现实时预览
# sublime配置LiveReload插件实现实时预览
LiveReload是很棒的插件,可以在浏览器中实时预览,但是在Sublime text3里,从Package Control中安装的LiveReload是无法使用的,但是可以选择手动安装解决
- Sublime端
直接clone到Packages文件夹
git clone https://github.com/Grafikart/ST3-LiveReload.git LiveReload
@前端进阶之旅: 代码已经复制到剪贴板
- 浏览器端
用的是chrome,在应用商店可以直接找到LiveReload,安装

- 配置
打开sublime
Preference>Package Settings>LiveReload>Settings User
{
"enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefresh"
]
}
@前端进阶之旅: 代码已经复制到剪贴板
- 实时预览
把html文件在浏览器中打开,点击一次图标中间的圆环变成原点就代表可以实时预览了。ST3中的文件保存一次,浏览器就会刷新一次,实时预览,很方便

-
sublime配上美美的透明插件,是不是很酷呢,再也不用来回切换了 -
透明插件:SublimeTextTrans

# WebStorm Live Edit与Google浏览器实时无刷新自动加载页面
-
在
WebStorm中是自带Live Edit功能的,只是默认没有开启 -
Ctrl + Alt + S-->Live Edit–> 勾选Enable live editing,如下图:

-
接下来就是要在Google浏览器中安装
JetBrains IDE Suport扩展,这里直接给出地址啦 -
安装好之后在地址栏的右边会有一个
JB的小图标
-
如果单击这个小图标可以切换到
WebStorm的页面中 -
最后,要实现在
WebStorm中编辑代码,而不刷新浏览器自动实时更新,需要在WebStorm中开启Debug模式打开页面,直接在Project面板右击页面选择Debug就行啦

- 一切OK,现在在
WebStorm修改,然后切换到chrome查看一下,是不是已经同步过来啦;浏览器上面