概述

此文章用來記錄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

所以每次我們執行的專案中的頁面的時候，我們希望是通過內建伺服器執行的，但是瀏覽器中開啟的連線是圖中紅線指定的URL。所以我們可以將其置空，告訴瀏覽器不要使用sftp指定的URL，而是使用內建伺服器生成的URL。（完美搞定）

webstorm中設定nodejs使它能智慧提示。

這是我在SF問題社群中的提的問題，問題可見http://segmentfault.com/q/1010000002447282。預設情況下。我們寫的NodeJS指令碼是不會智慧提示的，如圖所示：

第一步，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，第一次會要求你確認驗證一些資訊。如果不粗意外的話，那麼上都能正確連線上。

測試測功後，我們就可以，把伺服器上的專案匯入的本地來了，這樣本地不需要配置一些複雜的環境，而只是安靜的提供編碼環境了。