前端開發工作中，難免會因為自身的一些粗心大意而照成一些錯誤，比如說單詞拼寫、路徑引用、符號寫錯等等，對於這些問題往往自己很難發現，然而通過給前端IDE添加插件是可以解決的。

• 順便總結一下常見代碼問題（待更新）：

1. json和數組為空判斷（不要直接判斷是否為空）

1 //json
2 var a = {};
3 a && Object.keys(a).length
4 //array，特別是接口返回數組數據時不要直接判斷其長度
5 var a = [];
6 a && a.length

　　2. undefined 和 null需要同時判斷，嚴格區分的時候

　　3. if判斷只寫一個“=”號，導致變量再判斷時直接被賦值

　　4. 文件命名和文件引用，單詞拼寫不一致，導致編譯無法通過

　　5. 函數、變量引用時，單詞多/少個字母

　　6. 函數、變量定義使用關鍵字或保留字

　　7. 縮進未統一，和其他開人員不一致，當啟用代碼檢查後，導致構建失敗

　　8. 變量連等定義

1 var a = b = 0;
2 //等同於
3 var a = 0;
4 window.b = 0;
5 //當b改變時，a並沒有改變

　　9. 避免在變量聲明之前引用變量（變量申明提升）

　　10. 函數調用時漏傳參數

　　11. 組件（比如vue、reactjs）生命周期結束時未卸載綁定的事件

• 實用插件

　　1. emmet語法提示，提高代碼開發效率

　　2. 特殊文件（如less、sass、jade、jsx、vue等）高亮，方便閱讀，提高代碼可讀性、可維護性

　　3. **代碼檢查**（htmlhint，jshint、csslint、sasshints等），可嚴格按照代碼規範進行實時檢查並提示

　　4. **獲取當前文件的相對路徑**，可快速復制路徑
　　1) sublime text3 -> "Copy Relative Path"
　　2) brackets -> "Get Current File Path"
　　
　　5. 代碼格式化，格式化不規範代碼

　　6. 縮進輔助線，提高代碼的清晰度



　　7. 圖片hover顯示
　　 1) sublime text3 -> "hover image preview"
　　2) brackets -> "Inline Image CSS or HTML Image Tag"

　　8. 代碼提示(原生js、第三方庫)

合理使用前端開發工具來避免不必要的錯誤