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