這篇文章帶給大家的內容是關於WebStorm使用的一些相關技巧，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
下面有較全的快捷鍵，慢慢熟練起來吧...
WebStorm混搭svn
WebStorm混搭nodeJS
以less和uglify -js為例
如何用npm在root下載模組
webstorm簡單介紹
官網位址：http://www.jetbrains.com/webstorm /features/index.html
欲先善其事，必先利其器，如題。看到網路上一篇介紹webstrom的文章，覺得功能確實強大，也知道為什麼阿里巴巴的前端傳到github上的文件為啥都有一個.idea 文件，（傳說淘寶內部推薦寫js用webstrom）
我們可以理解IDE 就是整合了許多你想要的功能，或是你不想要的功能。換句話說就是裝了很多插件的 editor ，所以到目前為止，我還覺得沒必要給它什麼插件。
所以接下來開始介紹webstrom的特色：
WebStorm 是JetBrains 推出的一款商業的 JavaScript 開發工具
#任何一個編輯器都需要保存(ctrl s)，這是所有win平台上編輯類軟體的特點，但是webstorm編輯文件右上角是沒有那個熟悉的* 的。
好處：省去了ctrl s之後，在結合Firefox的vim，基本上不動滑鼠就可以看到結果頁了。
壞處：沒有先前的 * 標識，萬一鍵盤誤操作也會立即儲存。
任何一個編輯器只要檔案關閉了就沒有歷史記錄了，但webstorm有。 vcs->Local History -> Show History（快捷鍵：ALT ~ -〉7）
好處：只要webstorm不關閉，你的檔案隨時可以回到之前的操作（這也是為啥在webstorm 裡ctrl y是刪除一行的原因了）。
壞處：webstorm關閉重啟後這些歷史記錄就沒有了；還有一個壞處就是由此帶來的記憶體消耗也必然比較大。
任何一個編輯器，除了伺服器svn之外，沒有本地版本，但webstorm提供一個本地檔案修改歷史記錄（快捷鍵：ALT SHIFT c，Mac中 ALT＋Option＋c）。也可以 Ctrl E 彈出最近開啟的檔案。
好處：相當於本地svn。
壞處：記憶體消耗也必然比較大。
整合了zencoding，HTML5，ftp，即時編輯（chrome）,自動完成,基於Mozilla的JavaScript調試器，JSLint、Less支援、CoffeeScript支援、Node.js、單元測試、整合Git和svn版本控制等特性。
在寫CSS中，會智慧的提示各種檔案以及圖片的路徑，就不用再去確認這個檔案是否存在了。
其他的特性就介紹了，想了解更多可以去webstrom官網繼續找。看完了這麼介紹以及那麼多給力的特性，是不是有種衝動馬上試試這款傳說中的前端神器啊？嗯。
首先在官方下載頁下載webstrom後，點選安裝，然後一直下一步，最後會出現需要註冊碼介面，因為webstrom是商業的IDE，而天朝的屌絲前端當然沒那麼錢去買那麼昂貴的神器了，不用擔心，我們可以用WebStorm的密鑰來學習使用這款前端神器。嘿嘿~~~~
安裝成功後，一定會有些不適，就像我一樣覺得這配色真的太戳了。還有一些設定也不是我也要的。那麼以下我就列出我習慣的設定。
如何改變主題（字型&配色）:
File -> settings -> Editor -> colors&fonts -> scheme name.主題下載位址
如何讓webstorm啟動的時候不開啟工程檔案：
File -> Settings->General去掉Reopen last project on startup.
如何完美顯示中文：
File -> Settings->Appearance中勾選Override default fonts by (not recommended)，設定Name:NSimSun，Size:12
如何顯示行號：
File -> Settings->Editor，」Show line numbers」打上勾，就顯示行號了
#如何程式碼自動換行：
File -> settings -> Editor “Use Soft Wraps in editor” 打上鉤，程式碼就自動換行了
#如何點擊遊標，顯示在本行末尾：
File -> Settings->Editor “Allow placement of caret after end of line”去掉勾就行了。
如何修改快鍵鍵：
File -> Settings->Keymap，然後雙擊要修改快速的功能會有提示框出來，按提示操作
換成自己熟悉編輯器的快鍵鍵：
File ->Settings->Keymap，支援像Visual Studio、Eclipse、NetBeans這樣的主流IDE。
javascript類別庫提示。
File -> settings -> Javascript -> Libraries -> 然後在列表裡選擇自己常用到的javascript類別庫，最後Download and Install就ok了.
在開發js時發現，需要ctrl return 才能選候選項：
File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: “Smart” 改為“Always”
js提示比較遲緩
File -> Code Completion -> Autopopup in 下1000改為0
git設定：
File -> settings -> Editor -> github，進去改github的帳戶，如果沒有git則不需要.
插件安裝：
File - >plugins，然後就選擇給力的插件們再安裝.(“css-X-fire”插件,用於當使用firebug修改css屬性時，編輯器內的css程式碼也會改變。）
以後更新
收藏功能:
當工程目錄很龐大時，有些子目錄很常打開，但層級又很深，這時候可以把目錄加入到收藏夾裡面，加入成功後，左邊有個「Favorites」選單
麵包屑導航：
除了左側的工程頁面，可以選擇目錄之外，在頂部選單下有一個類似網站麵包屑導航一樣的目錄也可以實現相同功。點選每個目錄就會有下拉式選單顯示其下的子目錄，很實用.
建構器介面:
註解符合格式的話就會出現。如果是js檔案則是js類別的函數和物件；css檔案的話則是這個css檔案的概括；html檔案的話則是節點的結構圖。話說這幾個就是為了方便查看程式碼的結構性.
todo介面：
給程式碼加上todo註解就會出現這個介面
雙欄程式碼介面：
右鍵點選程式碼標籤上的文件，然後右鍵-> spilt vertically(左右兩螢幕)或spilt horizontally(上下兩螢幕)
#本地歷史功能:
找回程式碼的好方法
webstorm中只整合了git的常用操作，並不能完全替代命令列工具。在介面的右下角可以查看處於哪個git分支。也可以在上面點選切換或新建分支。
查看目前程式碼與版本庫程式碼的差異:
右鍵點選程式碼介面任意區域，選擇git -> compare with然後選擇要比較的版本庫。
Editing編輯相關快速鍵
Ctrl Space：
Basic code completion (the name of any class, method or variable) 基本程式碼完成（任何類別、函數或變數名稱），改為Alt S
Ctrl Shift Enter：
Complete statement 補全目前語句
Ctrl P：
Parameter info (within method call arguments) 參數資訊包含方法呼叫參數
Ctrl mouse over code
Brief Info 簡單資訊
Ctrl F1
Show description of error or warning at caret 顯示遊標所在位置的錯誤訊息或警告訊息
#Alt Insert
Generate code…（Getters, Setters, Constructors）新建一個檔案或產生程式碼，…建構函數，可以建立類別裡面任何欄位的getter與setter方法
#Ctrl O
Override methods 重載方法
#Ctrl I
Implement methods 實作方法
#Ctrl Alt T
Surround with…（if, else, try, catch, for, etc）用* 來圍繞選取的程式碼行，（ * 包括if 、 while 、 try catch 等）
#Ctrl /
Comment/uncomment with line comment 行註解/取消行註解
Ctrl Shift /
Comment/uncomment with block comment 區塊註解/取消區塊註解
Ctrl W
Select successively increasing code blocks 選擇程式碼區塊，一般是增量選擇
Decrease current selection to previous state 上個快速鍵的回退，減量選擇代碼
Context info 上下文資訊
Ctrl Shift V
Paste from recent buffers 貼上緩衝器中最新的內容
Ctrl D
Duplicate current line or selected block 複製目前行或所選程式碼區塊
Ctrl Y
Delete line at caret 刪除遊標所在位置行
Ctrl Shift J
Smart line join（HTML and JavaScript only）加入智慧行（HTML 和JavaScript）
Ctrl Enter
Smart line split（HTML and JavaScript only）分離智慧行（HTML 和JavaScript）
Shift Enter
Start new line 另起一行
Ctrl Shift U
Toggle case for word at caret or selected block遊標所在位置大小寫轉換
Ctrl Shift ]/[
Select till code block end/start 選擇直到程式碼區塊結束/開始
#Ctrl Delete
Delete to word end 刪除文字結束
#Ctrl Backspace
Delete to word start 刪除文字開始
# Ctrl NumPad /-
Expand/collapse code block 擴充功能/縮減程式碼區塊
Ctrl Shift NumPad
Expand all 擴充所有
Usage Search搜尋相關快速鍵
##Running運行
Alt Shift F10
Alt Shift F9
Shift F10
Shift F9
Ctrl Shift F10
Ctrl Shift X
##Debugging Debugging相關快速鍵
F8
Step over 不進入函數
#F7
Step into 單一步驟執行
#Shift F7
Smart step into 智慧單步執行
#Shift F8
Step out 跳出
#Alt F9
Run to cursor 運行到遊標處
Alt F8
Evaluate expression 評估表達
F9
Resume program 重新開始程式
Ctrl F8
Toggle breakpoint 切換斷點
Ctrl Shift F8
#View breakpoints 查看斷點
Navigation 定位相關快速鍵
#Ctrl N
Go to class跳到指定類別
Ctrl Shift N
Go to file 透過檔案名稱快速尋找工程內的檔案
Ctrl Alt Shift N
Go to symbol 透過一個字元尋找函數位置
Alt Right/ left
Go to next/ previous editor tab 進入下一個/ 上一個編輯器選項
#F12
Go back to previous tool window 進入上一個工具視窗
Esc
Go to editor（from tool window） 從工具視窗進入編輯器
#Shift Esc
Hide active or last active window 隱藏活動視窗
Ctrl Shift F4
Close active run/message/find/…tab 關閉活動….標籤
Ctrl G
Go to line 跳到第幾行
Ctrl E
Recent files popup 彈出最近開啟的檔案
Ctrl Alt Left/Right
Navigate back/forward 導覽前進/後退
Ctrl Shift Backspace
Navigate to last edit location 向最近編輯定位導航
Alt F1
Select current file or symbol in any view 尋找目前選取的程式碼或檔案在其他介面模組的位置
Ctrl B or Ctrl Click
Go to declaration跳到定義處
Ctrl Alt B
Go to implementation(s)跳轉方法實作處
Ctrl Shift B
Go to type declaration 跳轉方法定義處
Ctrl Shift I
Open quick definition lookup 開啟定義快速尋找
Ctrl U
#Go to super-method/super-class 跳轉方法/超階級
Alt Up/Down
Go to previous/next method 在方法間快速移動定位
Ctrl ] /[
Move to code block end/start 跳到編碼區塊結束/開始
Ctrl F12
File structure popup 檔案結構彈出
#Ctrl H
Type hierarchy 類型層次
#Ctrl Alt H
Call hierarchy 呼叫層次結構
#F2 / Shift F2
Next/previous highlighted error 跳到後一個/前一個錯誤，高亮錯誤或警告快速定位，使用這個快捷鍵可以快速在出錯的語句之間進行跳躍。
F4/Ctrl Enter
Edit source/ View source 編輯原始碼/查看原始碼
Alt Home
Show navigation bar 顯示導覽列
F11
Toggle bookmark 切換標記
#Toggle bookmark with mnemonic 採用記憶切換標記
Go to numbered bookmark 跳到有編號的標記
Show bookmark 顯示標記
Refactoring 重構相關快速鍵
Copy 拷貝
Move 移動
Safe Delete 安全刪除
Rename 重新命名
Inline Variable 嵌入變數
Extract Method( Javascript only)提取函數
Introduce Variable 引入變數
Introduce Field 引入域
Introduce Constant 引入常數
VCS/Local History 版本控制系統/ 本地歷史相關快捷鍵
'VCS'quick popup 快速彈出VCS
Commit project to VCS 提交項目至VCS
Update project from VCS 從VCS 更新項目
View recent changes 查看最新改變
General 常用的相關快速鍵
Find action 尋找並呼叫編輯器的功能
Open corresponding tool window 快速切換開啟介面模組
Toggle full screen mode 切換全螢幕模式
Toggle maximizing editor 切換最大化編輯器
Add to Favorites 將目前檔案增加至收藏夾
Inspect current file with current profile 使用目前屬性檢查目前檔案
Quick switch current scheme 快速轉換現有組合
Open setting dialog 開啟設定對話框
Switch between tabs and tool window 標籤和工具窗的轉換（與windows快捷鍵衝突）
以上是WebStorm使用的一些相關技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
