团队协作代码规范

两个程序员可以写出3种风格代码,前端尤其明显(我也曾经是写过后端代码的人),主要是JS留下的后遗症。虽然现在主流的编辑器如webstorm或者Visual Studio可能加上eslint强行限制你那天马行空的代码。我对代码本身就有”洁癖”,对自己对别人也一样,如何防止你那讨厌的同事写上糟糕的代码来”污染”你那圣神的代码,这篇文章会给出”紧箍咒”让所有人必须遵从约定好的代码风格以保存项目的整洁性。

eslint standards

业界已经提出一种标准方案–JavaScript Standard Style

以下的代码演示均来《webpack渐入佳境之打包优化篇》

我们需要安装以下依赖

1

npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D

• 根目录下创建.eslintrc文件

1
2
3

{
  "extends": "standard"
}

这样eslint就可以帮我们校验代码,但因为我们这个项目是vue开发,eslint它并不能识别里面的js代码(.vue文件并非传统的.js文件),我们需要有一个东西可以识别任意格式文件里面的javascript标签

• eslint-plugin-html

1

npm i eslint-plugin-html -D

修改.eslintrc

1
2
3
4

...
"plugins": [
   "html"
 ],

修改package.json 添加命令去校验代码

1
2
3
4
5

"scripts": {
   ...
 + "lint": "eslint --ext .js --ext .jsx --ext .vue src/",
   "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
 },

测试一下

1

npm run lint

可以看到控制台已经抛出错误,例如空格符跟tab缩进混用, 多打了一个空格之类。eslint可以帮我们处理比较简单错误

修改package.json

1
2
3

...
  "lint": "eslint --ext .js --ext .jsx --ext .vue src/",
+ "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/",

测试

1

npm run lint-fix

我们发现错误减少了,但还是报了空格和tab缩进混合使用错误,这些问题在很多现代编辑器很帮你处理好,我们也可以手动修改覆盖编辑器默认属性。

创建.editorconfig

1
2
3
4
5
6
7
8
9

root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2   //缩进单位
indent_style = space   //空格   
insert_final_newline = true //最后换行
trim_trailing-whitesplace = true  //句尾去掉空格

“root = true”是指只读取到这个配置文件就结束,不再往上层目录找,end_of_line指定回车换行符,window使用的是CRLF,linux和osx都是LF

但是每次都敲命令行感觉又很繁琐,能不能让它自动检查每次代码更新进行eslint

1

npm i eslint-loader babel-eslint -D

修改.eslintrc

1
2

...
"parser": "babel-eslint"

这样处理是因为webpack最终都是需要经过babel编译(es5),而eslint它是支持es6和es7,这样可能会导致一些奇奇怪怪的问题。

配置eslint-loader

1
2
3
4
5
6
7
8
9
10
11
12
13

module: {
    rules: [
     + {
     +  test: /\.(vue|js|jsx)$/,
     +   loader: 'eslint-loader',
     +   exclude: /node_modules/, //已经经过babel处理,所以去掉
     +   enforce: 'pre'
     + },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      ...

enforce: ‘pre’ 是因为.vue文件我们已经制定vue-loader去处理,我们不希望eslint-loader处理.vue文件,我们只是希望在vue-loader处理之前先进行eslint语法检查。

最后,如果你希望所有人都把本地的代码规范问题都解决后才能提交,可以尝试这么做

1

npm i husky -D

它会在.git文件里面生成一个hooks,它会读取我们在package.json里面配置的信息

修改package.json

1
2
3

  ...
+ "precommit": "npm run lint-fix",
  "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

这样我们每次 git commit -m ‘log’的时候它都会先进行一次eslint检查,通过了才能成功commit

注意,安装husky之前必须确保项目中已经有.git文件,否者hook将会写入失败。