图书管理系统网站开发设计过程,新网站建设银行提升转账额度,常州网站建设公司咨询,网站已经收录了 但是输入公司名找不到大家好#xff0c;我是若川。最近组织了源码共读活动#xff0c;感兴趣的可以加我微信 ruochuan12 参与#xff0c;每周大家一起学习200行左右的源码#xff0c;共同进步。已进行四个月了#xff0c;很多小伙伴表示收获颇丰。想学源码#xff0c;极力推荐订阅我写的《学习… 大家好我是若川。最近组织了源码共读活动感兴趣的可以加我微信 ruochuan12 参与每周大家一起学习200行左右的源码共同进步。已进行四个月了很多小伙伴表示收获颇丰。想学源码极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。同时推荐参与源码共读活动。感谢bigAken投稿在每一个使用 git 进行版本管理的仓库都有一个目录 .git/hooks包含 commit 各个阶段 Hooks 的脚本。这些 Hooks 在 git 操作 commit、push、merge 等得时候可以做前置或者后置的操作例如 pre-commit 在 git commit 前可以做代码校验校验代码的时候使用的ESLint格式化使用的是 prettier。Git 支持的常用钩子见下表更多请查看官网Hooks:Git Hook调用时机调用时机pre-commitgit commit 执行前可以用 git commit --no-verify 绕过commit-msggit commit 执行前可以用 git commit --no-verify 绕过pre-merge-commitgit merge 执行前可以用 git merge --no-verify 绕过pre-pushgit push 执行前本文先实践怎么去写 pre-commit 这个 git hooks然后介绍 huskylint-stagedcommitlint 的使用在 git 项目中.git/hooks下面有很多 hooks 示例如下这些 git hooks 都是.sample结尾的如果要启用某个 hooks 用可以去掉.sample结尾实践npm init -y初始化一个项目然后git init然后npm install eslint --save-dev新建.gitignore文件node_modules# local env files
.env.local
.env.*.local# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log**-lock.json
*.lock新建.eslintrc配置 eslint{rules: {// 要求使用分号semi: [error, always],// 强制使用一致的反勾号、双引号或单引号quotes: [error, double]}
}新建src目录然后里面新建index.js禁止使用快捷键格式化console.log(object)根目录新建文件夹.customGitHooks然后 git config core.hooksPath .customGitHooks主要是设置 gitHooks 的存放目录因为 gitHooks 默认存放目录是.git/hooks新建pre-commit写入如下#!/bin/shecho start check your codeplease wait...
# git diff 获取更改的内容 可以通过参数--diff-filter 配置条件
npx eslint $(git diff --cached --name-only --diff-filterACM -- *.js)
# 变量$?---上一个命令的执行状态结果
if [ $? ! 0 ];thenecho ending and failedplease check your codeexit 1
elseecho check pass
fi这时候执行git add .git commit -m test就会发现没有 commit 成功报错了如下图如果把 index.js 的代码修改如下console.log(object)执行git add . git commit -m test就会发现 eslint 代码检查通过了能正常提交了以上实践能很好解释 commit 前怎么检验代码但是有个缺点就是别人 pull 你的代码要执行git config core.hooksPath .customGitHooks能起作用下面就介绍 huskylint-stagedcommitlint 的使用.git 文件夹不会被跟踪并且上传至远程仓库的Huskygithub为了解决.git配置不能提交远程仓库的问题husky 出来了husky 在你npm i安装完依赖只有自动执行husky install安装 npm install husky -Dnpm install husky -D使用编辑package.json在script里添加prepare的值为husky installscripts: {prepare:husky install},然后执行npm run prepare做了什么事呢源码index.ts中,我们看到执行 husky install 实际上就是创建 .husky 目录复制../husky.sh文件到该目录下配置了一个.gitignore,设置了core.hooksPath设置 .husky 目录为 git hooks 目录添加一个 hook在.husky目录下创建pre-commit#!/bin/shecho start check your codeplease wait...
# git diff 获取更改的内容 可以通过参数--diff-filter 配置条件
npx eslint $(git diff --cached --name-only --diff-filterACM -- *.js)
# 变量$?---上一个命令的执行状态结果
if [ $? ! 0 ];thenecho ending and failedplease check your codeexit 1
elseecho check pass
fiindex.js文件内容如下console.log(object)然后执行git add .git commit -m test发现代码已经被拦截没有提交因为index.js代码不符合规范遗留问题就是 git hooks 不会编写怎么办下面 lint-staged 出来了lint-staged配置例子作用对 Git 暂存区代码文件进行 bash 命令操作等等npm i lint-staged -D根目录下新建.lintstagedrc文件{*.js: eslint
}把husky目录下的pre-commit修改如下. $(dirname $0)/_/husky.sh
npm run lintpackage.json添加scriptscripts: {lint: lint-staged
}index.js如下console.log(object)
console.log(object)执行git add .git commit -m test可以发现调用了 eslint 去检查代码检查不通过就退出commit综上代码检测规范有了现在也需要规范一下提交规范commitlintgithub校验 commit 提交的信息npm install --save-dev commitlint/config-conventional commitlint/cli使用新建commitlint.config.jsmodule.exports {extends: [commitlint/config-conventional],rules: {type-enum: [2, always, [build, ci, docs, feat, fix, perf, refactor, style, test, revert, chore]],type-case: [0],type-empty: [0],scope-empty: [0],scope-case: [0],subject-full-stop: [0, never],subject-case: [0, never],header-max-length: [0, always, 72]}
}配置git hooks执行下面命令npx husky add .husky/commit-msg npx --no -- commitlint --edit $1commit message 一般分为三个部分 HeaderBody 和 Footerheader
type(scope): subject
// 空一行
body
// 空一行
footer
其中Header 是必需的Body 和 Footer 可以省略接下来提交的 commit 必须符合下面的格式注意冒号后面有空格git commit -m type[optional scope]: description常用的 type 类别build主要目的是修改项目构建系统(例如 glupwebpackrollup 的配置等)的提交ci主要目的是修改项目继续集成流程(例如 TravisJenkinsGitLab CICircle 等)的提交docs文档更新feat新增功能fixbug 修复perf性能优化refactor重构代码(既没有新增功能也没有修复 bug)style不影响程序逻辑的代码修改(修改空白字符补全缺失的分号等)test新增测试用例或是更新现有测试revert回滚某个更早之前的提交chore不属于以上类型的其他类型(日常事务)optional scope一个可选的修改范围。用于标识此次提交主要涉及到代码中哪个模块。description一句话描述此次提交的主要内容做到言简意赅。这时候执行一次测试一下git add .
git commit -m test因为该提交的 commit 是不规范的所以提交时失败的 如下图如果把 commit 修改就会提交成功因为符合 commit 规范git add .
git commit -m feat: test但是问题又来了每次 commit 都要输入有点不方便而且有可能输错 下面就介绍到 commitizencommitizencz-commitlint生成符合规范的 commit message本地安装并没有全局安装当然可以全局安装具体查看官方文档全局安装可以使用git czcz-commitlint打通 commitizen 和commitlint配置npm install --save-dev commitlint/cz-commitlint commitizen然后npx commitizen init cz-conventional-changelog --save-dev --save-exactpackage.json添加script{scripts: {commit: git-cz},config: {commitizen: {path: commitlint/cz-commitlint}}
}新建commitlint.config.jsmodule.exports {extends: [commitlint/config-conventional]
}然后执行git add .npm run commit发现为中文提示如下图再次修改commitlint.config.jsmodule.exports {extends: [commitlint/config-conventional],prompt: {questions: {type: {description: 选择你要提交的类型:,enum: {feat: {description: 新功能,title: Features,emoji: ✨},fix: {description: 修复相关bug,title: Bug Fixes,emoji: },docs: {description: 文档更改,title: Documentation,emoji: }}}}}
}然后执行git add .npm run commit可以看到变成中文了具体参考官网接下来提交信息 执行npm run commit就可以按照规范提交了如果没有使用commitlint在 commitizen中使用 cz-customizable也可以自定义很多配置的最近组建了一个江西人的前端交流群如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。推荐阅读整整4个月了尽全力组织了源码共读活动~我历时3年才写了10余篇源码文章但收获了100w阅读老姚浅谈怎么学JavaScript我在阿里招前端该怎么帮你可进面试群················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》10余篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时最近组织了源码共读活动帮助1000前端人学会看源码。公众号愿景帮助5年内前端人走向前列。识别上方二维码加我微信、拉你进源码共读群今日话题略。分享、收藏、点赞、在看我的文章就是对我最大的支持
