前端

React

Android

算法

但凡项目质量要求高会涉及到代码质量管理的问题,如何自动化检查代码质量。
## git hook
git能在特定的重要动作发生时触发自定义脚本,这种钩子分为两种:一者是客户端的,另外一种就是服务端的。利用git hook,我们可以在提交之前运行脚本,但是脚本需要放在.git/hooks目录下面,团队协作中直接使用脚本是不利于团队内推广的。所以我们需要使用`husky`来解决这个问题。
## 安装husky
```bash
npm install husky --save-dev
```
## 如何使用
编辑`package.json > prepare`,然后运行一次:
```bash
npm set-script prepare "husky install"
npm run prepare
```
接着添加一个`hook`:
```bash
npx husky add .husky/pre-commit "npm test"
git add .husky/pre-commit
```
这样husky的配置就初步完成了。但是我们会发现,脚本执行的范围会是所有文件,随着项目体积的增加,文件数量会变得很多,全部走一遍脚本会很耗时间,这时候就需要`lint-staged`来限制脚本执行的范围,我们只执行在提交的代码上,不管其他未操作过的文件。
## 安装lint-staged
```bash
npx mrm@2 lint-staged
```
命令行执行这个脚本以后,就会在package.json默认生成一下类似内容:
```json
{
  "lint-staged": {
    "*.{vue,js,jsx,cjs,mjs,ts,tsx,cts,mts}": "eslint --cache --fix",
    "*.{js,css,md}": "prettier --write"
  }
}
```
同时.husky文件下的pre-commit文件内容也会发生改变。
这样我们就完成提交的脚本操作了。

前端工程化(一)：使用Husky和lint-staged配置Git hook

**全字母句**含英语字母表中每个字母至少一次的句子。

给你一个仅由小写英文字母组成的字符串`sentence`，请你判断`sentence`是否为**全字母句**。

如果是，返回`true`；否则，返回`false`。

**示例1:**

```bash
输入：sentence = "thequickbrownfoxjumpsoverthelazydog"
输出：true
解释：sentence 包含英语字母表中每个字母至少一次。
```

**示例2**

```bash
输入：sentence = "leetcode"
输出：false
```

**提示**:

- ``1 <= sentence.length <= 1000``
- `sentence`由小写英语字母组成

---

**解答**:

```javascript
/**
 * @param {string} sentence
 * @return {boolean}
 */
var checkIfPangram = function(sentence) {
  const list = new Set(sentence.split(""))
  return list.size===26
};
```

**思路:**

本次使用的方法是去重法,去重之后如果剩下的元素是26个,则是全字母句,反之则不是,这里使用的是es6语法里的Set来进行去重。

判断句子是否为全字母句

给你一个长度为`n`的整数数组`score` ，其中`score[i]`是第 i 位运动员在比赛中的得分。所有得分都**互不相同**。

运动员将根据得分**决定名次**，其中名次第`1`的运动员得分最高，名次第`2`的运动员得分第`2`高，依此类推。运动员的名次决定了他们的获奖情况：

- 名次第`1`的运动员获金牌`"Gold Medal"`。
- 名次第`2`的运动员获银牌`"Silver Medal"`。
- 名次第`3`的运动员获铜牌`"Bronze Medal"`。
- 从名次第`4`到第`n`的运动员，只能获得他们的名次编号（即，名次第`x`的运动员获得编号`"x"`）。

使用长度为`n`的数组 answer 返回获奖，其中`answer[i]`是第`i`位运动员的获奖情况。

**示例1:**
```bash
输入：score = [5,4,3,2,1]
输出：["Gold Medal","Silver Medal","Bronze Medal","4","5"]
解释：名次为 [1st, 2nd, 3rd, 4th, 5th] 。
```

**示例2:**
```bash
输入：score = [10,3,8,9,4]
输出：["Gold Medal","5","Bronze Medal","Silver Medal","4"]
解释：名次为 [1st, 5th, 3rd, 2nd, 4th] 。
```

**提示:**
- `n == score.length`
- `1 <= n <= 104`
- `0 <= score[i] <= 106`
- `score`中的所有值**互不相同**

**解答**
```typescript
function findRelativeRanks(score: number[]): string[] {
    const list = score.sort((a,b)=>b-a)

    return score.map((item)=>{
        const i = list.indexOf(item)
        if(i===0){
            return "Gold Medal"
        }else if(i===1){
            return  "Silver Medal"
        }else if(i===2){
            return "Bronze Medal"
        }
        return `${i+1}`
    })
};
```
**思路**
先排序,然后遍历score数组,获取每个元素在新数组的位置,根据位置来输出不同内容。

