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 horizontally(上下兩屏)
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相關快捷鍵

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 查看斷點

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