让团队代码像一个人写的

一千个读者，有一千个哈姆雷特

一千个程序员，就有一千种代码风格

由于个人喜好、习惯、编码风格各异，因此团队合作中需要统一规范

以 VS COde 为例，安装 ESLint，Vetur 等扩展包

QQ截图20210402114547.png

项目构建时 lint 规则可以继承优秀团队基于最佳实践设定的编码规范，如 airbnb, 这样避免重复造轮子造成人力的资源浪费和规则覆盖的缺陷，继承社区知名代码规范后团队内部再进行细节调整

{
  "extend": ["airbnb-base"],
  "rules": {
    "semi": ["error", "never"]
  }
}
复制代码

社区知名的代码规范

vue-cli3 脚手架初始化项目时规范选择

QQ截图20210401165500.png

可以设置部分 eslint rule 为警告，保障开发体验，并且在 pre-commit 与 CI 中把警告视为不通过，保证严格的代码规范

团队合作中的编码规范有一点是，虽然自己有可能不舒服，但是不能让别人因为自己的代码而不舒服。

git 自身包含许多 hooks，在 commit，push 等 git 事件前后触发执行。与 pre-commit hook 结合可以帮助校验 Lint，如果非通过代码规范则不允许提交。

husky 是一个使 git hooks 变得更简单的工具，只需要配置几行 package.json 就可以愉快的开始工作。

// package.json
{
  "scripts": {
    "lint": "eslint . --cache"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm lint",
    }
  }
}
复制代码

git commit 过程拦截效果

QQ截图20210402112023.png

注意： git hooks 的规范校验可以通过 git commit -n 跳过，需要在 CI 层继续加强校验

git hooks 可以绕过，但 CI(持续集成) 是绝对绕不过的，因为它在服务端校验。使用 gitlab CI 做持续集成，配置文件 .gitlab-ci.yaml 如下所示

lint:
  stage: lint
  only:
    - /^feature\/.*$/
  script:
    - npm run test
复制代码

GitLab pipelines 运行效果

如果喜欢，随手点个赞再走呗 ^-^