怎么快速武装你的代码库

本篇内容介绍了“怎么快速武装你的代码库”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1. 规范 commit 信息

首先，看下 angular 的代码库的 commit 记录，如图：

我们可以利用 commitizen 和 husky 来规范代码库的 commit。

安装以下依赖：

npm install @commitlint/cli @commitlint/config-conventional husky  -D

如果你还没有安装过 commitizen，那么先全局安装：

npm install commitizen -g

在 package.JSON 中增加 husky 字段。

{     "husky": {         "hooks": {             "commit-msg": "commitlint -E HUSKY_git_PARAMS"         }     }, }

husky 是 git hook 工具，使用 husky，我们可以方便的在 package.json 中配置 git hook 脚本，例如: pre-commit、 pre-push、 commit-msg 等的。

(1) 创建 commitlint.config.js 文件

module.exports = {     extends: ["@commitlint/config-conventional"], };

此刻开始，请使用 git cz 来替代 git commit 提交信息，我们来看看，假设我们随便写一个 git commit -m 'fixbug' 会提示什么?

使用 git cz 来进行填写 commit 的内容。

git cz 的 type 说明：

虽然，我们现在已经可以规范提交信息了，但是我们可能不喜欢默认的交互，例如，一个精简的描述就可以了，不希望再提示我去写详细的描述，那么就可以使用 cz-customizable 来进行定制。

(2) 自定义提交说明

安装 cz-customizable：

npm install cz-customizable -D

cz-customizable 是可自定义的 Commitizen 插件，可帮助实现一致的 commit message。

cz-customizable 适合大型团队去自定义 scope，和 commit type。

新建 .cz-config.js：

在项目根目录下创建 .cz-config.js 文件：

官方提供了一份配置信息，可以去这个地址查看：

https://GitHub.com/leoforfree/cz-customizable/blob/master/cz-config-EXAMPLE.js

//.cz-config.js module.exports = {   types: [     { value: 'feat', name: 'feat:     A new feature' },     { value: 'fix', name: 'fix:      A bug fix' },     { value: 'docs', name: 'docs:     Documentation only changes' },     {       value: 'style',       name:         'style:    Changes that do not affect the meaning of the code\n            (white-space, fORMatting, missing semi-colons, etc)',     },     {       value: 'refactor',       name: 'refactor: A code change that neither fixes a bug nor adds a feature',     },     {       value: 'perf',       name: 'perf:     A code change that improves performance',     },     { value: 'test', name: 'test:     Adding missing tests' },     {       value: 'chore',       name:         'chore:    Changes to the build process or auxiliary tools\n            and libraries such as documentation generation',     },     { value: 'revert', name: 'revert:   Revert to a commit' },     { value: 'WIP', name: 'WIP:      Work in progress' },   ],    scopes: [{ name: 'accounts' }, { name: 'admin' }, { name: 'exampleScope' }, { name: 'changeMe' }],    allowTicketNumber: false,   isTicketNumberRequired: false,   ticketNumberPrefix: 'TICKET-',   ticketNumberRegExp: '\\d{1,5}',    // it needs to match the value for field type. Eg.: 'fix'      // override the messages, defaults are as follows   messages: {     type: "Select the type of change that you're committing:",     scope: '\nDenote the SCOPE of this change (optional):',     // used if allowCustomScopes is true     customScope: 'Denote the SCOPE of this change:',     subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n',     body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',     breaking: 'List any BREAKING CHANGES (optional):\n',     footer: 'List any ISSUES CLOSED by this change (optional). E.g.: #31, #34:\n',     confirmCommit: 'Are you sure you want to proceed with the commit above?',   },    allowCustomScopes: true,   allowBreakinGChanges: ['feat', 'fix'],   // skip any questions you want   skipQuestions: ['body'],    // limit subject length   subjectLimit: 100, };

• types：描述修改的性质是什么，是bugfix还是feat，在这里进行定义。

• scopes：定义之后，我们就可以通过上下键去选择 scope

• scopeOverrides：针对每一个type去定义scope

• allowBreakingChanges：如上设置为 ['feat', 'fix']，只有我们type选择了 feat 或者是 fix，才会询问我们 breaking message.

• allowCustomScopes：设置为 true，在 scope 选择的时候，会有 empty 和 custom 可以选择，顾名思义，选择 empty 表示 scope 缺省，如果选择 custom，则可以自己输入信息

