webstorm、phpstorm、idea等使用技巧记录

概述

此文章用来记录jetbrain系列工具使用的小技巧。如果没有特别说明的话，这些技巧在webstorm、phpstorm、idea中是通用且是跨平台的。

live edit功能与浏览器实现同步实现步骤

live edit是一个免刷新的功能，能捕捉到页面的改动（css、html、js改动），然后浏览器自动刷新，这样提高了开发的效率。很赞的一个功能，唯一不足的是，要安装JB插件到浏览器中，对于不能安装该插件的浏览器来说，该功能就鸡肋了。

1. 打开WebStore的设置对话框，找到live edit选项，选中Enable live editing。
   

2. 打开Chrome浏览器，进入Chrome网上商店，搜索JetBrains IDE Suport扩展程序。点击“添加至Chrome“按钮，安装该扩展程序到Chrome。这时候，Chrome浏览器工具栏上就会出现一个JB图标。注(有时可能在网上商店里搜索不到，我这里提供了一个地址：https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji )

3. 在WebStorm中新建一个html文件，然后在页面内单击鼠标右键，选择debug选项。

4. 这时，webStorm会启动默认浏览器，并且激活JB浏览器插件。

5. 返回到Webstorm编辑器，尝试修改页面中的内容，然后打开浏览器，看看页面是否自动刷新了没。如果配置正确的话，一改动代码，浏览器会立刻刷新的，这简直就是重构开发的圣器呀。

webstorm内置服务器失效的问题

默认情况下，我们可以直接运行本地的html页面，它内部会开启64432端口来运行我们的页面，这样我们不要配置烦杂的后台环境，也可以简单测试一些需要服务器配合的页面了。启动服务的方式如下：

如图我们可以有三种方式或者通过快捷键的方式来启动内置服务器了。这时会在浏览器打开http://localhost:63342/projectName/*.html这样的页面。可是有一次配置了sftp导致了启动不了内置服务。原因是webstom会把项目当作sftp中的项目发布出去。而发布的url是web server root url指定的。如图所示：

所以每次我们运行的项目中的页面的时候，我们希望是通过内置服务器运行的，但是浏览器中打开的连接是图中红线指定的URL。所以我们可以将其置空，告诉浏览器不要使用sftp指定的URL，而是使用内置服务器生成的URL。（完美搞定）

webstorm中设置nodejs使它能智能提示。

这是我在SF问题社区中的提的问题，问题可见http://segmentfault.com/q/1010000002447282。默认情况下。我们写的NodeJS脚本是不会智能提示的，如图所示：

图中是一个NodeJS的服务器程序，我们让服务器监听端口时，下面显示的只能提示都来自ECMASript。那么如何开启呢？

第一步，File→setting→language and frameworks→javascript→libraries→勾选要用到的库，即（Node.js v0.10.24 Core Modules）

第二步，编辑刚才勾选的项目。选中该项目并且单击右则的Edit按钮，IDE会弹窗一个窗口，如下所示：

如果先前箭头指向的部分已经自动存在，那么我们无需配置其他的选项，退出编辑窗口，保存配置就行了，如果不出意外的话，智能提示就能使用了。如果箭头指向的部分显示为空的话，那怎么办呢？别急，我们接着配置就行了。同样按下面的顺序打开File→setting→language and frameworks->Node.js and NPM!
图片描述
在第二个箭头指向的地方，即sources of Node.js Core Modules指向的地方，有可能出现两种情况，第一种就是上面图上显示的那样，显示Core Module已经安装了。另外一种是http://segmentfault.com/q/1010000002447282提问中显示的情况，

如果是这种情况的话，单击Configure按钮下载源码即可，下载完成后，不做其他的修改，保存配置，退出即可。
如果是第一种情况的话，即sources of Node.js Core Modules下面的选项不为空，但是源码又没下载，这时就得靠自己手动下载NodeJS的源码,下载后得到的是一个归档压缩包，解压它并建议放在NodeJS安装的目录下。

准备就绪后，重复第一步和第二步的操作。单击图中箭头指向的按钮。
由于NodeJS的源代码不是单一的JS文件。所以选择添加目录选项（attach Directories）。最后把刚下载好的源码添加到目录中去。

运用并且保存更改的配置后，不出意外的话，在项目的External Libraries会出现我们刚才添加的库。

这时，智能提示就能使用了。
除此之外，我们还以按住CTRL键并点击所选择的方法，可以看看他的源码实现。ok，总结来说，配置还是蛮麻烦的。并且以后智能提示这块，原理和示例差不多。

如何快速比较两个文件的不同

这也是一个很常用的功能吧，有时候想比较两个文件的异同，但是又不想使用svn或者其他的diff工具的话，这时webstorm就派上了用场了。使用方法也很简单，选中两个文件，然后按下CTRL+D快捷键，这时webstorm的diff工具就被调用了。

webstorm配置sftp

在配置sftp之前，需要确认的是你的linux已经配置了ssh，至于ssh的配置可以参考我的这篇文章：http://segmentfault.com/blog/liangyi/1190000002492828

如果已经安装好了，可以直接配置了，配置的流程如下：Tools->Deployment->Configuration,之后就会弹出一个配置的对话框。如图所示：

注意一定要选择SFTP，不能选择FTP和FTPS。Name的配置项最好选择对应服务器的IP地址名。之后就是各种配置了。

配置的时候有个要注意的地方。如果设置了Web server root URL就会导致上面说的那样。导致webstorm静态服务器的指向会一直指到这个URL地址。

填写完毕后，单击测试按钮，即Test SFTP connection，第一次会要求你确认验证一些信息。如果不粗意外的话，那么上都能正确连接上。

测试测功后，我们就可以，把服务器上的项目导入的本地来了，这样本地不需要配置一些复杂的环境，而只是安静的提供编码环境了。