配置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扩展，这里直接给出地址啦

• JetBrains IDE Suport

• 安装好之后在地址栏的右边会有一个JB的小图标

• 如果单击这个小图标可以切换到WebStorm的页面中

• 最后，要实现在WebStorm中编辑代码，而不刷新浏览器自动实时更新，需要在WebStorm中开启Debug模式打开页面，直接在Project面板右击页面选择Debug就行啦

• 一切OK，现在在WebStorm修改，然后切换到chrome查看一下，是不是已经同步过来啦；浏览器上面的黄色背景提示条一定不能关闭，关闭了就不会实时同步啦

阅读全文