這篇文章要跟大家分享的是關於WebStorm的入門使用介紹總結，內容有一定的參考價值，有需要的朋友可以看一下，希望對你有幫助。
WebStorm建立在開源IntelliJ平台之上，JetBrains已經開發和完善了超過15年。其提供了統一的UI，可與許多流行的版本控制系統配合使用，確保在git，GitHub，SVN，Mercurial和Perforce之間提供一致的用戶體驗。 WebStorm提供可自訂功能，調整它以完全適合您的編碼風格，從快捷方式，字體和視覺主題到工具視窗和編輯器佈局。
WebStorm可以幫助您編寫出色的程式碼。其智慧編輯器具有程式碼完成，動態程式碼分析，程式碼格式化和重構，可提高您的工作效率，並將您的開發體驗提升到一個全新的水平。
WebStorm提供JavaScript，ECMAScript 6，TypeScript，CoffeeScript，Dart和Flow 的一流編碼協助。
WebStorm可以幫助您編寫HTML，CSS，Less，Sass和Stylus程式碼。
最重要的是，您可以受益於對Node.js和流行框架的高級支持，例如React，Angular，Vue.js，Meteor等。
WebStorm分析您的項目，為應用程式中定義的所有方法，函數，模組，變數和類別提供最佳程式碼完成結果。 Сoding協助是上下文感知的，也可以是特定於框架的。
在WebStorm中使用CSS時，享受屬性及其值的程式碼完成。在Less和Sass中，獲得mixins的幫助。當然，在HTML中，您可以獲得所有標籤和屬性的程式碼完成。
WebStorm有數百種內建檢查功能，涵蓋所有支援的語言。除此之外，您還可以使用ESLint，TSLint，Stylelint，JSCS，JSHint和JSLint。
當您鍵入時，WebStorm編輯器會直接報告所有錯誤和警告，並提供許多快速修復選項。
WebStorm具有可能問題的任何程式碼行都會標記在右側編輯器裝訂線中，因此您可以輕鬆地在長文件中發現錯誤和警告。
您也可以使用WebStorm為整個專案執行程式碼品質分析，並自動套用選定的快速修復程式。
WebStorm如何更改主題（字型&配色）:
File -> settings -> Editor -> colors&fonts -> scheme name.主題下載位址
如何讓webstorm啟動的時候不開啟工程檔案：
File -> Settings->General去掉Reopen last project on startup.
WebStorm如何完美顯示中文：
File -> Settings->Appearance中勾選Override default fonts by (not recommended)，設定Name:NSimSun，Size:12
WebStorm如何顯示行號：
File -> Settings->Editor，”Show line numbers”打上勾，就顯示行號了
WebStorm如何讓程式碼自動換行：
File -> settings -> Editor “Use Soft Wraps in editor” 打上鉤，程式碼就自動換行了
如何點選遊標，如何WebStorm顯示在本行末尾：
File -> Settings->Editor “Allow placement of caret after end of line”去掉勾就行了。
如何修改WebStorm快鍵鍵：
File -> Settings->Keymap，然後雙擊要修改快速的功能會有提示方塊出來，按提示操作
如何WebStorm換成自己熟悉編輯器的快鍵鍵：
File ->Settings->Keymap，支援像Visual Studio、Eclipse、NetBeans這樣的主流IDE。
javascript類別庫提示。
File -> settings -> Javascript -> Libraries -> 然後在列表裡選擇自己常用到的javascript類別庫，最後Download and Install就ok了.
在WebStorm中開發js時發現，需要ctrl return 才能選候選項：
File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: “Smart” 改為“ Always」
WebStorm中js提示比較遲緩設定策略
File -> Code Completion -> Autopopup in 下1000改為0
#WebStorm中git設定：
File -> settings -> Editor -> github，進去改github的帳戶，如果沒有git則不需要.
# WebStorm的插件安裝：
File ->plugins，然後就選擇給力的插件們再安裝.(“css-X-fire”插件,用於當使用firebug修改css屬性時，編輯器內的css代碼也會發生變化。）
WebStorm的收藏功能:
當工程目錄很龐大時，有些子目錄很常打開，但層級又很深，這時候可以把目錄加入到收藏夾裡面，加入成功後，左側有個「Favorites」選單
WebStorm的麵包屑導航：
除了左側的工程頁面，可以選擇目錄之外，在頂部選單下有一個類似網站麵包屑導航一樣的目錄也可以實現相同功。點選每個目錄就會有下拉式選單顯示其下的子目錄，很實用.
WebStorm的建構器介面:
註解符合格式的話就會出現。如果是js檔案則是js類別的函數和物件；css檔案的話則是這個css檔案的概括；html檔案的話則是節點的結構圖。話說這幾個就是為了方便查看程式碼的結構性.
WebStorm的todo介面：
給程式碼加上todo註解就會出現這個介面
WebStorm的雙欄程式碼介面：
右鍵點選程式碼標籤上的文件，然後右鍵-> spilt vertically(左右兩螢幕)或spilt horizontally(上下兩螢幕)
WebStorm的本地歷史功能:
找回程式碼的好方法
webstorm中只整合了git的常用操作，並不能完全取代命令列工具。在介面的右下角可以查看處於哪個git分支。也可以在上面點選切換或新建分支。
查看目前程式碼與版本庫程式碼的差異:
右鍵程式碼介面任意區域，選擇git -> compare with然後選擇要比較的版本庫。
WebStorm的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 上下文資訊
Show intention actions and quick-fixes 意圖行動，快速見效
Reformat code 根據模板格式對程式碼格式化
Indent/unindent selected lines 對所選行進行縮排處理/撤銷縮排處理
Cut current line or selected block to clipboard 剪下目前行或所選程式碼區塊到剪下板
Ctrl NumPad /-
Expand/collapse code block 擴充功能/縮減程式碼區塊
Expand all 擴充所有
Collapse 縮減所有
Close active editor tab 關閉活躍編輯標籤
Find 目前檔案內快速尋找程式碼
Find in path 指定檔案內尋找路徑
Find next 尋找下一個
Find previous 尋找上一個
Replace 目前檔案內程式碼替代
Replace in path 指定檔案內程式碼批次替代
Find usages/Find usages in file 找到使用/在檔案找到使用
Highlight usages in file檔案中精彩使用
Show usages 顯示使用
Select configuration and run 選擇架構，執行
Select configuration and debug 選擇架構，修補漏洞
Run執行
Debug 修補漏洞
Run context configuration from editor 從編輯執行內容架構
Run command line 執行命令列
##Alt F9
Alt F8
F9
F9
Resume program 重新開始程式
Ctrl F8
Toggle breakpoint 切換斷點
Ctrl Shift F8
View breakpoints 查看斷點
WebStorm的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 關閉活動….標籤
F11
Toggle bookmark 切換標記
Ctrl F11
Toggle bookmark with mnemonic 採用記憶切換標記
Ctrl #[0-9]
Go to numbered bookmark 跳到帶編號的標記
Shift F11
Show bookmark 顯示標記
#WebStorm的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 引入常數
在WebStorm中VCS/Local History 版本控制系統/ 本地歷史相關的快捷鍵
#Alt BackQuote ( )
'VCS'quick popup 快速彈出VCS
#Ctrl K
Commit project to VCS 提交項目至VCS
Ctrl T
Update project from VCS 從VCS 更新項目
#Alt Shift C
View recent changes 查看最新改變
#使用WebStorm時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快捷鍵衝突）
以上是WebStorm的入門使用介紹總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
