webstorm簡單介紹,webstrom基本使用

WebStorm混搭svn

WebStorm混搭nodeJS

    以less和uglify-js為例

    如何用npm在root中下載模組 

----------------------------------------------------------------------------------------------

webstorm簡單介紹

官網地址：http://www.jetbrains.com/webstorm/features/index.html

參考地址：http://www.html5jscss.com/ide-webstrom-27.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 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+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快捷鍵衝突）