Standardized practice of front-end project code submission

commitizen canonical commit

 // 全局安装commitizen
yarn global add commitizen

 // 初始化
commitizen init cz-conventional-changelog --save --save-exact

After execution, the following configuration will be generated under package.json

 {
    ...
    "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
}

You can also install Chinese packages

 yarn add cz-conventional-changelog-zh -D

And modify the configuration, you can customize:

 "config": {
    "commitizen": {
       "path": "./node_modules/cz-conventional-changelog-zh",
      "defaultType":"[新增功能]",
       "types": {
        "[新增功能]": {
          "description": "新增功能点、新增需求",
          "title": "Features"
        },
        "[Bug修复]": {
          "description": "修复Bug,线上，测试，验收阶段的bug",
          "title": "Bug Fixes"
        },
        "[文档修改]": {
          "description": "文档增删改",
          "title": "Documentation"
        },
        "[样式修改]": {
          "description": "样式修改(空白、格式、缺少分号等)",
          "title": "Styles"
        },
        "[代码重构]": {
          "description": "既不修复bug也不添加新功能的更改",
          "title": "Code Refactoring"
        },
        "[性能优化]": {
          "description": "性能优化",
          "title": "Performance Improvements"
        },
        "[测试代码]": {
          "description": "增加测试",
          "title": "Tests"
        },
        "[编译代码]": {
          "description": "影响构建系统或外部依赖项的更改(示例范围:gulp、broccoli、npm)",
          "title": "Builds"
        },
        "[持续集成]": {
          "description": "对CI配置文件和脚本的更改(示例范围:Travis, Circle, BrowserStack, SauceLabs)",
          "title": "Continuous Integrations"
        },
        "[其他提交]": {
          "description": "除src目录或测试文件以外的修改",
          "title": "Chores"
        },
        "[回退更改]": {
          "description": "回退历史版本",
          "title": "Reverts"
        },
        "[修改冲突]": {
          "description": "修改冲突",
          "title": "Conflict"
        },
        "[字体修改]": {
          "description": "字体文件更新",
          "title": "Fonts"
        },
        "[删除文件]": {
          "description": "删除文件",
          "title": "Delete Files"
        },
        "[暂存文件]": {
          "description": "暂存文件",
          "title": "Stash Files"
        }
      }
    }
  }

In order to facilitate submission, add the configuration of scripts in package.json:

 {
    "scripts": {
    ...
        "commit": "git add -A && git cz && git push",
    }
}

standard-version automated version control

 // 安装
yarn add standard-version -D

Add scripts configuration

 {
  "scripts": {
    ...
    "standard": "standard-version"
  }
}

Write custom scripts for version number upgrade control:

 //  scripts/version.js
/* eslint-disable */
const exec = require('child_process').exec
const inquirer = require('inquirer')

const states = {
  major: '版本升级（新功能不兼容旧版本时）',
  minor: '特性更新（添加新功能或功能增强时）',
  patch: '修复补丁（修复常规错误时）',
  skip: '跳过（谨慎！请仅在未完成时选择此项）'
}

inquirer.prompt([
  {
    type: 'list',
    name: 'version',
    message: '请选择您要升级的版本号类型:',
    choices: Object.keys(states).map(k => `${k}: ${states[k]}`)
  }
]).then(({ version }) => {
  const type = version.split(':')[0]
  if (type !== 'skip') {
    exec(`npm run standard -- --release-as ${type}`)
    console.log('正在更新版本号.....')
  }
}).catch((err) => {
  console.error(err)
  process.exit(1)
})

Modify the commit configuration in scripts in package.json and add the update:version command:

 {
    "scripts": {
    ...
        "commit": "git add -A && git cz && npm run update:version && git push",
    "update:version": "node ./scripts/version.js"
    }
}

After running commitizen, the script file version.js will be executed to update the version. If skip is not selected, run the standard command and CHANGELOG.md (version update log file) will be generated in the root directory.

Integrate Husky and lint-staged

• Husky can execute a series of git hooks before and after git commits code to perform preset checks on code, files, etc. Once the check fails, the current code commit can be blocked, avoiding irregular code and git commit appear in the project.
• lint-staged is a file specifically designed to perform a series of formatting on the code in the staging area before submitting the code via git . When lint-staged is used with git hooks, the lint-staged command can be added to the hook before git submission, so that the code to be submitted can be formatted before submitting the code, and it is successful The code will then be submitted.

 // 安装
yarn add husky -D

yarn add lint-staged -D

// 同时集成
npx mrm@2 lint-staged

After executing the command, you will see that your package.json has an additional lint-staged configuration item, and there is an .husky directory in the root directory. Contains the pre-commit file, which contains a most basic command: npx lint-staged .

We can modify the configuration items of lint-staged to achieve our purpose of verifying the code, such as eslint, stylelint, etc.

 {
    ...
 "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": [
      "eslint --cache --fix",
      "vue-cli-service lint"
    ]
  }
}

You can create other hooks git hooks and write shell scripts in the file

 // 新增其他hook
npx husky add [fileName]