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

前端開發工做中，不免會由於自身的一些粗枝大葉而照成一些錯誤，好比說 單詞拼寫、路徑引用、符號寫錯等等，對於這些問題每每本身很難發現，然而經過給前端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須要同時判斷，嚴格區分的時候

var a;
var b = null;
a === undefined
b === 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、第三方庫)