首页 > 代码库 > 合理使用前端开发工具来避免不必要的错误

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

前端开发工作中,难免会因为自身的一些粗心大意而照成一些错误,比如说单词拼写、路径引用、符号写错等等,对于这些问题往往自己很难发现,然而通过给前端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、第三方库)


 

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