花十分钟的时间武装你的代码库

当我们的代码库有很多人维护时,经常会出现代码风格不一致或者代码质量不过关,提交信息杂乱的情况,当然啦,即使是一个人的代码库,有的时候,自己写代码时不太注意细节,也会出现风格不一致的情况。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:主机域名雅安服务器托管、营销软件、网站建设、长寿网站维护、网站推广。

本文正是为了解决这个问题而生,阅读本篇文章并不需要很长时间,如果你的代码库还没有进行这些配置,正是你大展身手的好时机,武装一下你的代码库。

1. 规范 commit 信息

首先,看下 angular 的代码库的 commit 记录,如图:

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

安装以下依赖:

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

如果你还没有安装过 commitizen,那么先全局安装:

 
 
 
 
  1. npm install commitizen -g 

在 package.json 中增加 husky 字段。

 
 
 
 
  1.     "husky": { 
  2.         "hooks": { 
  3.             "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" 
  4.         } 
  5.     }, 

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

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

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

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

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

git cz 的 type 说明:

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

(2) 自定义提交说明

安装 cz-customizable:

 
 
 
 
  1. 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

 
 
 
 
  1. //.cz-config.js 
  2. module.exports = { 
  3.   types: [ 
  4.     { value: 'feat', name: 'feat:     A new feature' }, 
  5.     { value: 'fix', name: 'fix:      A bug fix' }, 
  6.     { value: 'docs', name: 'docs:     Documentation only changes' }, 
  7.     { 
  8.       value: 'style', 
  9.       name: 
  10.         'style:    Changes that do not affect the meaning of the code\n            (white-space, formatting, missing semi-colons, etc)', 
  11.     }, 
  12.     { 
  13.       value: 'refactor', 
  14.       name: 'refactor: A code change that neither fixes a bug nor adds a feature', 
  15.     }, 
  16.     { 
  17.       value: 'perf', 
  18.       name: 'perf:     A code change that improves performance', 
  19.     }, 
  20.     { value: 'test', name: 'test:     Adding missing tests' }, 
  21.     { 
  22.       value: 'chore', 
  23.       name: 
  24.         'chore:    Changes to the build process or auxiliary tools\n            and libraries such as documentation generation', 
  25.     }, 
  26.     { value: 'revert', name: 'revert:   Revert to a commit' }, 
  27.     { value: 'WIP', name: 'WIP:      Work in progress' }, 
  28.   ], 
  29.  
  30.   scopes: [{ name: 'accounts' }, { name: 'admin' }, { name: 'exampleScope' }, { name: 'changeMe' }], 
  31.  
  32.   allowTicketNumber: false, 
  33.   isTicketNumberRequired: false, 
  34.   ticketNumberPrefix: 'TICKET-', 
  35.   ticketNumberRegExp: '\\d{1,5}', 
  36.  
  37.   // it needs to match the value for field type. Eg.: 'fix' 
  38.   /* 
  39.   scopeOverrides: { 
  40.     fix: [ 
  41.       {name: 'merge'}, 
  42.       {name: 'style'}, 
  43.       {name: 'e2eTest'}, 
  44.       {name: 'unitTest'} 
  45.     ] 
  46.   }, 
  47.   */ 
  48.   // override the messages, defaults are as follows 
  49.   messages: { 
  50.     type: "Select the type of change that you're committing:", 
  51.     scope: '\nDenote the SCOPE of this change (optional):', 
  52.     // used if allowCustomScopes is true 
  53.     customScope: 'Denote the SCOPE of this change:', 
  54.     subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n', 
  55.     body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n', 
  56.     breaking: 'List any BREAKING CHANGES (optional):\n', 
  57.     footer: 'List any ISSUES CLOSED by this change (optional). E.g.: #31, #34:\n', 
  58.     confirmCommit: 'Are you sure you want to proceed with the commit above?', 
  59.   }, 
  60.  
  61.   allowCustomScopes: true, 
  62.   allowBreakingChanges: ['feat', 'fix'], 
  63.   // skip any questions you want 
  64.   skipQuestions: ['body'], 
  65.  
  66.   // limit subject length 
  67.   subjectLimit: 100, 
  68. }; 
  • 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 中手动去指定配置文件的路径。

 
 
 
 
  1. "config": { 
  2.     "commitizen": {  
  3.         "path": "node_modules/cz-customizable" 
  4.     }, 
  5.     "cz-customizable": { 
  6.         "config": "config/path/to/my/config.js" 
  7.     } 

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

2. 代码提交前检查

安装依赖:

 
 
 
 
  1. npm install lint-staged -D 

使用 pre-commit 的 hook

 
 
 
 
  1. "husky": { 
  2.     "hooks": { 
  3.         "pre-commit": "lint-staged" 
  4.     } 
  5. }, 
  6. "lint-staged": { 
  7.     "**/*.js": [ 
  8.         "prettier --write",  
  9.         "eslint" 
  10.     ] 

这样配置之后,每次提交的时候,都会对要提交的文件(并不是对整个项目)进行 prettier 格式化和 eslint 检查,都通过之后,才能 commit 成功。

(1) eslint 和 prettier 配置

我的项目是 react 项目,下面是我进行的配置。

安装 eslint 和 prettier 相关依赖:

 
 
 
 
  1. npm install eslint eslint-config-prettier eslint-plugin-promise eslint-plugin-react eslint-plugin-react-hooks prettier babel-eslint -D 

新建 .prettierrc.js

当然啦,你也可以在 package.json 的 prettier 字段中配置,这里我配置成了独立的文件,以便后期维护。

 
 
 
 
  1. module.exports = { 
  2.   printWidth: 100, //长度超过100断行 
  3.   singleQuote: true,//使用单引号 
  4. }; 

如果你有一些文件不需要 prettier 进行格式化,那么可以新建一个 .prettierignore 文件,如下:

 
 
 
 
  1. dist 
  2. node_modules 
  3. public 

新建 .eslintrc.js 文件

以下是我的配置:

 
 
 
 
  1. module.exports = { 
  2.   settings: { 
  3.     react: { 
  4.       pragma: 'React', 
  5.       version: 'detect' 
  6.     } 
  7.   }, 
  8.   // babel parser to support ES6/7 features 
  9.   parser: 'babel-eslint', 
  10.   parserOptions: { 
  11.     ecmaVersion: 7, 
  12.     ecmaFeatures: { 
  13.       experimentalObjectRestSpread: true, 
  14.       jsx: true 
  15.     }, 
  16.     sourceType: 'module' 
  17.   }, 
  18.   extends: [ 
  19.     'prettier',  
  20.     'prettier/react' 
  21.   ], 
  22.   plugins: [ 
  23.     'promise',  
  24.     'react',  
  25.     'react-hooks' 
  26.   ], 
  27.   env: { 
  28.     browser: true, 
  29.     es6: true, 
  30.     node: true 
  31.   }, 
  32.   rules: { 
  33.     'no-compare-neg-zero': 2, //禁止与 -0 进行比较 
  34.     'no-cond-assign': 2, //禁止条件表达式中出现赋值操作符 
  35.     'no-console': 1, //禁用 console 
  36.     'no-constant-condition': 1, //禁止在条件中使用常量表达式 
  37.     'no-control-regex': 1, //禁止在正则表达式中使用控制字符 
  38.     'no-debugger': 2, //禁用 debugger 
  39.     'no-dupe-args': 2, //禁止 function 定义中出现重名参数 
  40.     'no-dupe-keys': 2, //禁止对象字面量中出现重复的 key 
  41.     'no-duplicate-case': 2, //禁止出现重复的 case 标签 
  42.     'no-const-assign': 1, //禁止修改const声明的变量 
  43.     'no-empty': 1, //禁止出现空语句块 
  44.     'no-empty-character-class': 2, //禁止在正则表达式中使用空字符集 
  45.     'no-ex-assign': 2, //禁止对 catch 子句的异常参数重新赋值 
  46.     'no-extra-boolean-cast': 1, //禁止不必要的布尔转换 
  47.     'no-extra-semi': 1, //禁止不必要的分号 
  48.     'no-func-assign': 2, //禁止对 function 声明重新赋值 
  49.     'no-inner-declarations': 0, //禁止在嵌套的块中出现变量声明或 function 声明,ES6中无需禁止 
  50.     'no-invalid-regexp': 2, //禁止 RegExp 构造函数中存在无效的正则表达式字符串 
  51.     'no-irregular-whitespace': 1, //禁止在字符串和注释之外不规则的空白 
  52.     'no-obj-calls': 2, //禁止把全局对象作为函数调用,比如Math() JSON() 
  53.     'no-regex-spaces': 1, //禁止正则表达式字面量中出现多个空格 
  54.     'no-sparse-arrays': 1, //禁用稀疏数组 
  55.     'no-unexpected-multiline': 1, //禁止出现令人困惑的多行表达式 
  56.     'no-unreachable': 1, //禁止在return、throw、continue 和 break 语句之后出现不可达代码 
  57.     'no-unsafe-finally': 2, //禁止在 finally 语句块中出现控制流语句 
  58.     'no-unsafe-negation': 1, //禁止对关系运算符的左操作数使用否定操作符 
  59.     'use-isnan': 2, //要求使用 isNaN() 检查 NaN,如 isNaN(foo),而非foo == NaN 
  60.     'valid-typeof': 2, //强制 typeof 表达式与有效的字符串(如: 'undefined', 'object', 'boolean', 'number', 'string', 'function','symbol')进行比较 
  61.     'no-case-declarations': 1, //不允许在 case 子句中使用词法声明 
  62.     'no-empty-pattern': 2, //禁止使用空解构模式 
  63.     'no-fallthrough': 2, //禁止 case 语句落空 
  64.     'no-global-assign': 2, //禁止对原生对象或只读的全局对象进行赋值 
  65.     'no-octal': 1, //禁用八进制字面量 
  66.     'no-redeclare': 1, //禁止多次声明同一变量 
  67.     'no-self-assign': 1, //禁止自我赋值 
  68.     'no-unused-labels': 1, //禁用出现未使用过的标 
  69.     'no-useless-escape': 1, //禁用不必要的转义字符 
  70.     'no-delete-var': 2, //禁止删除变量 
  71.     'no-undef': 2, //禁用使用未声明的变量,除非它们在 /*global */ 注释中被提到 
  72.     'no-unused-vars': 1, //禁止出现未使用过的变量 
  73.     'constructor-super': 2, //要求在构造函数中有 super() 的调用 
  74.     'no-class-assign': 2, //禁止给类赋值 
  75.     'no-dupe-class-members': 2, //禁止类成员中出现重复的名称 
  76.     'no-new-symbol': 2, //禁止 Symbol 和 new 操作符一起使用 
  77.     'no-this-before-super': 2, //禁止在构造函数中,在调用 super() 之前使用 this 或 super 
  78.     'require-yield': 2, //要求 generator 函数内有 yield 
  79.     'no-mixed-spaces-and-tabs': 1, //要求不适用space,tab混用 
  80.     'react/forbid-prop-types': [1, { forbid: ['any'] }], //禁止某些propTypes 
  81.     'react/prop-types': 1, //没用对props类型进行校验 
  82.     'react/jsx-closing-bracket-location': 1, //在JSX中验证右括号位置 
  83.     'react/jsx-curly-spacing': [1, { when: 'never', children: true }], //在JSX属性和表达式中加强或禁止大括号内的空格。 
  84.     'react/jsx-key': 2, //在数组或迭代器中验证JSX具有key属性 
  85.     'react/jsx-max-props-per-line': [1, { maximum: 1 }], // 限制JSX中单行上的props的最大数量 
  86.     'react/jsx-no-duplicate-props': 2, //防止在JSX中重复的props 
  87.     'react/jsx-no-undef': 1, //在JSX中禁止未声明的变量 
  88.     'react/no-string-refs': 1, //Using string literals in ref attributes is deprecated 
  89.     'react/jsx-uses-react': 1, //防止反应被错误地标记为未使用 
  90.     'react/jsx-uses-vars': 1, //防止在JSX中使用的变量被错误地标记为未使用 
  91.     'react/no-danger': 1, //防止使用危险的JSX属性 
  92.     'react/no-did-update-set-state': 2, //防止在componentDidUpdate中使用setState 
  93.     'react/no-did-mount-set-state': 0, //防止在componentDidUpdate中使用setState 
  94.     'react/no-direct-mutation-state': 2, //防止this.state赋值 
  95.     'react/no-unknown-property': 2, //防止使用未知的DOM属性 
  96.     'react/prefer-es6-class': 1, //为React组件强制执行ES5或ES6类 
  97.     'react/react-in-jsx-scope': 0, //使用JSX时,必须要引入React 
  98.     'react/sort-comp': 0, //强制组件方法顺序 
  99.     'react/sort-prop-types': 0, //强制组件属性顺序 
  100.     'react/jsx-sort-props': 1, 
  101.     'react/no-deprecated': 1, //不使用弃用的方法 
  102.     'react/jsx-equals-spacing': 1, //在JSX属性中强制或禁止等号周围的空格 
  103.     'react/wrap-multilines': 0, 
  104.     'comma-dangle': 1, //对象字面量项尾不能有逗号 
  105.     'react/no-multi-comp': 0, //防止每个文件有多个组件定义 
  106.     'flowtype/generic-spacing': 0, //泛型对象的尖括号中类型前后的空格规范 
  107.     'flowtype/space-after-type-colon': 0, //类型注解分号后的空格规范 
  108.     // react-hooks 
  109.     'react-hooks/rules-of-hooks': 'error', 
  110.     'react-hooks/exhaustive-deps': 'warn' 
  111.   } 
  112. }; 

现在,再也不能随心所欲往你的代码库提交文件啦,不过 eslint 和 prettier 的规则要和团队的成员协商制定哈~

本文名称:花十分钟的时间武装你的代码库
当前地址:http://www.shufengxianlan.com/qtweb/news49/20449.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联