WebStorm使用教程
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的密鑰來學習使用這款前端神器。嘿嘿~~~~
安裝成功后，肯定會有些不適，就像我一樣覺得這配色真的太戳了。還有一些設置也不是我也要的。那么以下我就列出我習慣的設置。
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改為0git配置：
File -> settings -> Editor -> github，進去改github的賬戶，如果沒有git則不需要.插件安裝：
File ->plugins，然后就選擇給力的插件們再安裝.(“css-X-fire”插件,用于當使用firebug修改css屬性時，編輯器內的css代碼也會發生變化。）以后更新
webstorm使用心得
收藏夾功能:
當工程目錄很龐大時，有些子目錄很經常打開，但層級又很深，這時候可以把目錄添加到收藏夾里面，添加成功后，左側有個“Favorites”菜單面包屑導航：
除了左側的工程頁面，可以選擇目錄之外，在頂部菜單下有一個類似網站面包屑導航一樣的目錄也可以實現相同功。點擊每個目錄就會有下拉菜單顯示其下的子目錄，很實用.構造器界面:
注釋符合格式的話就會出現。如果是js文件則是js類的函數和對象；css文件的話則是這個css文件的概括；html文件的話則是節點的結構圖。話說這幾個就是為了方便查看代碼的結構性.todo界面：
給代碼加todo注釋就會出現這個界面雙欄代碼界面：
右擊代碼選項卡上的文件，然后右鍵 -> spilt vertically(左右兩屏)或者spilt horizontally(上下兩屏)本地歷史功能:
找回代碼的好辦法
WebStorm集成git使用
webstorm中只集成了git的常用操作，并不能完全替代命令行工具。在界面的右下角可以查看處于哪個git分支。也可以在上面點擊切換或者新建分支。
查看當前代碼與版本庫代碼的差異:
右擊代碼界面任意區域，選擇git -> compare with然后選擇要比較的版本庫。
webstorm快捷鍵說明
Editing編輯相關快捷鍵
Ctrl + Space：
Basic code completion (the name of any class, method or variable) 基本代碼完成（任何類、函數或者變量名稱），改為Alt+SCtrl + 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 選擇代碼塊，一般是增量選擇Ctrl + Shift + W
Decrease current selection to previous state 上個快捷鍵的回退，減量選擇代碼Alt + Q
Context info 上下文信息Alt + Enter
Show intention actions and quick-fixes 意圖行動，快速見效Ctrl + Alt + L
Reformat code 根據模板格式對代碼格式化Tab/ Shift + Tab
Indent/unindent selected lines 對所選行進行縮排處理/撤銷縮排處理Ctrl + X or Shift + Delete
Cut current line or selected block to clipboard 剪切當前行或所選代碼塊到剪切板Ctrl + C or Ctrl + Insert
Copy current line or selected block to chipboard 拷貝當前行或者所選代碼塊到剪切板Ctrl + V or Shift + Insert
Paste from clipboard 粘貼剪切板上的內容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 擴張所有Ctrl + Shift+ NumPad-
Collapse 縮減所有Ctrl + F4
Close active editor tab 關閉活躍編輯標簽
Search/replace搜索/替代相關快捷鍵
Ctrl + F?
Find 當前文件內快速查找代碼Ctrl + Shift + F?
Find in path 指定文件內尋找路徑F3?
Find next 查找下一個Shift + F3?
Find previous 查找上一個Ctrl + R?
Replace 當前文件內代碼替代Ctrl + Shift + R?
Replace in path 指定文件內代碼批量替代
Usage Search搜索相關快捷鍵
Alt + F7/Ctrl + F7?
Find usages/Find usages in file 找到使用/在文件找到使用Ctrl + Shift + F7?
Highlight usages in file文件中精彩使用Ctrl + Alt + F7?
Show usages 顯示使用
Running運行
Alt + Shift + F10?
Select configuration and run 選擇構架，運行Alt + Shift + F9?
Select configuration and debug 選擇構架，修補漏洞Shift + F10?
Run 運行Shift + F9?
Debug 修補漏洞Ctrl + Shift + F10?
Run context configuration from editor 從編輯運行內容構架Ctrl + Shift + X?
Run command line 運行命令行
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 切換標記Ctrl + F11?
Toggle bookmark with mnemonic 采用記憶切換標記Ctrl + #[0-9]?
Go to numbered bookmark 跳轉到帶編號的標記Shift + F11?
Show bookmark 顯示標記
Refactoring?重構相關快捷鍵
F5
Copy 拷貝F6?
Move 移動Alt + Delete?
Safe Delete 安全刪除Shift + F6?
Rename 重新命名Ctrl + Alt + N?
Inline Variable 嵌入變量Ctrl + Alt + M?
Extract Method( Javascript only) 提取函數Ctrl + Alt + V?
Introduce Variable 引入變量Ctrl + Alt + F?
Introduce Field 引入域Ctrl + Alt + C?
Introduce Constant 引入常量
VCS/Local History?版本控制系統/ 本地歷史相關快捷鍵
Alt + BackQuote( )?
‘VCS’quick popup 快速彈出 VCSCtrl + K?
Commit project to VCS 提交項目至VCSCtrl + T?
Update project from VCS 從VCS 更新項目Alt + Shift + C?
View recent changes 查看最新改變
General?常用的相關快捷鍵
Ctrl + Shift +A?
Find action 查找并調用編輯器的功能Alt + #[0-9]?
Open corresponding tool window 快速切換打開界面模塊Ctrl + Alt + F11?
Toggle full screen mode 切換全屏模式Ctrl + Shift + F12?
Toggle maximizing editor 切換最大化編輯器Alt + Shift + F?
Add to Favorites 將當前文件添至收藏夾Alt + Shift + I?
Inspect current file with current profile 使用當前屬性檢查當前文件Ctrl + BackQuote( )?
Quick switch current scheme 快速轉換現有組合Ctrl + Alt + S?
Open setting dialog 打開設置對話框Ctrl + Tab?
Switch between tabs and tool window 標簽和工具窗的轉換（與windows快捷鍵沖突）
轉載于:https://www.cnblogs.com/wangbobobobo/p/9757441.html
總結
以上是生活随笔為你收集整理的WebStorm使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 细说PHP（三）
- 下一篇： String有两种赋值方式