1.脚手架搭建

2.`eslint+prettier`代码格式化工具

eslint

module.exports = {
  // 表示当前目录即为根目录，ESLint 规则将被限制到该目录下
  root: true,
  // env 表示启用 ESLint 检测的环境
  env: {
    // 在 node 环境下启动 ESLint 检测
    node: true
  },
  // ESLint 中基础配置需要继承的配置
  extends: ["plugin:vue/vue3-essential", "@vue/standard"],
  // 解析器
  parserOptions: {
    parser: "babel-eslint"
  },
  // 需要修改的启用规则及其各自的错误级别
  /**
   * 错误级别分为三种：
   * "off" 或 0 - 关闭规则
   * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
   * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
   */
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  }
};

2..prettierrc


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

3.`commitizen`规范化提交代码

1.全局安装`Commitizen`

yarn add commitizen@latest

2.安装插件`cz-customizable`

安装

yarn add cz-customizable@latest -D

配置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进行提交

4.git hooks

约定式提交规范 hooks介绍 git 在执行某个事件之前或之后进行一些其他额外的操作
下面是我整理出来的所有的 hooks ，大家可以进行一下参考，其中加粗的是常用到的 hooks：

Git Hook	调用时机	说明
pre-applypatch	`git am`执行前
applypatch-msg	`git am`执行前
post-applypatch	`git am`执行后	不影响`git am`的结果
pre-commit	`git commit`执行前	可以用`git commit --no-verify`绕过
commit-msg	`git commit`执行前	可以用`git commit --no-verify`绕过
post-commit	`git commit`执行后	不影响`git commit`的结果
pre-merge-commit	`git merge`执行前	可以用`git merge --no-verify`绕过。
prepare-commit-msg	`git commit`执行后，编辑器打开之前
pre-rebase	`git rebase`执行前
post-checkout	`git checkout`或`git switch`执行后	如果不使用`--no-checkout`参数，则在`git clone`之后也会执行。
post-merge	`git commit`执行后	在执行`git pull`时也会被调用
pre-push	`git push`执行前
pre-receive	`git-receive-pack`执行前
update
post-receive	`git-receive-pack`执行后	不影响`git-receive-pack`的结果
post-update	当 `git-receive-pack`对 `git push` 作出反应并更新仓库中的引用时
push-to-checkout	当``git-receive-pack`对`git push`做出反应并更新仓库中的引用时，以及当推送试图更新当前被签出的分支且`receive.denyCurrentBranch`配置被设置为`updateInstead`时
pre-auto-gc	`git gc --auto`执行前
post-rewrite	执行`git commit --amend`或`git rebase`时
sendemail-validate	`git send-email`执行前
fsmonitor-watchman	配置`core.fsmonitor`被设置为`.git/hooks/fsmonitor-watchman`或`.git/hooks/fsmonitor-watchmanv2`时
p4-pre-submit	`git-p4 submit`执行前	可以用`git-p4 submit --no-verify`绕过
p4-prepare-changelist	`git-p4 submit`执行后，编辑器启动前	可以用`git-p4 submit --no-verify`绕过
p4-changelist	`git-p4 submit`执行并编辑完`changelist message`后	可以用`git-p4 submit --no-verify`绕过
p4-post-changelist	`git-p4 submit`执行后
post-index-change	索引被写入到`read-cache.c do_write_locked_index`后

整体的 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：会在提交前被调用，并且可以按需指定是否要拒绝本次提交

1.`husky+commitlint`检查提交描述是否符合规范提交

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

1. 安装`commitlint`

yarn add @commitlint/config-conventional@latest @commitlint/cli@latest -D

2.创建`commitlint.config.js`,格式需要是`utf-8`

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]
  }
};

3.`husky`

安装

yarn add husky -D

启动hook，生成.husky文件夹

npx husky install

3.在 package.json 中生成 prepare 指令

npm set-script prepare "husky install"

4.执行命令

npm run prepare

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

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

5.pre-commit 检测提交时代码规范代码不规范时限制提交 1.在.husky/pre-commit添加,会在执行到该hook时运行

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

5. lint-satged自动修复格式错误

配置package.json,此时提交会自动修复但不提交

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

修改 .husky/pre-commit 文件,自动修复并提交

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

git 提交规范：

对于 git 提交规范 而言我们使用了 husky 来监测 Git hooks 钩子，并且通过以下插件完成了对应的配置：

约定式提交规范
commitizen：git 提交规范化工具
commitlint：用于检查提交信息
pre-commit： git hooks 钩子
lint-staged：只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送

1.前端编程规范解决方案

1.脚手架搭建

2.eslint+prettier代码格式化工具

3.commitizen规范化提交代码

1.全局安装Commitizen

2.安装插件cz-customizable

4.git hooks

1.husky+commitlint检查提交描述是否符合规范提交

1. 安装commitlint

2.创建commitlint.config.js,格式需要是utf-8

3.husky