如下圖，點選滑鼠右鍵“另存為”，儲存（預設為ilc格式）。

2、根據不同的作業系統，將其copy到不同的webstorm安裝目錄中。

1.apple系統

複製下載的xml theme檔案，使用shift+command+g鍵進入：

~/Library/Preferences/WebIDE10/colors/ Starting

如果為版本4，則為以下目錄：

~/Library/Preferences/WebIde40/colors/

將xml檔案複製到此資料夾。

2.windows系統

將xml theme檔案複製到------C:/Users/USERNAME/.WebIde10/config/colors資料夾

第二步：新增主題檔案到webstrom

先開啟------->開啟.WebStorm10------->

新建一個名叫colors的資料夾------然後將下載的檔案放進去

3.linux

將xml theme檔案複製到

~/.WebIde50/config/colors/

3、重啟WebStorm：

File > Settings > Editor > Colors & Fonts ，選擇剛才xml檔名的Cheme name，點選apply即可，如下圖所示。

webstorm新增多個專案到當前工作目錄：

通常我們會多個Project同時操作，這樣開啟多個視窗然後不斷切換會非常麻煩，WebSorm為我們提供了可以新增多個專案到工作目錄區：

1. Window版操作

File－> Settings －> Directories －> Add Content Root，選擇你要加入的Project 點選OK －> Apply －> OK 搞定。

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(上下兩屏)

本地歷史功能:
找回程式碼的好辦法

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

小夥伴們是不是已經對這款javascript的開發工具webstrom有所認識了呢，迫不及待的想去試試呢，保證你用了之後就愛不釋手。