【WebStorm】前端開發IDE利器

#【WebStorm】前端開發IDE利器 工欲善其事，必先利其器，敲代碼前，先選好編輯器，好的工具能夠幫助咱們進行高效的開發和寫出優質的代碼。結合WebStorm（Mac）來分析一個優秀高效的開發工具應該具有的幾個方面功能：

代碼格式化Format

快速格式化代碼，不須要浪費額外的時間處理不規範的代碼格式（固然，敲代碼的時候仍是要適當的有意識的注意代碼格式）

1. 默認快捷鍵Format: option + command + l
2. reformat code when saving a file:(https://stackoverflow.com/questions/21217791/how-to-auto-format-code-in-webstorm)

• install plugin: "Save Actions";
• config plugin: File - Settings - Other Settings; check "Format file" option.

代碼模版snippet

好比/// + tab時自動生成定義好的註釋代碼片斷。但是在重複性代碼中節省開發時間

1. 自定義代碼模版(https://www.jianshu.com/p/7a45601eab66)

自動檢測錯誤代碼

各類代碼工具自動提示html/css/js等不規範的地方，節省查找低級語法或者不規範的地方

1. 內置的Eslint代碼修復處理

• option + enter

• 選擇ESLint：Fix current file

編輯快捷鍵

任何一個優秀的編輯器必不可少的（一下列出開發中經常使用的webstrom快捷鍵）

• 查找並打開文件 command + shift + o
• 選中光標所在位置的單詞 option +（上/下）
• 光標以單詞爲單位跳轉 option + （左/右）
• 切換標籤頁面 command + option + （左/右）
• 關閉當前標籤頁 command + w
• 選中行： 光標所在行 command + c
• 光標移動到行末/行首： command + (左/右）
• 選中多個單詞： 選中單詞 --》 control + comand + g

自動Debug

其實使用chrome和火狐的debug功能已經知足平常開發中的debug，方便快捷。 (Webstorm結合chrome調試js)https://blog.csdn.net/sujun10/article/details/54139560

Git 或 Svn 版本控制

項目代碼管理，webstorm中相關功能仍是很全面的，可自行了解

自動文檔工具

開發過程當中應保留相關開發文檔，編輯器自動生成代碼文檔註釋。

1. 內置JSDoc註釋

• 函數前 /** + enter