相对名次

给你一个字符串 s ，字符串的「能量」定义为：只包含一种字符的最长非空子字符串的长度。

请你返回字符串的能量。

#### 示例1:
```bash
输入：s = "leetcode"
输出：2
解释：子字符串 "ee" 长度为 2 ，只包含字符 'e' 。
```
#### 示例2:
```bash
输入：s = "abbcccddddeeeeedcba"
输出：5
解释：子字符串 "eeeee" 长度为 5 ，只包含字符 'e' 。
```
#### 示例3:
```bash
输入：s = "triplepillooooow"
输出：5
```
#### 示例4:
```bash
输入：s = "hooraaaaaaaaaaay"
输出：11
```
#### 示例4:
```bash
输入：s = "tourist"
输出：1
```
#### 提示:
- `1 <= s.length <= 500`
- `s`只包含小写英文字母
---
### 解答
```javascript
/**
 * @param {string} s
 * @return {number}
 */
var maxPower = function(s) {
 var max = 1, count = 1

  for (var i = 0; i < s.length; i++) {
    if (s[i] === s[i + 1]) {
      count += 1
      max = Math.max(max, count)
    } else {
      count = 1
    }
  }

  return max
};
```
### 思路
先定义两个变量,`max`和`count`,max用来记录目前最大的字符串,count则是用来记录当前重复字符串重复次数。然后依次变量字符串,比较当前值和下一个值是否相等,当然也可以比较和上一个值是否相等,如果相等则count+1,然后从count和max中取最大值重新赋值给max,如果不相等,则把count重新赋值为1,重新开始计算。


连续字符

创建一个新的Android项目后会产生assets和res两个文件夹,虽然二者都是存放资源的目录,但是二者有着很大的区别。
## res目录
这个目录下的文件会在R.java里自动生成该资源的ID,所以访问这种资源文件比较简单,通过`R.XXX.ID`
## assets目录
该目录下的文件在系统的编译的时候不会参与编译,所以我们无法同像`R.XXX.ID`的方式来访问它们。同时我们也不能通过绝对路径去访问它们,因为apk安装之后会放在/data/app/\*\*.apk目录下,assets被绑定在qapk里,以apk形式存在,并不会解压到/data/data/YourApp目录下面。
## res/raw和assets区别
相同点:
1. 两者目录下的文件在打包后会原封不动的保存在apk包中,不会被编译成二进制。
不同点：
1. res/raw中文件可以用`R.XXX.ID`访问;assets文件夹则需要使用`AssetManger`类
2. res/raw不可以有目录结构,而assets可以有目录结构
3. assets目录下的文件尽可能不要超过1M,否则会有bug;而res/raw则可以不受限制

## 访问assets目录文件
1. webview.loadUrl("file:///android_asset/demo/index.html")
2. AssetManager.open(String filename) 返回的是一个`InputStream`类型的字节流。

Android开发基础知识（一）：Assets和Res目录

## 项目简介
这是一个基于`Fiber`框架开发的短链接网站,有PC端和小程序端,以后考虑会有基于原生的手机端。

