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

前端開發工作中，難免會因為自身的一些粗心大意而照成一些錯誤，比如說單詞拼寫、路徑引用、符號寫錯等等，對於這些問題往往自己很難發現，然而通過給前端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需要同時判斷，嚴格區分的時候12

34vara;

varb =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、第三方庫)

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

前端開發工作中，難免會因為自身的一些粗心大意而照成一些錯誤，比如說單詞拼寫 路徑引用 符號寫錯等等，對於這些問題往往自己很難發現，然而通過給前端ide新增外掛程式是可以解決的。1.json和陣列為空判斷 不要直接判斷是否為空 1 json 2var a 3 a object.keys a lengt...

前端開發工具

sublime webstorm 具有關於js 的瀏覽器相容提示 chrome batarang angular的除錯外掛程式 git小烏龜 nodejs 壓縮和混淆工具 npm 自動安裝工具 grunt 合併和混淆工具 常用 bower 依賴管理工具 不建議使用 http server輕量級ser...

前端開發工具 FIS使用總結

首先要安裝fis，要安裝fis首先得 安裝node.js，安裝npm。安裝好後進入命令列。輸入 cd 你的專案的絕對路徑 fis server start 然後，瀏覽器的url中輸入 可以看到你的專案已經成功部署了。輸入 fis server open 可以開啟你剛才部署的根目錄 接下來你可以對你的...