Why

在观看以下内容的时候，请先确保你的项目安装了 eslint + prettier 套餐。如果没有可以先去了解一下。

现在普遍用eslint+prettier来控制代码格式，开发的时候能得到很好的控制，我们希望在开发的时候也做一次验证，并且自动格式化代码，于是我发现了 yorkie 和 husky 这种利用gitHooks的工具，可以在提交代码的时候做一些操作

yorkie是尤大大操刀forke自husky做的改造. 本质还是husky，只是内置了不用再去做额外配置操作。

lint-staged

提交代码的时候，我们希望只对要提交的部分代码进行eslint校验和格式化操作，就需要安装lint-staged组件，vue-cli创建项目的时候，可以在选项配置里面添加，如果创建的时候没有添加，可以手动安装

yarn add lint-staged -D

根目录创建  .lintstagedrc.json 文件或者 package.json里面配置,控制检查和操作方式

{ 
    "src/**/*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"], 
    "src/**/*.md": ["prettier --write"] 
}

"lint-staged": {
    "src/**/*.{js,jsx,vue}": [
      "vue-cli-service lint"
    ]
},

踩坑
在安装lint-staged的时候，默认安装的是最新版本^13.0.3,提交代码时eslint返回的错误提示消息一些字符显示异常，对比发现是 版本问题 ,尤大大用yorkie的时候安装的是 ^9.5.0版本，删除重新安装这个版本后，发现提示消息正常。

yarn add lint-staged@^9.5.0 -D

yorkie

vue-cli创建项目的时候就自动安装了yorkie

{
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
    },
    "gitHooks": {
        "pre-commit": "lint-staged"
    },
    "lint-staged": {
        "src/**/*.{js,jsx,vue}": [
          "vue-cli-service lint"
        ]
    }
}

husky Husky - Git hooks (typicode.github.io))

本质上就是一个与gitHooks关联起来的工具，只需简单安装配置就行

--安装
yarn add husky -D

--初始化 gitHooks，会在根目录创建 .husky 目录
yarn husky install

--在package.json中添加脚本
npm set-script prepare "husky install"

--添加 git pre-commit 钩子（代码提交时），在提交代码时执行后面的命令
--执行完会生成一个pre-commit文件 root/.husky/pre-commit 这个里文件可以修改命令
yarn husky add .husky/pre-commit "yarn lint-staged"


{
    "scripts": {
        "prepare": "husky install", #初始化husky,将 git hooks 钩子交由,husky执行
    }
}

• prepare : npm内置命令，在install执行成功后自动执行，如果你的同事没有初始化过husky。 在他安装包后会自动初始化

• set-script: 通过命令行添加 package.json的script命令

看效果

最后

踩坑做笔记，下次不掉坑。如果有写的不对的地方，欢迎评论区指正探讨~