Phpstorm&Webstorm 实时预览的实现live edit

为了开发的方便，需要在编辑器里修改，然后实时同步到浏览器进行查看，这里phpstorm和webstorm的配置相类似。

软件版本

PHPstorm 2017.1.3
网上找到的教程，都是基于老版本的，其中live eidt的选项都不存在。所以重新基于最新版本重新进行配置。

首先查看官方帮助文件

建议大家多看官方文件，搜索引擎的东西也靠不住，太老旧了。搜索live edit后看官方帮助文件

https://www.jetbrains.com/help/phpstorm/2017.1/live-editing-of-html-css-and-javascript.html?utm_medium=help_link&utm_source=from_product&utm_campaign=PS&utm_content=2017.1&search=live%20edit

安装支持插件和浏览器插件

Before you start

Install and enable the LiveEdit plugin. The plugin is not bundled with PhpStorm, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.
Make sure the JetBrains Chrome Extension is installed in your Chrome browser, see Installing JetBrains Chrome extension.

首先要安装PHPstorm的live edit插件

注意这里要实现实时预览的话，是需要重新添加插件的live edit
安装方法也是可以从上面的文档里查阅到的，我这里就简化下。

MAC 下按 command+,调出来配置界面，点击右侧的plugins插件菜单。
继续选择 install Jetbrains plugins，弹出窗口输入live edit，然后点击install安装或者updata升级，安装完毕重启PHPstorm。
下面为超级丰富的图示教程，安装过的也可以通过这个方法重启启用插件。