如何用建木 CI 实现前端代码自动格式化

作者：Jianmu

2022 年 3 月 18 日
本文字数：2526 字
阅读完需：约 8 分钟

看见这个标题，不知道前端小伙伴有没有很兴奋。这次建木又给大家准备了一个大礼包。因为建木 Hub 又增加了一个新成员 prettier 节点，对，你没看错就是 prettier，相信不少前端小伙伴都用过它。这次 prettier 节点也是基于 prettier 前端代码格式化工具来实现的。好的，接下来让我们一起来拆开这份来自建木的礼包。

为什么要格式化前端代码

规范的代码是一个程序员基本的职业素养。首先，统一风格的代码可提高可读性、易于 review，从而促进团队成员更好的协作。其次，提高代码质量，也更利于项目的维护。对于一个团队而言，代码规范十分重要，代码风格不统一会让整个团队显得极其不专业。

传统模式下，对代码风格统一管理的实践方案及其弊端

1. IDE 中安装 prettier 插件

prettier 前端代码格式化工具可能大家并不陌生，目前前端开发用到的 IDE 中基本上均已实现了对 prettier 的支持。这使得开发者可在 IDE 中用插件在保存文件时自动格式化代码。但如今，项目开发大部分是多人协作模式，一个团队中有多年经验的老员工，也有刚刚步入职场的新人。不同开发人员使用的 IDE 不一定相同，他们的 prettier 配置也不一样，这样格式化的代码还是不够统一。

最大的问题在于，当你打开另一个开发人员的代码时，只是单单看了一眼，但因为 IDE 的自动格式化功能，文件就会被按照你的 prettier 配置进行格式化。如果在无形中把代码推送到远程仓库，这势必会造成不必要的代码冲突。

2. 在不同的 IDE 中，对 prettier 进行相同的配置

基于上面的问题，有的小伙伴可能会想，如果统一 prettier 配置不就可以解决这个问题了吗？确实，按照设想只要保证不同 IDE 的 prettier 配置一致，那格式化出来的代码肯定是相同的。但是真实开发过程中，这种方式并不好实现，因为对一个习惯用 vscode 的人来说，他熟悉 prettier 在 vscode 中的设置，但是让他保证同样的代码在其他 IDE 上做到格式化出来的效果一致，这就比较困难了。虽然都使用 prettier，但是在不同 IDE 中它们配置方式是不一样的。另外一个问题是，IDE 还存在不同版本，可能上一位用 webstorm 的人使用 prettier 时比较用心，每一步该如何去配置，他都做了记录。但可能过几年后，IDE 也更新了好几版，原来记录的那些操作可能在新版中压根找不到，那之前做的记录也相当于白费。

3. 团队协作中，强制用相同 IDE 和 prettier 配置

为解决上面不同 IDE 造成 prettier 格式化难以统一的问题，可能有人会疑惑，为什么我们不对开发人员的 IDE 进行统一，并且在团队中对 IDE 的 prettier 进行统一设置呢？虽然这样暴力一刀切的方式确实能够解决代码格式统一问题，但随意更换开发人员已经熟悉的 IDE，这等同于一个战士在战场上丢掉了自己的枪。这里单单为了解决一个代码风格统一的问题，开发人员需要消耗更多时间与精力去熟悉新 IDE 的用法，这样一来团队开发效率也会受到影响。

用建木 CI 进行前端代码格式化的优势

目前建木 CI 已将 prettier 规范集成在节点中，每一个 prettier 节点与 prettier 官方维护的版本对应。这样意味着我们可以使用不同版本的 prettier 来保证对前端代码风格上的统一。上面提到的，在团队开发过程中，开发人员使用不同的 IDE 和 prettier 配置，造成代码风格难以统一的问题，也得到很好的规避。因为建木 CI 进行格式化的流程不是在开发人员的编码过程中，而是在真正将代码推送到远程仓库后，才会对它进行格式化。这样一来开发人员根本不需要在意推送到远程仓库的代码格式有多乱，甚至不需要在 IDE 中安装任何代码格式化的插件。因为只要再次从远程仓库拉取代码时，代码均已被格式化。有建木 CI 做了这些事，开发者可以将更多的精力放在其业务逻辑上。

如何搭配建木 CI 去实现代码格式化

拷贝下面的 DSL，在建木 CI 上新增一个项目，流程会将代码从远程仓库拉取下来自动进行格式化。

description: 格式化代码
trigger:  type: webhook  param:    # gitee中的webhook钩子事件    - name: gitee_event      type: STRING      exp: $.header.x-gitee-event    # 仓库项目名    - name: project_name      type: STRING      exp: $.body.json.project.name    # webhook返回的分支信息    - name: gitee_ref      type: STRING      exp: $.body.json.ref    # 提交的commit信息    - name: commit_message      type: STRING      exp: $.body.json.commits[0].message  # 条件满足时触发流程  only: (${trigger.gitee_event} == "Push Hook" && ${trigger.commit_message} != "refactor:auto prettier code")pipeline:  git_clone:    type: git_clone:1.2.1    alias: 克隆项目    param:      remote_url: https://gitee.com/comyan/test-pretiier-format.git      ref: ${trigger.gitee_ref}  prettier_push:    type: prettier:1.0.0-2.5.1    alias: 格式化    param:      files: '["${git_clone.git_path}/*"]'  git_push:    type: git_push:1.0.2    alias: push格式化代码    param:      remote_url: https://gitee.com/comyan/test-pretiier-format.git      remote_branch: ${git_clone.git_branch}      username: ((gitee.comyan_username))      password: ((gitee.comyan_password))      source_path: ${git_clone.git_path}      target_dir: ${trigger.project_name}      commit_message: 'refactor:auto prettier code'