项目搭建之代码规范化解决方案

代码规范化解决方案Eslint + Prettier

• Eslint 是一个插件化的 javascript 代码检测工具 ， 用于代码格式检测，不符合Eslint规则的代码 会被检测到发出警告、报错。
  通过 .eslintrc.js 文件可以进行自定义的Eslint规则配置

  ...
  rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'space-before-function-paren': 'off'
      "quotes": "error" // 默认
      "quotes": "warn" // 修改为警告
      "quotes": "off" // 修改不校验
  }
  

• Prettier 是一个一个代码格式化工具，既可以保证 ESLint 规则校验，又可以让开发者无需关注格式问题来进行顺畅的开发。
  vscode中安装 prettier 插件
  在项目中新建 .prettierrc 文件，该文件为 perttier 默认配置文件

  {
    // 不尾随分号
    "semi": false,
    // 使用单引号
    "singleQuote": true,
    // 多行逗号分割的语法中，最后一行不加逗号
    "trailingComma": "none"
  }
  

  可以在vsoce中设置保存后自动启用 perttier 格式化代码，在设置中，搜索 save ，勾选 Format On Save

  至此我们整个的 perttier 和 ESLint 的配合使用就算是全部完成了。

  在之后我们写代码的过程中，只需要保存代码，那么 perttier 就会帮助我们自动格式化代码，使其符合 ESLint 的校验规则。而无需我们手动进行更改了。

使用 Git 提交规范化工具 Commitizen 与 Git Hooks

在的项目开发中，通常情况下，我们都会通过 git 来管理项目。只要通过 git 来管理项目，那么就必然会遇到使用 git 提交代码的场景

当我们执行 git commit -m "描述信息" 的时候，我们知道此时必须添加一个描述信息。但是中华文化博大精深，不同的人去填写描述信息的时候，都会根据自己的理解来进行描述。

为了规范提交信息，这里我们使用 Commitizen 来严格约定提交规范。

当你使用 commitizen 进行代码提交（git commit）时，commitizen 会提交你在提交时填写所有必需的提交字段！

• Commitizen 助你规范化提交代码
  全局安装Commitizen

  npm install -g commitizen
  

  安装并配置 cz-customizable 插件

  npm i cz-customizable --save-dev
  

  在 package.json 中进行配置

  ...
    "config": {
      "commitizen": {
        "path": "node_modules/cz-customizable"
      }
    }
  

  项目根目录下创建 .cz-config.js 自定义提示文件

  module.exports = {
    // 可选类型
    types: [
      { value: 'feat', name: 'feat:     新功能' },
      { value: 'fix', name: 'fix:      修复' },
      { value: 'docs', name: 'docs:     文档变更' },
      { value: 'style', name: 'style:    代码格式(不影响代码运行的变动)' },
      {
        value: 'refactor',
        name: 'refactor: 重构(既不是增加feature，也不是修复bug)'
      },
      { value: 'perf', name: 'perf:     性能优化' },
      { value: 'test', name: 'test:     增加测试' },
      { value: 'chore', name: 'chore:    构建过程或辅助工具的变动' },
      { value: 'revert', name: 'revert:   回退' },
      { value: 'build', name: 'build:    打包' }
    ],
    // 消息步骤
    messages: {
      type: '请选择提交类型:',
      customScope: '请输入修改范围(可选):',
      subject: '请简要描述提交(必填):',
      body: '请输入详细描述(可选):',
      footer: '请输入要关闭的issue(可选):',
      confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
    },
    // 跳过问题
    skipQuestions: ['body', 'footer'],
    // subject文字长度默认是72
    subjectLimit: 72
  }
  

接下来使用，git cz 来代替 git commit 进行提交就可以看到提示内容了

如果忘记了使用 git cz 指令，直接就提交了怎么办呢？这里我们使用 git hooks 的钩子函数来
阻止不合规的提交消息

• Git Hooks git 钩子 || git 回调方法 阻止不合规的提交消息

  整体的 hooks 非常多，当时我们其中用的比较多的其实只有两个：

  Git Hook	调用时机	说明
  pre-commit	git commit执行前 它不接受任何参数，并且在获取提交日志消息并进行提交之前被调用。脚本git commit以非零状态退出会导致命令在创建提交之前中止。	可以用git commit --no-verify绕过
  commit-msg	git commit执行前 可用于将消息规范化为某种项目标准格式。 还可用于在检查消息文件后拒绝提交。	可以用git commit --no-verify绕过

  简单来说这两个钩子：
  commit-msg：可以用来规范化标准格式，并且可以按需指定是否要拒绝本次提交
  pre-commit：会在提交前被调用，并且可以按需指定是否要拒绝本次提交

  而我们接下来要做的关键，就在这两个钩子上面。

