vue3+ts编程规范

编程规范

为什么需要编程规范

• 大型企业项目需要团队开发
• 团队配合的过程中不同开发者的不同习惯将导致项目规范不统一
• 让所有团队成员都学习一遍编程规范并且严格遵守并不现实

如何解决？

• 让程序自动处理代码规范

需要让程序解决的问题：

• 编程规范(eslint校验代码规范 )
• git规范(提交规范)

git commit -m “增加了一些功能”

eslint

• 提供一个插件化的JavaScript代码检测工具

prettier

• 通过prettier进行代码格式化。

git提交规范

• 遵守约定式提交
• 参考angular团队规范

Commitizen

• github 仓库名： cz-cli
• 作用：当你使用commitizen 进行代码提交时，commitizen会提交你在提交时填写所有必须的提交字段

官方文档： Commitizen (commitizen-tools.github.io)

全局安装：

pnpm add -g commitizen

全局安装完成后还需要配合项目中的插件：cz-customizable。

下面是该包在npmjs中的地址：cz-customizable - npm (npmjs.com)

项目中安装插件：

pnpm add cz-customizable 

修改package.json文件，添加配置：

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

创建配置文件：

项目目录下新建.config文件夹，在其中创建.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
}

同时在package.json文件中添加配置文件的地址：

"config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    },
    // config文件地址，如果不设置的话，默认会在项目的根目录去查找配置文件
    "cz-customizable": {
      "config": ".config/.cz-config.js"
    }
  }

配置完成后进行git提交：

• git add .
• git cz( 使用git cz 替换git commit )

如果在提交过程中忘了使用git cz怎么 办？

可以使用git hooks来解决。

git hooks

问题：如果某个开发者忘了使用git cz 命令进行提交，而是使用的git commit 命令进行提交，那么就可能导致他的提交规范并不符合要求。

目标：

当提交描述信息不符合约定式提交规范的时候，阻止当前提交，并且抛出对应的错误提示。

实现：需要通过git hooks (git 钩子)

所谓的git hooks，就是指在执行某个事件之前或之后进行一些额外的操作。

常用的钩子：

• pre-commit: 会在提交前被调用，并且可以按需指定是否要拒绝本次提交
• commit-msg： 可以用来规范化标准格式，并且可以按需指定是否要拒绝本次提交。

使用husky+commitlint检查描述是否符合规范要求

接下来使用git hooks来校验提交信息，需要使用到两个工具：

• commitlint: 校验检查提交信息
• husky: git hook的实现工具

安装commitlint:

官方文档地址：commitlint - Lint commit messages

pnpm add @commitlint/cli @commitlint/config-conventional

安装好后，在项目的根目录创建文件：commitlint.config.js,内容如下：

module.export = { extends: ['@commitlint/config-conventional'] }

之后测试一下commitlint这个校验工具，

echo 'foo: bar' |npx commitlint

如果出现下面的提示，表示安装成功：

测试通过之后，再来修改配置文件commitlint.config.js:

// eslint-disable-next-line no-undef
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, 'never']
  }
};

接下来，再来安装husky:

地址：husky - npm (npmjs.com)

pnpm add husky

安装完成后手动的进行启动,启动的目的是为了在项目中创建一个.husky文件夹:

npx husky install

接下来打开package.json，在其中添加新的指令：

"prepare": "husky install"

运行指令：npm run prepare。当出现如下的内容，表示指令执行成功：

指令测试成功之后，接下来将commitlint 和 husky配合使用 。

我们通过husky监听git hooks，在commit-msg这个hooks中执行commitlint，从而实现代码的检测。

执行命令，实现hooks的添加：

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

执行完成后，husky下会多出一个hooks：

到此，关于git的规范化操作处理已经完成， 如果此时开发者进行非规范化提交，则会报错。比如：

pre-commit检测提交代码

上面已经对代码的提交规范做了强制约束。接下来我们来对代码进行检测。我们要实现的目的是用户在开发完毕之后提交代码的过程中，如果代码不符合eslint格式要求，让终端停止提交，并且展示错误。

想要实现这个功能，需要配置pre-commit钩子，执行下面的命令：

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

上面代码执行完毕之后 ，会在husky文件夹创建出一个新的钩子文件：

在这个钩子文件中，我们可以在每次commit之前，执行一遍npx eslint命令。如果eslint校验出现了问题，则程序无法提交。

比如：

接下来再来配置一下代码自动修复功能，想要实现这个功能，需要使用另外一个插件lint-staged。

这款插件可以让你当前的代码检查只检查本次修改更新的代码，并且在出错误的时候，自动修复并且推送。

安装：

pnpm add lint-staged

修改package.json:

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

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

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

最后，在pre-commit钩子中，需要修改一下命令：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# npx eslint --ext .js,.vue src
npx lint-staged

修改完成后，在每次提交代码的时候，就会直接执行修复功能进行修复，修复完成后提交代码。如果修复失败则会直接在终端中抛出错误。