一、为什么需要编程规范

  • 团队开发，没有统一的代码标准，呈现出各种乱想

  • 需求：让程序自动处理规范化的内容

    • 编码规范
    • git规范

      二、代码检测工具ESLint

  • ESLint 是 2013年6月创建的一个开源项目，它的目标非常简单，只有一个，那就是提供一个插件化的 javascript 代码检测工具，说白了就是做代码格式检测使用的

  • 修改setting设置【恢复原始状态】

    1. {
    2. "workbench.colorTheme": "One Dark Pro",
    3.   "workbench.iconTheme": "material-icon-theme",
    4.     "explorer.confirmDelete": false,
    5.       "liveServer.settings.donotShowInfoMsg": true,
    6.         "explorer.confirmDragAndDrop": false,
    7.           "breadcrumbs.enabled": false,
    8.             "editor.minimap.enabled": false,
    9.               "editor.tabSize": 2,
    10.                 "[vue]": {
    11.                   "editor.defaultFormatter": "esbenp.prettier-vscode"
    12.                 },
    13.                   "[javascript]": {
    14.                     "editor.defaultFormatter": "esbenp.prettier-vscode"
    15.                   }
    16. }
    • 修改setting Tab的宽度：2

      三、代码格式化 Prettier

  • 一个代码格式化工具

  • 开箱即用
  • 可以集成到VSCode
  • 官网：https://www.prettier.c

  • 添加prettierrc配置文件

    1. {
    3. "printWidth":120,
    4.     //不使用分号
    5.   "semi":false,
    6.     //使用字符串单引号
    7.   "singleQuote":true,
    8.     //多行最后一个逗号不添加
    9.   "trailingComma": "none"   
    10. }

    四、ESLint与Prettier配合解决代码格式化问题

  • 安装eslint和Prettier插件

  • ESLint和Prettier的冲突问题

    • 问题：方法名和后面的小括号之间，应该有一个空格
    • 解决方案：修改.eslintrc.js
      • space-before-function-paren:off【关闭方法名后增加空格】的规则

        五、约定式提交规范

  • Angular团队规范延伸出的 Conventional Commits specification（约定式提交）

  • 规范格式
    • image.png
  • 类型可选范围
    • image.png

  • 问题：

    • 每次commit都需要手动写一堆信息。很繁琐

      六、Commitizen规范化提交代码

  • 作用：

  • 全局安装

    1. npm install -g commitizen

  • 配置当前项目cz生效

    1. npm i cz-customizable --save-dev

  • package.json添加配置

    • 指定自定义提交规范路径
      1. "config": {
      2. "commitizen": {
      3.  "path": "node_modules/cz-customizable"
      4. }
      5. }

  • 新建配置文件【自定义提示文件】——.cz-config.js

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

  • 实现效果【可以自动选择】

    • image.png

  • 还存在一些问题：不能阻止git commit -m 的提交

    七、Git Hooks

  • 提供一些钩子，检验提交是不是规范

  • commitlint：检查提交信息

    1. npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4

    • 创建配置文件【commitlint.config.js】提交配置

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

    • commitlint配置官网: https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/config-conventional/index.js

  • husky:git hooks工具

    1. npm install husky@7.0.1 --save-dev

  • 启动git hooks【.husky文件夹出现】

    1. npm husky install

  • 修改package.json 添加新的启动命令

    1. npm set-script prepare "husky install"

  • 执行 npm run prepare

    • image.png
      • git hook安装成功

  • 添加commit-msg

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

    九、通过pre-commit 检测提交时代码规范

  • 使用husky配合eslint，在代码提交之前检查代码规范【per-commit】

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

    十、lint-staged自动修复格式错误

  • lint-staged可以检测本次代码格式是否符合本地eslint提交规则，并修改错误代码【commit之前】

    • 无需单独安装，生成项目时，vue-cli 已经帮助我们安装过了，可以直接使用就可以了
      1. //config同级
      2. "lint-staged": {
      3. "src/**/*.{js,vue}": [
      4.  "eslint --fix",
      5.  "git add"
      6. ]
      7. }

  • 修改pre-commit

    1. npx lint-staged

    总结

  • 代码格式规范

    • 通过ESLint+Prettier+VScode配合进行处理
    • 保存代码时，自动规范化代码格式
  • git提交规范
    • 使用husky来检测Git hooks,并且通过以下插件完成对应的配置
    • 约定式提交规范
    • commitizen:git提交规范化工具
    • commitlint:检查提交信息
    • pre-commit：git hooks钩子
    • lint-staged:只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送