合理使用前端开发工具以避免不必要的错误

前端开发工作中，难免会因为自身的一些粗心大意而照成一些错误，比如说单词拼写、路径引用、符号写错等等，对于这些问题往往自己很难发现，然而通过给前端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需要同时判断，严格区分的时候

1 2 3 4

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、第三方库)