• skipQuestions：指定跳过哪些步骤，例如跳过我们刚刚说的详细描述，设置其为 scope: ['body']，假设我们的项目也不会涉及到关联 issue，我们可以设置其为 scope: ['body', 'footer']

• subjectLimit：描述的长度限制

这里我就不一一演示每个字段修改之后的情况了，根据字段的说明，建议如果想自定义提交规则，在本地进行修改验证，公司内部的代码库不需要管理 issue，另外，我不喜欢写长描述，所以我把 body 和 footer 给 skip 掉了。

cz-customizable 会首先在项目根目录下寻找: .cz-config.js 或 .config/cz-config.js，如果找不到，会去主目录寻找。我们也可以在 package.json 中手动去指定配置文件的路径。

"config": {     "commitizen": {          "path": "node_modules/cz-customizable"     },     "cz-customizable": {         "config": "config/path/to/my/config.js"     } }

现在，我们已经规范了 commit 信息，但是没有对提交的代码进行规范，在一个代码库中，经常出现2个空格/4个空格混用，有些地方写 ;，有些不写 ;，风格不统一。例如，我们希望提交到git库的代码，都能够通过 eslint 检查或者是通过测试。我们可以借助于 pre-commit 这个钩子来做这些事情。

2. 代码提交前检查

安装依赖：

npm install lint-staged -D

使用 pre-commit 的 hook

"husky": {     "hooks": {         "pre-commit": "lint-staged"     } }, "lint-staged": {     "** 注释中被提到     'no-unused-vars': 1, //禁止出现未使用过的变量     'constructor-super': 2, //要求在构造函数中有 super() 的调用     'no-class-assign': 2, //禁止给类赋值     'no-dupe-class-members': 2, //禁止类成员中出现重复的名称     'no-new-symbol': 2, //禁止 Symbol 和 new 操作符一起使用     'no-this-before-super': 2, //禁止在构造函数中，在调用 super() 之前使用 this 或 super     'require-yield': 2, //要求 generator 函数内有 yield     'no-mixed-spaces-and-tabs': 1, //要求不适用space，tab混用     'React/forbid-prop-types': [1, { forbid: ['any'] }], //禁止某些propTypes     'react/prop-types': 1, //没用对props类型进行校验     'react/jsx-closing-bracket-location': 1, //在JSX中验证右括号位置     'react/jsx-curly-spacing': [1, { when: 'never', children: true }], //在JSX属性和表达式中加强或禁止大括号内的空格。     'react/jsx-key': 2, //在数组或迭代器中验证JSX具有key属性     'react/jsx-max-props-per-line': [1, { maximum: 1 }], // 限制JSX中单行上的props的最大数量     'react/jsx-no-duplicate-props': 2, //防止在JSX中重复的props     'react/jsx-no-undef': 1, //在JSX中禁止未声明的变量     'react/no-string-refs': 1, //Using string literals in ref attributes is deprecated     'react/jsx-uses-react': 1, //防止反应被错误地标记为未使用     'react/jsx-uses-vars': 1, //防止在JSX中使用的变量被错误地标记为未使用     'react/no-danger': 1, //防止使用危险的JSX属性     'react/no-did-update-set-state': 2, //防止在componentDidUpdate中使用setState     'react/no-did-mount-set-state': 0, //防止在componentDidUpdate中使用setState     'react/no-direct-mutation-state': 2, //防止this.state赋值     'react/no-unknown-property': 2, //防止使用未知的DOM属性     'react/prefer-es6-class': 1, //为React组件强制执行ES5或ES6类     'react/react-in-jsx-scope': 0, //使用JSX时，必须要引入React     'react/sort-comp': 0, //强制组件方法顺序     'react/sort-prop-types': 0, //强制组件属性顺序     'react/jsx-sort-props': 1,     'react/no-deprecated': 1, //不使用弃用的方法     'react/jsx-equals-spacing': 1, //在JSX属性中强制或禁止等号周围的空格     'react/wrap-multilines': 0,     'comma-dangle': 1, //对象字面量项尾不能有逗号     'react/no-multi-comp': 0, //防止每个文件有多个组件定义     'flowtype/generic-spacing': 0, //泛型对象的尖括号中类型前后的空格规范     'flowtype/space-after-type-colon': 0, //类型注解分号后的空格规范     // react-hooks     'react-hooks/rules-of-hooks': 'error',     'react-hooks/exhaustive-deps': 'warn'   } };

“怎么快速武装你的代码库”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！