## 技术栈
Go+Fiber+ent(Facebook开源的ORM框架)+Taro(开发多端小程序)
1. Fiber框架文档地址 [https://docs.gofiber.io/](https://docs.gofiber.io/)
2. ent官网 [https://entgo.io/](https://entgo.io/)
3. Taro官网 [http://taro-docs.jd.com/taro/docs/README](http://taro-docs.jd.com/taro/docs/README)

## 功能
- [ ] 首页
- [ ] 用户登录
- [ ] 一对一短链接
- [ ] 一对多短链接(根据多条件来跳转不同的链接)
- [ ] 短链接访问IP,设备,系统,地区统计
- [ ] 短链接提供第三方API认证调用
- [ ] 二维码生成

## 目录结构
```
short-link
├── config # 配置文件
├── controller #控制器
│   └── user.go
├── ent #数据库模型
│   ├── enttest
│   │   └── enttest.go
│   ├── hook
│   │   └── hook.go
│   ├── migrate
│   │   ├── migrate.go
│   │   └── schema.go
│   ├── predicate
│   │   └── predicate.go
│   ├── runtime
│   │   └── runtime.go
│   ├── schema
│   │   └── user.go
│   ├── user
│   │   ├── user.go
│   │   └── where.go
│   ├── client.go
│   ├── config.go
│   ├── context.go
│   ├── ent.go
│   ├── generate.go
│   ├── mutation.go
│   ├── runtime.go
│   ├── tx.go
│   ├── user.go
│   ├── user_create.go
│   ├── user_delete.go
│   ├── user_query.go
│   └── user_update.go
├── repository # 数据库操作
│   └── user.go
├── router # 路由
│   ├── middleware #中间件
│   └── router.go #路由配置
├── service # 服务层
├── util # 工具集
├── bee.json
├── go.mod
├── go.sum
├── main.go
├── README.md
```

## 项目地址
https://github.com/lookenghua/short-link


短链接网站开发实战（一）：项目简介

随着越来越快的开发迭代，基于WebView的混合开发占据了不少的份额。很多App内部都有着WebView的影子，本项目就是基于Jetpack Compose来搭建WebView混合开发框架。
## 项目目标
开发基于`WebView`的混合开发框架。安卓默认支持5.0以上,iOS支持13以上。
## 项目功能
### 基础功能
1. 选择图片和拍照功能
2. 权限申请
3. 定位功能(基于高德地图)
4. 扫码
5. office文件预览
6. 文件下载
7. 选择文件功能
8. 极光推送
9. 第三方网页浏览
10. 剪切板
11. 自动升级
### 高级功能
1. 语音识别
2. 录音
3. 录屏
## 项目地址
https://github.com/lookenghua/WebView

基于WebView搭建混合开发应用开发平台（一）：项目简介

`Modifier.clickable()`进行点击的时候会有水波纹效果,如何去除这个效果呢?有以下两个方法:
## 1.将indication设为nul
```kotlin

modifier = Modifier
            .clickable(onClick = {}, indication = null, interactionSource = remember {
                MutableInteractionSource()
            })
```

## 2.使用pointerInput设置点击事件
```kotlin
modifier = Modifier
                .pointerInput(Unit) {
                    detectTapGestures(
                    // 长按事件
                    onLongPress = {}, 
                    // 点击事件
                    onTap = { })
                }
```

Jetpack Compose如何禁用涟漪（水波纹）效果

## 1. Penpot(原型、UI设计工具)
**官网:**[https://help.penpot.app/](https://help.penpot.app/)

![68747470733a2f2f70656e706f742e6170702f696d616765732f726561646d652f686f6d652d75692e6a7067.jpg](https://image.lookenghua.cn/article/2022-03-21/22/1647874571369-be10d.jpg)

## 2. Supabase(开源firebase)
**官网:**[https://supabase.com/](https://supabase.com/)

![68747470733a2f2f73757061626173652e636f6d2f646f63732f6173736574732f696d616765732f73757061626173652d6172636869746563747572652d39303530613733313765396563376566623738303766353139343132326534382e706e67.png](https://image.lookenghua.cn/article/2022-03-23/23/1648050322737-4f1d.png)

## 3.OpenSumi(开源IDE)
**官网:**[https://opensumi.com/zh](https://opensumi.com/zh)

![O1CN01uIRRRl1wmLkN9geV3_!!6000000006350-2-tps-2844-1830.png](https://image.lookenghua.cn/article/2022-03-27/11/1648350933381-1c67.png)

## Nettu Meet(视频会议系统)
**官网:**[https://github.com/fmeringdal/nettu-meet](https://github.com/fmeringdal/nettu-meet)

![app.png](https://image.lookenghua.cn/article/2022-04-25/18/1650881949051-6e65.png)

开源产品推荐

## 1.[mavonEditor](https://github.com/hinesboy/mavonEditor) ![GitHub Repo stars](https://img.shields.io/github/stars/h//mavonEditor?style=social) ![GitHub last commit](https://img.shields.io/github/last-commit/hinesboy/mavonEditor)

![cn-image.gif](https://image.lookenghua.cn/article/2022-04-20/12/1650428593607-55d2.gif)
## 2.[Vditor](https://github.com/Vanessa219/vditor) ![GitHub Repo stars](https://img.shields.io/github/stars/Vanessa219/vditor.svg?style=social) ![GitHub last commit](https://img.shields.io/github/last-commit/Vanessa219/vditor)

- 支持所见即所得模式
- 即时渲染类似于typeora

![wysiwyg-4f216b9b.gif](https://image.lookenghua.cn/article/2022-04-20/12/1650429593393-132a.gif)


![ir-67cd956c.gif](https://image.lookenghua.cn/article/2022-04-20/12/1650430013906-1082c.gif)


## 3.[TOAST UI Editor](https://github.com/nhn/tui.editor) ![GitHub Repo stars](https://img.shields.io/github/stars/nhn/tui.editor.svg?style=social) ![GitHub last commit](https://img.shields.io/github/last-commit/nhn/tui.editor)

![121808231-767b0f80-cc92-11eb-82a0-433123746982.png](https://image.lookenghua.cn/article/2022-04-20/13/1650430863641-f445.png)

![121808381-251f5000-cc93-11eb-8c47-4f5a809de2b3.png](https://image.lookenghua.cn/article/2022-04-20/13/1650430865057-4718.png)

## 4.[Editor.md](https://github.com/pandao/editor.md) ![GitHub Repo stars](https://img.shields.io/github/stars/pandao/editor.md.svg?style=social) ![GitHub last commit](https://img.shields.io/github/last-commit/pandao/editor.md)

- 支持 ToC（Table of Contents）、Emoji表情、Task lists、@链接等 Markdown 扩展语法；
- 支持 TeX 科学公式（基于 KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram;
![68747470733a2f2f70616e64616f2e6769746875622e696f2f656469746f722e6d642f6578616d706c65732f696d616765732f656469746f726d642d73637265656e73686f742e706e67.png](https://image.lookenghua.cn/article/2022-04-20/13/1650431509931-5672.png)


开源Markdown库推荐

## 1. 部署平台
**1. [Vercel](https://vercel.com/)**
支持Nextjs、Svelte、Nuxt.js、Gatsby.js、Angular等常见前端框架部署,支持自动配置https,支持部署Serverless接口

## 2. 数据库
**1. [MongoDB Atlas](https://cloud.mongodb.com/)**
- 类型: MongoDB
- 大小: 512MB
- 支持香港节点等数十个节点

**2. [CloudAMQP](https://www.cloudamqp.com/)**
- 类型: rabbitmq

**3. [CloudKarafka](https://www.cloudkarafka.com/)**
- 类型: kafka

**4. [RedisLabs](https://app.redislabs.com/)**
- 类型: redis
- 大小: 30MB
**5. [upstash](https://upstash.com/)**
- 类型:redis,kafka
- 大小:10k访问次数

## 3.客服聊天系统
**1. [Chatra](https://chatra.com/cn/)**
- 介绍:支持一个客服,在线和离线聊天Widget

免费开发资源平台

## 1. word-count
**简介:** 计算CJK字符数

## 2. select-files
**简介:** 动态创建input框,以API形式选择文件

## 3. concurrently
**简介:** 同时并行运行多个指令,相互之间不影响

![demo.gif](https://image.lookenghua.cn/article/2022-03-29/11/1648523547076-41b4.gif)

## 4.chalk
**简介:** 美化控制台字符串输出,显示彩色文字和背景色

## 5.wait-on
**简介:** 等待网路请求,页面,文件,端口,socket启动

每周了解10个NPM包 第一周

1.Radix
**官网:** [https://www.radix-ui.com/](https://www.radix-ui.com/)

![微信截图_20220319125738.png](https://image.lookenghua.cn/article/2022-03-19/12/1647665897410-8f4c.png)

![微信截图_20220319125805.png](https://image.lookenghua.cn/article/2022-03-19/12/1647665897788-ad70.png)

React组件库

## 日期
### 1. Day.js
**首页地址:** [https://github.com/iamkun/dayjs](https://github.com/goldfire/howler.js)
**特点:**体积小,仅2kb大小

## 音频播放器
### 1.howler.js
**首页地址:**[https://github.com/goldfire/howler.js](https://github.com/goldfire/howler.js)
**特点:** 
1. 兼容性强默认支持Web Audio,IE上自动转换成HTML Audio
2. 自动捕捉用户操作激活（解禁）声音播放,不受必须监听用户操作限制
3. 支持的格式多,常用类型文件都支持

## 富文本编辑器
### 1.wangEditor

![demo-pic.png](https://image.lookenghua.cn/article/2022-03-16/14/1647412632060-1670.png)
**首页地址:**[https://www.wangeditor.com/](https://www.wangeditor.com/)
**使用平台:**兼容主流 PC 浏览器，IE11+,不支持ipad和移动端
**demo:**[https://codepen.io/xiaokyo-the-bold/pen/ZEpWByR](https://codepen.io/xiaokyo-the-bold/pen/ZEpWByR)



常用JS开发库-原生篇

## 1.GitToolBox
可以在每一行查看上次提交的信息,提交人,可以根据左侧的颜色,了解本次操作是修改,删除还是新增

![Snipaste_2022-03-16_09-56-24.png](https://image.lookenghua.cn/article/2022-03-16/10/1647396906878-ef61.png)

![Snipaste_2022-03-16_09-56-42.png](https://image.lookenghua.cn/article/2022-03-16/10/1647396940279-49a2.png)

## 2.Rainbow Brackets(彩虹括号)
让一对的括号显示成一种颜色,不同对的快显示成不同的颜色,方便用户区分。
![1825757-20191202154819892-2080431276.png](https://image.lookenghua.cn/article/2022-03-16/10/1647397230017-9c107.png)

## 3.CodeGlance2(代码缩略图)
原本有一个叫CodeGlance的插件,貌似作者不维护了,新版本无法使用。右侧缩略图可以快速滑动到对应位置。

![Snipaste_2022-03-16_10-34-47.png](https://image.lookenghua.cn/article/2022-03-16/10/1647398121929-1e20.png)

## 4.Grep console
自定义日志颜色，idea控制台可以彩色显示各种级别的log，安装完成后，在console中右键就能打开。

![screenshot_17407.png](https://image.lookenghua.cn/article/2022-03-16/10/1647398665528-ca4d.png)

![screenshot_16117.gif](http://image.lookenghua.cn/article/2022-03-16/10/1647399238428-3c5b.gif)


IDEA系列常用插件:适用于IDEA、Webstorm、Goland、Pycharm、Phpstorm

sitemap简单来说就是网站地图,通过可视化的形式,展示网站的主要结构,目的是方便搜索引擎以及用户更快的找到你的页面。不同框架有不同的生成方法,下面介绍nextjs框架的:
### 安装next-sitemap
```bash
yarn add next-sitemap -D
```
### 创建配置文件next-sitemap.js
```javascript
/** @type {import('next-sitemap').IConfig} */

module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}
```
### 添加指令
```json
{
  "build": "next build",
  "postbuild": "next-sitemap"
}
```
这样构建的时候就会自动生成sitemap。但是可能其中有一些路由不需要生产sitemap，这时候在`next-sitemap.js`里配置`exclude`,配置那些页面文件路径,生成的时候就不会存在那些页面地址了。
sitemap适合于任何的搜索引擎,但是如果等待搜索引擎的蜘蛛去爬取,可能需要很长时间,所以我们需要手动提交到那些搜索引擎网站,让他们主动收录。下面列举几个常用的搜索引擎:
## 增加百度收录
百度收录的网站是[https://ziyuan.baidu.com](https://ziyuan.baidu.com) 。点击右上角搜索服务，然后点击普通收录，进入后会出现新增网站的链接，添加相关信息以后，即可以正常操作。

![Snipaste_2022-03-14_15-14-48.png](https://image.lookenghua.cn/article/2022-03-14/15/1647242117353-93ae.png)
在普通收录下面有三种提交方式，API提交、sitemap、还有手动提交。百度的sitemap和一般网站的sitemap要求不一样，详情可见 [https://ziyuan.baidu.com/college/courseinfo?id=267&page=3#h2_article_title0](https://ziyuan.baidu.com/college/courseinfo?id=267&page=3#h2_article_title0)。

## Google收录
google的收录配置网站是 [https://search.google.com/search-console/about](https://search.google.com/search-console/about)。

![微信截图_20220314152825.png](https://image.lookenghua.cn/article/2022-03-14/15/1647242925644-5779.png)
选择任意一种方式验证,验证完成进入控制台,点击左侧网址检查,打开页面后选择请求编入索引。


![微信图片_20220314162106.png](https://image.lookenghua.cn/article/2022-03-14/16/1647246086383-9e81.png)
接着点击左侧站点地图,在页面里添加站点地图

![微信截图_20220314162235.png](https://image.lookenghua.cn/article/2022-03-14/16/1647246305949-dffe.png)
此时google就会根据地址一级一级的缓存网站地图。

## 检验是否收录
在搜索引擎的搜索框里使用`site:域名`,来确认搜索引擎是否收录。
## 常用搜索引擎收录平台
1. Bing - [https://www.bing.com/webmasters/about?cc=www](https://www.bing.com/webmasters/about?cc=www) (支持从google收录平台导入数据)
2. 360站长平台 - [https://zhanzhang.so.com/](https://zhanzhang.so.com/)



SEO优化-Sitemap

上一张我们利用husky进行提交之前的一些脚本操作,但是我们对于commit message并没有做限制,如果提交的commit message不规范的话,很容易无法清晰明了的指导某次提交的目的。所以我们需要利用一些工具来校验和自动化填写大部分消息规范。
首先我们先来了解一下commit message的规范:
## 1.commit message format(信息域)
commit message一般分为三个部分Header，Body 和 Footer
```bash
<type>(<scope>): <subject>
// 空一行
<body>
// 空一行
<footer>
其中，Header 是必需的，Body 和 Footer 可以省略

Example:
PS D:\git\pythonPractice> git log
commit 58a7a966acb9aa2fffc0e02c9ce3be64b8949991 (HEAD -> master)
Author: Zhiwei Tian <hebeitianzhiwei@outlook.com>
Date:   Fri Aug 17 17:38:36 2018 +0800

    feat(serve): add grpc server
```
### 1.1 HEAD
#### 1.1.1 type
`type`用于说明`commit`的类别,正常我们使用下面这几种
```bash
feat：新功能（feature）
fix：修补bug
docs：文档（documentation）
style： 格式（不影响代码运行的变动）
refactor：重构（即不是新增功能，也不是修改bug的代码变动）
test：增加测试
chore：构建过程或辅助工具的变动
```
#### 1.1.2 scope
`scope`用于说明 commit 影响的范围，比如数据层、控制层、视图层等等，视项目不同而不同。
#### 1.1.3 subject
`subject`是 commit 目的的简短描述，不超过50个字符。
### 1.2 Body
`Body`部分是对本次 commit 的详细描述，可以分成多行。下面是一个范例。
```
More detailed explanatory text, if necessary.  Wrap it to 
about 72 characters or so. 

Further paragraphs come after blank lines.

- Bullet points are okay, too
- Use a hanging indent
```
### 1.3 Footer
Footer 部分只用于两种情况。

（1）不兼容变动

如果当前代码与上一个版本不兼容，则 Footer 部分以BREAKING CHANGE开头，后面是对变动的描述、以及变动理由和迁移方法
```
BREAKING CHANGE: isolate scope bindings definition has changed.

    To migrate the code follow the example below:

    Before:

    scope: {
      myAttr: 'attribute',
    }

    After:

    scope: {
      myAttr: '@',
    }

    The removed `inject` wasn't generaly useful for directives so there should be no code using it.
```
（2）关闭 Issue

如果当前 commit 针对某个issue，那么可以在 Footer 部分关闭这个 issue 。
```
Closes #234
```
也可以一次关闭多个 issue 。
```
Closes #123, #245, #992
```

## 2.commitlint
首先安装一下两个依赖:
```bash
npm install --save-dev @commitlint/config-conventional @commitlint/cli
```
然后在项目根目录新建一个`commitlint.config.js`,内容如下
```javascript
module.exports = {
  extends: ["@commitlint/config-conventional"],
};
```
此时提交的话,并不会校验commit message,我们需要利用`husky`在git钩子下进行验证:
```bash
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'
```
git会在commit-msg这个钩子下进行校验我们的commit message。
### 3.commitizen
这个工具可以让我们自动提示在提交时所有必需的提交字段,不需要等到commitlint校验然后拒绝此次提交。
我们使用局部安装相关依赖:
```bash
npm install --save-dev commitizen
```
这时候我们可以使用`git cz`来提交代码,这时候就回出现以下的界面:

![add-commit.png](https://image.lookenghua.cn/article/2022-03-02/19/1646222372051-7482.png)
我们可以用键盘操作,选择相关信息。但是这些功能必需执行`git cz`才行,如果我们使用`git commit`就可以跳过这些步骤,所以我们需要强制使用`git cz`指令去提交,我们利用`husky`在`prepare-commit-msg`,添加以下内容:
```bash
exec < /dev/tty && npx cz --hook || true
```
## 4.自定义commitizen
[cz-customizable](https://github.com/leoforfree/cz-customizable)可以让我们自定义自己的代码提交规范。
至此我们就完成了自己的commit message规范了。