前端代码规范---git相关

350 阅读4分钟

这篇文章记录git的基本使用, git的高级应用, 以及git在项目中的配置内容.

git 基本使用

0.jfif

git提交代码流程

    1. add加入暂存区
git add [file | .]
    1. commit加入当前分支
git commit -m "git message"
    1. push到远程仓库
git push

git分支管理

  • 查看分支列表 查看本地分支
git branch

查看本地和远程的所有分支

git branch -a
  • 拉取分支 拉取一个远端的分支, 本地不存在此分支, 如拉取远程develop分支, 本地当前分支为master
git checkout -b develop origin/develop

本地切出新分支hahaha

git checkout -b hahaha 

git代码管理

  • 代码推送和拉取 拉取远程代码
git pull

推送内容到当前分支

git push
  • stash命令 stash是一个暂存当前工作区和暂存区修改的功能, 应对于某些特定的需求. 比如正在进行开发, 此时线上出现bug, 需要紧急的切出来一个hotfix分支去救火, 但是此时本地分支上的任务还没有开发完,但是又不想提交,同时如果不commit又没有办法checkout分支, 这时候stash命令就可以用了.

stash类似于一个栈结构,可以入栈和出栈

查看stash列表

git stash list

暂存当前工作区和暂存区的命令, 也可以不写save "message xxx"

git stash save "message xxx"

恢复stash, 并删除stash

git stash pop [–index] [stash_id]
// 例如 git stash list如下
stash@{0}: On eslint-0927: 完成部分eslint功能,等待继续完成1
stash@{1}: On eslint-0927: 完成部分eslint功能,等待继续完成1
stash@{2}: On eslint-0927: 完成部分eslint功能,等待继续完成

// 恢复最新的stash, 并同时出栈(即删除恢复的stash)
git stash pop
// 恢复指定的stash, 并同时出栈(即删除恢复的stash)
git stash pop stash@{1}

恢复stash, 但是不删除stash, 功能同pop

git stash apply [–index] [stash_id]

删除stash

// 删除指定的stash
git stash drop ## [stash_id]
// 清除全部stash
git stash clear
  • 代码回退 本地尚未push的代码回退, 主要使用git reset命令

例如执行了如下命令, 把修改已经commit当到前分支了, 此时想回退, 怎么办?

git add .
git commit -m "xxx"
  1. 显示所有提交记录, git log (git log --pretty=oneline)

image.png 2. 回退到某个版本

// 回退到上一个版本
git reset --mixed HEAD^
// 回退到上上一个版本
git reset --mixed HEAD^^
// 回退到前100个版本
git reset --mixed HEAD~100

git 高级应用

jenkins + git 实现自动化构建和打包

项目中相关git配置

面向多人协作, 中大型项目的时候, git commit的信息就需要做统一的限制, 否则就会混乱, 不好追溯问题, 造成很麻烦的问题. 所以这里记录一下使用husky结合commitlint对commit进行约束.

husky 介绍

Git 能在特定的重要动作发生时触发自定义脚本。 有两组这样的钩子:客户端的和服务器端的。 客户端钩子由诸如提交和合并这样的操作所调用,而服务器端钩子作用于诸如接收被推送的提交这样的联网操作。 你可以随心所欲地运用这些钩子。

例如执行commit命令的时候,会执行commit-msg的hook, 此hook就在.git/hooks/commit-msg下,是一个shell脚本, 编写这个shell脚本就能够对commit信息做验证, 但是一般前端程序员不太会写shell脚本, 所以husky就很有用了.

husky在npm install完毕后, 会创建hooks, 从而在Git commit的时候, 完成相应的验证.

使用

husky紧紧是会被git的hook触发, 但是并没有commit验证, eslint等功能, 所以需要结合commitlint.

1.安装husky

husky的版本是7.0.2

npm install husky --save-dev

2. 添加prepare命令

在package.json中, script中添加如下命令, prepare命令会在husky install完成后调用,用于为husky生成hooks.

"prepare": "husky install"

3. 创建.husky目录

husky的版本是7.0.2

在项目根目录下, 新建.husky目录, 有些老的版本是新建到.git目录下的.

4. 为husky创建新的hook

.husky目录下新建commit-msg的hook文件
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

window 10上部分人能运行上面命令, 并新建了一个commit-msg文件

但是比如我的win 10就会提醒usage信息: image.png

所以我就执行了新建命令, 里面的命令自己写入

npx husky add .husky/commit-msg

最终.huskycommit-msg文件内容如下:

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

npx --no-install commitlint --edit "$1"

如上, 只能在执行git commit的时候, 触发响应的hook, 并不能进行commit message的验证, 需要配合commitlint

5. commitlint使用

安装
npm i @commitlint/cli @commitlint/config-conventional -D
配置文件

commitlint.config.js

// @commitlint/config-conventional社区内的一些commitlint配置
module.exports = {
  extends: ['@commitlint/config-conventional']
}

如此已经完成了commit message验证了

如果还需要commit前进行eslint操作, 则可以看一下eslint的相关配置.