WebStorm使用的一些相關技巧

這篇文章帶給大家的內容是關於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 開發工具

1. #任何一個編輯器都需要保存(ctrl s)，這是所有win平台上編輯類軟體的特點，但是webstorm編輯文件右上角是沒有那個熟悉的* 的。
   好處：省去了ctrl s之後，在結合Firefox的vim，基本上不動滑鼠就可以看到結果頁了。 
   壞處：沒有先前的 * 標識，萬一鍵盤誤操作也會立即儲存。

2. 任何一個編輯器只要檔案關閉了就沒有歷史記錄了，但webstorm有。 vcs->Local History -> Show History（快捷鍵：ALT ~ -〉7）
   好處：只要webstorm不關閉，你的檔案隨時可以回到之前的操作（這也是為啥在webstorm 裡ctrl y是刪除一行的原因了）。
   壞處：webstorm關閉重啟後這些歷史記錄就沒有了；還有一個壞處就是由此帶來的記憶體消耗也必然比較大。

3. 任何一個編輯器，除了伺服器svn之外，沒有本地版本，但webstorm提供一個本地檔案修改歷史記錄（快捷鍵：ALT SHIFT c，Mac中 ALT＋Option＋c）。也可以 Ctrl E 彈出最近開啟的檔案。
   好處：相當於本地svn。 
   壞處：記憶體消耗也必然比較大。

4. 整合了zencoding，HTML5，ftp，即時編輯（chrome）,自動完成,基於Mozilla的JavaScript調試器，JSLint、Less支援、CoffeeScript支援、Node.js、單元測試、整合Git和svn版本控制等特性。

5. 在寫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改為0

• git設定：
  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 horizo​​ntally(上下兩螢幕)

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

WebStorm整合git使用

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

• ##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 快速彈出VCS
  

• Ctrl K 

  Commit project to VCS 提交項目至VCS
  

• Ctrl 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快捷鍵衝突）
  

#

以上是WebStorm使用的一些相關技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！