• 使用 husky + commitlint 工具检查提交描述是否符合规范要求

  commitlint：用于检查提交信息
  husky: git hooks 工具

• commitlint
  安装依赖

  npm install --save-dev @commitlint/config-conventional @commitlint/cli
  

  创建 commitlint.config.js 文件

  echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
  

  打开 commitlint.config.js ， 增加配置项

    module.exports = {
      // 继承的规则
      extends: ['@commitlint/config-conventional'],
      // 定义规则类型
      rules: {
        // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
        'type-enum': [
          2,
          'always',
          [
            'feat', // 新功能 feature
            'fix', // 修复 bug
            'docs', // 文档注释
            'style', // 代码格式(不影响代码运行的变动)
            'refactor', // 重构(既不增加新功能，也不是修复bug)
            'perf', // 性能优化
            'test', // 增加测试
            'chore', // 构建过程或辅助工具的变动
            'revert', // 回退
            'build' // 打包
          ]
        ],
        // subject 大小写不做校验
        'subject-case': [0]
      }
    }
    
  

  注意：确保保存为 UTF-8 的编码格式

• husky : 检测git hooks 的工具
  安装依赖

  npm install husky --save-dev
  

  启动 hooks ， 生成 .husky 文件夹

  npx husky install
  

  在 package.json 中生成 prepare 指令（ 需要 npm > 7.0 版本 ）

  npm set-script prepare "husky install"
  

  执行 prepare 指令

  npm run prepare
  

  添加 commitlint 的 hook 到 husky中，并指令在 commit-msg 的 hooks 下执行 npx --no-install commitlint --edit "$1" 指令

  npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
  

  至此， 不符合规范的 commit 将不再可提交

​ 那么至此，我们就已经可以处理好了 强制规范化的提交要求，到现在 不符合规范的提交信息,将不可在被提交！

集成 lint-staged 进行提交时的代码格式检测和修复

• 通过 pre-commit 检测提交时的代码规范

• 通过 husky 在 pre-commit 生命周期时启用 eslint 进行代码检测

  npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"
  

• 通过 lint-staged 自动修复格式错误
  lint-staged 是一个很牛逼的插件，可以在你提交了不和规范的代码后自动进行修改，然后继续帮你提交。
  lint-staged 只会检测本次更新的代码，并在错误时候自动修复然后进行推送
  修改package.json配置

  //...
  "lint-staged": {
  "src/**/*.{js,vue}": [
   "eslint --fix",
   "git add"
  ]
  }
  

  每次它只会在你本地 commit 之前，校验你提交的内容是否符合你本地配置的 eslint规则(这个见文档 ESLint )，校验会出现两种结果：

  如果符合规则：则会提交成功。
  如果不符合规则：它会自动执行 eslint --fix 尝试帮你自动修复，如果修复成功则会帮你把修复好的代码提交，如果失败，则会提示你错误，让你修好这个错误之后才能允许你提交代码。

• 修改 .husky/pre-commit 文件

  #!/bin/sh
  . "$(dirname "$0")/_/husky.sh"
  npx lint-staged
  

git cz 命令行使用说明

第一步是选择 type，本次更新的类型

第二步选择本次修改的范围（作用域）(可回车跳过)

? 请输入修改范围(可选): 

第三步请输入要提交的信息（**必填！**对应 commit -m 的内容）

? 请简要描述提交(必填): 

第四步确认提交信息

? 确认使用以上信息提交？(y/n/e/h) (Yneh) 

总结：

1. 通过 Eslint 校验本地代码是否符合规范，通过 prettier 插件自动修改不符合规范的代码。
2. 通过使用 cz-customizable 插件进行代码提交格式规范。
3. 通过 husky工具指定在 git hooks 的 commit-msg 生命周期下去执行 commitlint 检测提交的信息是否符合规范。
4. 通过 husky 工具检测在 git hooks 的 pre-commit 生命周期下去执行 eslint 检测提交的代码格式。
5. 集成 lint-staged 在 git commit 之前修复提交时的错误代码格式。