团队协作代码规范
两个程序员可以写出3种风格代码,前端尤其明显(我也曾经是写过后端代码的人),主要是JS留下的后遗症。虽然现在主流的编辑器如webstorm或者Visual Studio可能加上eslint强行限制你那天马行空的代码。我对代码本身就有”洁癖”,对自己对别人也一样,如何防止你那讨厌的同事写上糟糕的代码来”污染”你那圣神的代码,这篇文章会给出”紧箍咒”让所有人必须遵从约定好的代码风格以保存项目的整洁性。
eslint standards
业界已经提出一种标准方案–JavaScript Standard Style
以下的代码演示均来《webpack渐入佳境之打包优化篇》
我们需要安装以下依赖
|
|
- 根目录下创建.eslintrc文件
|
|
这样eslint就可以帮我们校验代码,但因为我们这个项目是vue开发,eslint它并不能识别里面的js代码(.vue文件并非传统的.js文件),我们需要有一个东西可以识别任意格式文件里面的javascript标签
- eslint-plugin-html
|
|
修改.eslintrc
|
|
修改package.json 添加命令去校验代码
|
|
测试一下
|
|
可以看到控制台已经抛出错误,例如空格符跟tab缩进混用, 多打了一个空格之类。eslint可以帮我们处理比较简单错误
修改package.json
|
|
测试
|
|
我们发现错误减少了,但还是报了空格和tab缩进混合使用错误,这些问题在很多现代编辑器很帮你处理好,我们也可以手动修改覆盖编辑器默认属性。
创建.editorconfig
|
|
“root = true”是指只读取到这个配置文件就结束,不再往上层目录找,end_of_line指定回车换行符,window使用的是CRLF,linux和osx都是LF
但是每次都敲命令行感觉又很繁琐,能不能让它自动检查每次代码更新进行eslint
|
|
修改.eslintrc
|
|
这样处理是因为webpack最终都是需要经过babel编译(es5),而eslint它是支持es6和es7,这样可能会导致一些奇奇怪怪的问题。
配置eslint-loader
|
|
enforce: ‘pre’ 是因为.vue文件我们已经制定vue-loader去处理,我们不希望eslint-loader处理.vue文件,我们只是希望在vue-loader处理之前先进行eslint语法检查。
最后,如果你希望所有人都把本地的代码规范问题都解决后才能提交,可以尝试这么做
|
|
它会在.git文件里面生成一个hooks,它会读取我们在package.json里面配置的信息
修改package.json
|
|
这样我们每次 git commit -m ‘log’的时候它都会先进行一次eslint检查,通过了才能成功commit
注意,安装husky之前必须确保项目中已经有.git文件,否者hook将会写入失败。