WebStorm的入門使用介紹總結

這篇文章要跟大家分享的是關於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使用技巧

• 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使用心得

• WebStorm的收藏功能:
  當工程目錄很龐大時，有些子目錄很常打開，但層級又很深，這時候可以把目錄加入到收藏夾裡面，加入成功後，左側有個「Favorites」選單

• WebStorm的麵包屑導航：
  除了左側的工程頁面，可以選擇目錄之外，在頂部選單下有一個類似網站麵包屑導航一樣的目錄也可以實現相同功。點選每個目錄就會有下拉式選單顯示其下的子目錄，很實用.

• WebStorm的建構器介面:
  註解符合格式的話就會出現。如果是js檔案則是js類別的函數和物件；css檔案的話則是這個css檔案的概括；html檔案的話則是節點的結構圖。話說這幾個就是為了方便查看程式碼的結構性.

• WebStorm的todo介面：
  給程式碼加上todo註解就會出現這個介面

• WebStorm的雙欄程式碼介面：
  右鍵點選程式碼標籤上的文件，然後右鍵-> spilt vertically(左右兩螢幕)或spilt horizo​​ntally(上下兩螢幕)

• WebStorm的本地歷史功能:
  找回程式碼的好方法

#WebStorm整合git使用

webstorm中只整合了git的常用操作，並不能完全取代命令列工具。在介面的右下角可以查看處於哪個git分支。也可以在上面點選切換或新建分支。

• 查看目前程式碼與版本庫程式碼的差異:
  右鍵程式碼介面任意區域，選擇git -> compare with然後選擇要比較的版本庫。

webstorm快捷鍵說明

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 選擇程式碼區塊，一般是增量選擇

• ##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 關閉活躍編輯標籤
  

#WebStorm的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 指定檔案內程式碼批次替代
  

WebStorm的Usage Search搜尋相關快速鍵

• Alt F7/Ctrl F7 

  Find usages/Find usages in file 找到使用/在檔案找到使用
  

• #Ctrl Shift F7 

  Highlight usages in file檔案中精彩使用
  

• #Ctrl Alt F7 

  Show usages 顯示使用
  

WebStorm的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 執行命令列
  

WebStorm的Debugging Debugging相關快速鍵

WebStorm的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 重新開始程式

• 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 關閉活動….標籤

• 
  

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 顯示標記

#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中文網其他相關文章！