用工程化的思想来做代码规范约束

leCheng
224 阅读2分钟

项目方式的管理可大体分为multi-repo和mono-repo两种类型。

  • multi-repo 是一个模块一个git仓，配置项基本不会公用
  • mono-repo 是多个模块组成一个git仓，配置项可以复用

大体结构如下

image.png

multi-repo暴露出的问题

频繁的去配置代码约束的文件或者公共模板。 比如：

  • 配置eslint
  • 配置editorconfig
  • 配置prettier
  • ...... 在multi-repo上就会变得很不好处理，需要每个项目去处理一遍

解决方案

使用脚手架的形式，来对项目做处理。
试用场景：

  • 已有老项目，选择接入代码规范或模板文件
  • 新项目，快速接入代码规范或模板文件

工具可以分为三部分

  • 使用命令行选择性添加配置 这里主要使用了commander来实现。
  const options = await inquirer.prompt([
    {
      type: 'checkbox',
      name: 'configuration',
      message: '⭐️ Select constraint type',
      pageSize: 10,
      choices: [
        {
          value: CONSTANTS.esLint,
          name: 'eslint',
        },
        {
          value: CONSTANTS.ts,
          name: 'typescript',
        },
        {
          value: CONSTANTS.editor,
          name: 'editorconfig',
        },
        {
          value: CONSTANTS.pre,
          name: 'pretterrc',
        },
        {
          value: CONSTANTS.husky,
          name: 'husky',
        },
        // {
        //   value: CONSTANTS.lintStaged,
        //   name: 'lint-staged'
        // },
        {
          value: CONSTANTS.commitLint,
          name: 'commitLint',
        },
        {
          value: CONSTANTS.plop,
          name: 'plop',
        },
      ],
    },
  ])

image.png 用户通过对配置项进行选择，将想要的配置添加到项目中。

  • 对注册源进行判断，是yarn还是npm还是pnpm

这一块参照了vue-cli中来进行实现，传送门

  • 针对不同类型的项目进行判定，添加合适的配置 特殊处理的我觉得有两类
  1. 对不同的版本做文件模板处理，比如对vue2和vue3的版本添加TS
  2. 对一些规范冲突做兼容，如添加eslint和prettier要添加eslint-config-prettier

我所做的所支持的功能

  • ✅ eslint
  • ✅ prettier
  • ✅ plop
  • ✅ editorConfig
  • ✅ husky
  • ✅ commintLint

做这个的目的其实就是为了解决团队之间代码规范和业务流程的问题，最后落实自己内部的cli来使用。

目前做了一个简版，不过大致功能都已经粗略实现
体验传送门github

avatar
文章
阅读
粉丝