检查提交代码是否符合检查配置 · 前端工程化学习笔记

>[success] # 提交前检查 ~~~ 1.针对代码整体检查可以分为四个阶段： 1.1.编码时检查：编写代码时检查，通常表现为由 IDE 自动实时检查并进行代码提示。 1.2.编码后检查：编写代码后检查，通常表现为手动调用检查脚本 / 工具进行代码的检查或者代码保存后由 IDE 自动检查当前文件。 1.3.构建前检查：构建执行前检查，通常表现为将代码检查作为构建任务的一个前置切面，构建时自动触发代码检查。 1.4.提交前检查：git commit 前检查，通常表现为将代码检查作为 git commit 的一个 hooks 任务，代码提交前自动触发代码检查。 '编码时'和'编码后'其实有时候可以看作一体，当你使用了类似vscode 这类工具编码，并安装了'eslint' 这类插件通过配置便可以在编写时候今天错误提示，当然如果你这些都没有做就是需要编码后运行'eslint' 检查脚本的指令帮助你发现代码错误 '构建前检查',表现在现在用的打包工具gulp 以及 webpack 配合 ~~~ >[danger] ##### 提交前检查 ~~~ 1.提交前当我们使用git 等这类工具的时候，在提交的时候做最后一道防护，防止团队成员提交的代码风格和团队不同 ~~~ >[danger] ##### git 提供的钩子 1. `pre-commit`在提交信息**编辑前**运行，在这个阶段塞入**代码检查**流程，检查未通过返回非零值即可停止提交流程； 2. `prepare-commit-msg`在默认信息被创建之后运行，此时正是**启动编辑器前**，可在这个阶段加载`commitizen`之类的辅助填写工具； 3. `commit-msg`在**完成编辑后**运行，可在这个阶段借助`commitlint`进行提交信息规范性检查； 4. `post-commit`在**提交完成后**运行，在这个阶段一般做一些通知操作。 >[info] ## 使用husky 直接去改动`git hook`是不明智因为改动本地的钩子是无法同步到远程仓库的git 钩子上，因此可以使用 `husky`是一个`Git hooks`工具，能够在项目中配置hooks脚本；当我们执行git操作时，自动触发配置的脚本；并且在指定`git hook` 钩子去配置要执行的脚本 >[danger] ##### 在6.0 之前安装`npm install -D husky` 之后只需要在package.json 中去配置对应`git hook` 生命周期触发的钩子即可 ~~~ { "husky": { "hooks": { "pre-commit": "npm run test", // 在commit之前先执行npm run test命令 "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" // 校验commit时添加的备注信息是否符合我们要求的规范 } } } ~~~ >[danger] ##### 6.0 之后已经不用在`package.json` 中去生成文件，而是`npm install -D husky`,在执行`npx husky install` 会帮我们创建`.husky` 文件并不会帮助创建`git hook`钩子配置文件，执行`npx husky-init` 会创建`.husky` 文件并帮创建`pre-commit` 钩子但此时钩子执行脚本为`npm test`,想直接一步到位需要使用`npx husky install` 然后执行`npx husky add .husky/pre-commit "npm test"` 其中`npm test` 是触发钩子时候要执行的脚本 1. 安装`npm install -D husky` 2. 执行`npx husky install` 生成`.husky` 文件 3. 指定钩子对应执行脚本`npx husky add .husky/pre-commit "npm test"` 有时候会看见说需要执行`npm set-script prepare "husky install"` 只是 `npm7.x ` 支持的命令，如果你是`7.x` 之前的版本你可以直接在`packgae.json`中添加`prepare`脚本 ~~~json { "scripts": { "prepare": "husky install" } } ~~~ prepare脚本会在`npm install`（不带参数）之后自动执行。也就是说当我们执行npm install安装完项目依赖后会执行`husky install`命令，该命令会创建.husky/目录并指定该目录为git hooks所在的目录。 >[danger] ##### 6.0 前后的具体改造 [husky使用总结 ](https://zhuanlan.zhihu.com/p/366786798) >[info] ## 使用lint-staged `lint-staged`是一个对git暂存区代码进行格式化的工具，虽然刚才使用了`husky` 做了`git hook` 钩子触发时会触发的对应脚本配置，但是往往这类脚本是全局的例如`npx husky add .husky/pre-commit "npm run prettier"` 我这里配置是格式化所有文件，其实相对来说往往只需要格式化的是**暂存区** 中的文件即可 ~~~ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "prettier": "prettier --write .", "prepare": "husky install", "commit": "cz" }, ~~~ 1. 安装 `npm install lint-staged --save-dev` 2. 在package.json配置,lint-stagedv10.0.0以后下面可以不在添加`git add` ~~~ // change 1: 配置lint-staged指令 "scripts": { // 新增这一行 "lint-staged": "lint-staged", ... }, // change 2: 配置lint-staged的具体任务 "lint-staged": { "*.{js,ts,vue,jsx,tsx}": [ "prettier --write", "eslint --cache --fix", "git add" ] }, ~~~ 3. 相对应的触发钩子配置 `npx husky add .husky/pre-commit 'npm run lint-staged'` >[danger] 整体流程 >当我们进行一次git提交时 => 触发husky配置的pre-commit钩子 => 执行`npm run lint-staged`命令 => 触发lint-staged对暂存区的文件进行格式化（使用package.json中配置的lint-staged任务） => 使用prettier + eslint 进行格式化 >[info] ## 代码提交规范 -- Commitizen 在提交代码时候希望可以按照规范写好提交信息备注可以使用 1. `npm install commitizen -D` 2. 安装cz-conventional-changelog，并且初始化cz-conventional-changelog`npx commitizen init cz-conventional-changelog --save-dev --save-exact` 执行后会帮我们在package.json中进行配置 ~~~ "config": { "commitizen": { "path": "./node_modules/cz-conventional-changelog" } } ~~~ `git hook` 钩子中对信息检查的钩子，配置`husky`,`npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'` 暂时不看 >[success] # 备注一下 https://godbasin.github.io/2019/11/10/change-log/ >[info] ## 文章参考 [内容非常详细！领略Eslint代码检查的四种姿势](https://developer.51cto.com/art/202103/650933.htm) [增加钩子链接](https://juejin.cn/post/7041768022284976165#heading-10) 后续https://zhuanlan.zhihu.com/p/76697446