一. 基本概念

1. 什么是husky：操作git hook的工具，主要實(shí)現(xiàn)代碼提交前 eslint 校驗(yàn)和 commit 信息的規(guī)范校驗(yàn),也可以避免多人合作時(shí)代碼格式化不統(tǒng)一造成的沖突

2. 什么是git hook：通常分為客戶端鉤子和服務(wù)端鉤子，這里主要介紹客戶端鉤子。

   • pre-commit：該鉤子在鍵入提交信息前運(yùn)行。 它用于檢查即將提交的快照。如果該鉤子以非零值退出，Git 將放棄此次提交，你可以利用該鉤子，在提交之前來(lái)檢查代碼風(fēng)格是否一致。
   • prepare-commit-msg：該鉤子在啟動(dòng)提交信息編輯器之前，默認(rèn)信息被創(chuàng)建之后運(yùn)行。 它允許你編輯提交者所看到的默認(rèn)信息。
   • commit-msg：該鉤子接收一個(gè)參數(shù)，此參數(shù)存有當(dāng)前提交信息的臨時(shí)文件的路徑。 如果該鉤子腳本以非零值退出，Git 將放棄提交，因此，可以用來(lái)在提交通過(guò)前驗(yàn)證項(xiàng)目狀態(tài)或提交信息。
   • post-commit：該鉤子一般用于通知之類(lèi)的事情。

3. 什么是Lint-staged： 可以在git staged階段的文件上執(zhí)行Linters。也就是只對(duì)git add之后的暫存區(qū)代碼進(jìn)行校驗(yàn)?？梢酝ㄟ^(guò)配置文件來(lái)指定對(duì)不同的文件執(zhí)行不同的檢驗(yàn)。

4. 什么是Commitlint：主要是對(duì)提交信息Commit Message的檢查。是一款檢查工具和husky一起配合使用。只有當(dāng)提交信息符合規(guī)則的時(shí)候，才能夠提交。

二. 代碼格式化工具（Prettier）

1、下載 prettier 相關(guān)依賴(lài)

npm install prettier -D

2、安裝 Vscode 插件（Prettier）

3、配置 Prettier（.prettierrc.js)（以下配置規(guī)則不是固定的，可以根據(jù)具體需求具體配置）

// @see: https://www.prettier.cn

module.exports = {
	// 超過(guò)最大值換行
	printWidth: 130,
	// 縮進(jìn)字節(jié)數(shù)
	tabWidth: 2,
	// 使用制表符而不是空格縮進(jìn)行
	useTabs: true,
	// 結(jié)尾不用分號(hào)(true有，false沒(méi)有)
	semi: false,
	// 使用單引號(hào)(true單引號(hào)，false雙引號(hào))
	singleQuote: true,
	// 更改引用對(duì)象屬性的時(shí)間 可選值"<as-needed|consistent|preserve>"
	quoteProps: "as-needed",
	// 在對(duì)象，數(shù)組括號(hào)與文字之間加空格 "{ foo: bar }"
	bracketSpacing: true,
	// 多行時(shí)盡可能打印尾隨逗號(hào)。（例如，單行數(shù)組永遠(yuǎn)不會(huì)出現(xiàn)逗號(hào)結(jié)尾。） 可選值"<none|es5|all>"，默認(rèn)none
	trailingComma: "none",
	// 在JSX中使用單引號(hào)而不是雙引號(hào)
	jsxSingleQuote: true,
	//  (x) => {} 箭頭函數(shù)參數(shù)只有一個(gè)時(shí)是否要有小括號(hào)。avoid：省略括號(hào) ,always：不省略括號(hào)
	arrowParens: "avoid",
	// 如果文件頂部已經(jīng)有一個(gè) doclock，這個(gè)選項(xiàng)將新建一行注釋?zhuān)⒋蛏螥format標(biāo)記。
	insertPragma: false,
	// 指定要使用的解析器，不需要寫(xiě)文件開(kāi)頭的 @prettier
	requirePragma: false,
	// 默認(rèn)值。因?yàn)槭褂昧艘恍┱坌忻舾行偷匿秩酒鳎ㄈ鏕itHub comment）而按照markdown文本樣式進(jìn)行折行
	proseWrap: "preserve",
	// 在html中空格是否是敏感的 "css" - 遵守CSS顯示屬性的默認(rèn)值， "strict" - 空格被認(rèn)為是敏感的 ，"ignore" - 空格被認(rèn)為是不敏感的
	htmlWhitespaceSensitivity: "css",
	// 換行符使用 lf 結(jié)尾是 可選值"<auto|lf|crlf|cr>"
	endOfLine: "auto",
	// 這兩個(gè)選項(xiàng)可用于格式化以給定字符偏移量（分別包括和不包括）開(kāi)始和結(jié)束的代碼
	rangeStart: 0,
	rangeEnd: Infinity,
	// Vue文件腳本和樣式標(biāo)簽縮進(jìn)
	vueIndentScriptAndStyle: false,
};

三. 代碼規(guī)范工具（ESLint）

1、下載 ESLint 相關(guān)依賴(lài)：（可根據(jù)具體需求下載依賴(lài)）

npm install eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

2、安裝 Vscode 插件（ESLint）：

3、配置 ESLint（.eslintrc.js）（可根據(jù)具體需求配置文件）

// @see: http://eslint.cn

module.exports = {
	root: true,
	env: {
		browser: true,
		node: true,
		es6: true,
	},
	/* 指定如何解析語(yǔ)法 */
	parser: "vue-eslint-parser",
	/* 優(yōu)先級(jí)低于 parse 的語(yǔ)法解析配置 */
	parserOptions: {
		parser: "@typescript-eslint/parser",
		ecmaVersion: 2020,
		sourceType: "module",
		jsxPragma: "React",
		ecmaFeatures: {
			jsx: true,
		},
	},
	/* 繼承某些已有的規(guī)則 */
	extends: [
		"plugin:vue/vue3-recommended",
		"plugin:@typescript-eslint/recommended",
		"prettier",
		"plugin:prettier/recommended",
	],
	/*
	 * "off" 或 0    ==>  關(guān)閉規(guī)則
	 * "warn" 或 1   ==>  打開(kāi)的規(guī)則作為警告（不影響代碼執(zhí)行）
	 * "error" 或 2  ==>  規(guī)則作為一個(gè)錯(cuò)誤（代碼不能執(zhí)行，界面報(bào)錯(cuò)）
	 */
	rules: {
		// eslint (http://eslint.cn/docs/rules)
		"no-var": "error", // 要求使用 let 或 const 而不是 var
		"no-multiple-empty-lines": ["error", { max: 1 }], // 不允許多個(gè)空行
		"no-use-before-define": "off", // 禁止在 函數(shù)/類(lèi)/變量 定義之前使用它們
		"prefer-const": "off", // 此規(guī)則旨在標(biāo)記使用 let 關(guān)鍵字聲明但在初始分配后從未重新分配的變量，要求使用 const
		"no-irregular-whitespace": "off", // 禁止不規(guī)則的空白

		// typeScript (https://typescript-eslint.io/rules)
		"@typescript-eslint/no-unused-vars": "error", // 禁止定義未使用的變量
		"@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore
		"@typescript-eslint/no-inferrable-types": "off", // 可以輕松推斷的顯式類(lèi)型可能會(huì)增加不必要的冗長(zhǎng)
		"@typescript-eslint/no-namespace": "off", // 禁止使用自定義 TypeScript 模塊和命名空間。
		"@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 類(lèi)型
		"@typescript-eslint/ban-types": "off", // 禁止使用特定類(lèi)型
		"@typescript-eslint/explicit-function-return-type": "off", // 不允許對(duì)初始化為數(shù)字、字符串或布爾值的變量或參數(shù)進(jìn)行顯式類(lèi)型聲明
		"@typescript-eslint/no-var-requires": "off", // 不允許在 import 語(yǔ)句中使用 require 語(yǔ)句
		"@typescript-eslint/no-empty-function": "off", // 禁止空函數(shù)
		"@typescript-eslint/no-use-before-define": "off", // 禁止在變量定義之前使用它們
		"@typescript-eslint/ban-ts-comment": "off", // 禁止 @ts-<directive> 使用注釋或要求在指令后進(jìn)行描述
		"@typescript-eslint/no-non-null-assertion": "off", // 不允許使用后綴運(yùn)算符的非空斷言(!)
		"@typescript-eslint/explicit-module-boundary-types": "off", // 要求導(dǎo)出函數(shù)和類(lèi)的公共類(lèi)方法的顯式返回和參數(shù)類(lèi)型

		// vue (https://eslint.vuejs.org/rules)
		"vue/no-v-html": "off", // 禁止使用 v-html
		"vue/script-setup-uses-vars": "error", // 防止<script setup>使用的變量<template>被標(biāo)記為未使用，此規(guī)則僅在啟用該no-unused-vars規(guī)則時(shí)有效。
		"vue/v-slot-style": "error", // 強(qiáng)制執(zhí)行 v-slot 指令樣式
		"vue/no-mutating-props": "off", // 不允許組件 prop的改變
		"vue/custom-event-name-casing": "off", // 為自定義事件名稱(chēng)強(qiáng)制使用特定大小寫(xiě)
		"vue/attributes-order": "off", // vue api使用順序，強(qiáng)制執(zhí)行屬性順序
		"vue/one-component-per-file": "off", // 強(qiáng)制每個(gè)組件都應(yīng)該在自己的文件中
		"vue/html-closing-bracket-newline": "off", // 在標(biāo)簽的右括號(hào)之前要求或禁止換行
		"vue/max-attributes-per-line": "off", // 強(qiáng)制每行的最大屬性數(shù)
		"vue/multiline-html-element-content-newline": "off", // 在多行元素的內(nèi)容之前和之后需要換行符
		"vue/singleline-html-element-content-newline": "off", // 在單行元素的內(nèi)容之前和之后需要換行符
		"vue/attribute-hyphenation": "off", // 對(duì)模板中的自定義組件強(qiáng)制執(zhí)行屬性命名樣式
		"vue/require-default-prop": "off", // 此規(guī)則要求為每個(gè) prop 為必填時(shí)，必須提供默認(rèn)值
		"vue/multi-word-component-names": "off", // 要求組件名稱(chēng)始終為 “-” 鏈接的單詞
	},
};

四. 樣式規(guī)范工具（StyleLint）

1、下載 StyleLint 相關(guān)依賴(lài)：（可根據(jù)具體需求下載依賴(lài)）

npm i stylelint stylelint-config-html stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss stylelint-config-recess-order postcss postcss-html stylelint-config-prettier -D

2、安裝 Vscode 插件（StyleLint）：

3、在目錄的 .vscode 文件夾下新建 settings.json：

{
	"editor.formatOnSave": true,
	"stylelint.enable": true,
	"editor.codeActionsOnSave": {
		"source.fixAll.stylelint": true
	},
	"stylelint.validate": [
		"css",
		"less",
		"postcss",
		"scss",
		"vue",
		"sass",
		"html"
	],
	"files.eol": "\n"
}

4、配置 StyleLint（.stylelintrc.js）：（可根據(jù)具體需求具體配置）

// @see: https://stylelint.io

module.exports = {
	/* 繼承某些已有的規(guī)則 */
	extends: [
		"stylelint-config-standard", // 配置stylelint拓展插件
		"stylelint-config-html/vue", // 配置 vue 中 template 樣式格式化
		"stylelint-config-standard-scss", // 配置stylelint scss插件
		"stylelint-config-recommended-vue/scss", // 配置 vue 中 scss 樣式格式化
		"stylelint-config-recess-order", // 配置stylelint css屬性書(shū)寫(xiě)順序插件,
		"stylelint-config-prettier", // 配置stylelint和prettier兼容
	],
	overrides: [
		// 掃描 .vue/html 文件中的<style>標(biāo)簽內(nèi)的樣式
		{
			files: ["**/*.{vue,html}"],
			customSyntax: "postcss-html",
		},
	],
	/**
	 * null  => 關(guān)閉該規(guī)則
	 */
	rules: {
		"value-keyword-case": null, // 在 css 中使用 v-bind，不報(bào)錯(cuò)
		"no-descending-specificity": null, // 禁止在具有較高優(yōu)先級(jí)的選擇器后出現(xiàn)被其覆蓋的較低優(yōu)先級(jí)的選擇器
		"function-url-quotes": "always", // 要求或禁止 URL 的引號(hào) "always(必須加上引號(hào))"|"never(沒(méi)有引號(hào))"
		"string-quotes": "double", // 指定字符串使用單引號(hào)或雙引號(hào)
		"unit-case": null, // 指定單位的大小寫(xiě) "lower(全小寫(xiě))"|"upper(全大寫(xiě))"
		"color-hex-case": "lower", // 指定 16 進(jìn)制顏色的大小寫(xiě) "lower(全小寫(xiě))"|"upper(全大寫(xiě))"
		"color-hex-length": "long", // 指定 16 進(jìn)制顏色的簡(jiǎn)寫(xiě)或擴(kuò)寫(xiě) "short(16進(jìn)制簡(jiǎn)寫(xiě))"|"long(16進(jìn)制擴(kuò)寫(xiě))"
		"rule-empty-line-before": "never", // 要求或禁止在規(guī)則之前的空行 "always(規(guī)則之前必須始終有一個(gè)空行)"|"never(規(guī)則前絕不能有空行)"|"always-multi-line(多行規(guī)則之前必須始終有一個(gè)空行)"|"never-multi-line(多行規(guī)則之前絕不能有空行。)"
		"font-family-no-missing-generic-family-keyword": null, // 禁止在字體族名稱(chēng)列表中缺少通用字體族關(guān)鍵字
		"block-opening-brace-space-before": "always", // 要求在塊的開(kāi)大括號(hào)之前必須有一個(gè)空格或不能有空白符 "always(大括號(hào)前必須始終有一個(gè)空格)"|"never(左大括號(hào)之前絕不能有空格)"|"always-single-line(在單行塊中的左大括號(hào)之前必須始終有一個(gè)空格)"|"never-single-line(在單行塊中的左大括號(hào)之前絕不能有空格)"|"always-multi-line(在多行塊中，左大括號(hào)之前必須始終有一個(gè)空格)"|"never-multi-line(多行塊中的左大括號(hào)之前絕不能有空格)"
		"property-no-unknown": null, // 禁止未知的屬性(true 為不允許)
		"no-empty-source": null, // 禁止空源碼
		"declaration-block-trailing-semicolon": null, // 要求或不允許在聲明塊中使用尾隨分號(hào) string："always(必須始終有一個(gè)尾隨分號(hào))"|"never(不得有尾隨分號(hào))"
		"selector-class-pattern": null, // 強(qiáng)制選擇器類(lèi)名的格式
		"scss/at-import-partial-extension": null, // 解決不能引入scss文件
		"value-no-vendor-prefix": null, // 關(guān)閉 vendor-prefix(為了解決多行省略 -webkit-box)
		"selector-pseudo-class-no-unknown": [
			true,
			{
				ignorePseudoClasses: ["global", "v-deep", "deep"],
			},
		],
	},
};

五. EditorConfig 配置

1、簡(jiǎn)介：EditorConfig 幫助開(kāi)發(fā)人員在不同的編輯器 和 IDE 之間定義和維護(hù)一致的編碼樣式。
2、安裝 VsCode 插件（EditorConfig ）：

3、配置 EditorConfig（.editorconfig）：

# http://editorconfig.org
root = true

[*] # 表示所有文件適用
charset = utf-8 # 設(shè)置文件字符集為 utf-8
end_of_line = lf # 控制換行類(lèi)型(lf | cr | crlf)
insert_final_newline = true # 始終在文件末尾插入一個(gè)新行
indent_style = tab # 縮進(jìn)風(fēng)格（tab | space）
indent_size = 2 # 縮進(jìn)大小
max_line_length = 130 # 最大行長(zhǎng)度

[*.md] # 表示僅 md 文件適用以下規(guī)則
max_line_length = off # 關(guān)閉最大行長(zhǎng)度限制
trim_trailing_whitespace = false # 關(guān)閉末尾空格修剪

六. Git 規(guī)范流程

1、husky（操作 git 鉤子的工具）：

• 安裝 ：

npm install husky -D

• 使用（添加husky文件夾）

// 1、打開(kāi)package.json文件，在scripts中添加
  "prepare": "husky install"
// 2、添加完成之后，執(zhí)行如下命令
   npm set-script prepare "husky install"
   npm run prepare  // 在這之后會(huì)生成一個(gè)husky文件夾

2、 lint-staged（本地暫存代碼檢查工具）

• 安裝：

npm install lint-staged -D

• 添加 ESlint Hook（在.husky 文件夾下添加 pre-commit 文件）：
• 作用：通過(guò)鉤子函數(shù)，判斷提交的代碼是否符合規(guī)范，并使用 prettier 格式化代碼
• 執(zhí)行以下命令，在husky文件夾下自動(dòng)生成pre-commit文件：

npx husky add .husky/pre-commit "npm run lint:lint-staged"

• 新增lint-staged.config.js 文件：（根據(jù)具體需求具體配置）

module.exports = {
	"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
	"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"],
	"package.json": ["prettier --write"],
	"*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
	"*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
	"*.md": ["prettier --write"]
};

3、commitlint（commit 信息校驗(yàn)工具，不符合則報(bào)錯(cuò)）

• 安裝：

npm i @commitlint/cli @commitlint/config-conventional -D

• 添加ESlink Hook（在.husky 文件夾下添加 commit-msg 文件）
• 作用：通過(guò)鉤子函數(shù)，判斷提交的信息是否符合規(guī)范，不規(guī)范就不讓提交
• 執(zhí)行以下命令，在husky文件夾下自動(dòng)生成 commit-msg文件：

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

4、commitizen（基于 Node.js 的 git commit 命令行工具，生成標(biāo)準(zhǔn)化的 message）

// 安裝 commitizen，如此一來(lái)可以快速使用 cz 或 git cz 命令進(jìn)行啟動(dòng)。
npm install commitizen -D

5、cz-git：

• 簡(jiǎn)介：指定提交文字規(guī)范，一款工程性更強(qiáng)，高度自定義，標(biāo)準(zhǔn)輸出格式的 commitizen 適配器。

npm install cz-git -D

• 配置 package.json：

"config": {
  "commitizen": {
    "path": "node_modules/cz-git"
  }
}

• 新建 commitlint.config.js 文件：（對(duì)提交信息做格式檢驗(yàn)的）

// @see: https://cz-git.qbenben.com/zh/guide
/** @type {import('cz-git').UserConfig} */

module.exports = {
	ignores: [commit => commit === "init"],
	extends: ["@commitlint/config-conventional"],
	rules: {
		// @see: https://commitlint.js.org/#/reference-rules
		"body-leading-blank": [2, "always"],
		"footer-leading-blank": [1, "always"],
		"header-max-length": [2, "always", 108],
		"subject-empty": [2, "never"],
		"type-empty": [2, "never"],
		"subject-case": [0],
		"type-enum": [
			2,
			"always",
			[
				"feat",
				"fix",
				"docs",
				"style",
				"refactor",
				"perf",
				"test",
				"build",
				"ci",
				"chore",
				"revert",
				"wip",
				"workflow",
				"types",
				"release"
			]
		]
	},
	prompt: {
		messages: {
			type: "選擇你要提交的類(lèi)型 :",
			scope: "選擇一個(gè)提交范圍（可選）:",
			customScope: "請(qǐng)輸入自定義的提交范圍 :",
			subject: "填寫(xiě)簡(jiǎn)短精煉的變更描述 :\n",
			body: '填寫(xiě)更加詳細(xì)的變更描述（可選）。使用 "|" 換行 :\n',
			breaking: '列舉非兼容性重大的變更（可選）。使用 "|" 換行 :\n',
			footerPrefixsSelect: "選擇關(guān)聯(lián)issue前綴（可選）:",
			customFooterPrefixs: "輸入自定義issue前綴 :",
			footer: "列舉關(guān)聯(lián)issue (可選) 例如: #31, #I3244 :\n",
			confirmCommit: "是否提交或修改commit ?"
		},
		types: [
			{ value: "feat: 特性", name: "特性:   ??  新增功能", emoji: "??" },
			{ value: "fix: 修復(fù)", name: "修復(fù):   ??  修復(fù)缺陷", emoji: "??" },
			{ value: "docs: 文檔", name: "文檔:   ??  文檔變更", emoji: "??" },
			{ value: "style: 格式", name: "格式:   ??  代碼格式（不影響功能，例如空格、分號(hào)等格式修正）", emoji: "??" },
			{ value: "refactor: 重構(gòu)", name: "重構(gòu):   ??  代碼重構(gòu)（不包括 bug 修復(fù)、功能新增）", emoji: "??" },
			{ value: "perf: 性能", name: "性能:   ??  性能優(yōu)化", emoji: "??" },
			{ value: "test: 測(cè)試", name: "測(cè)試:   ?  添加疏漏測(cè)試或已有測(cè)試改動(dòng)", emoji: "?" },
			{ value: "chore: 構(gòu)建", name: "構(gòu)建:   ???  構(gòu)建流程、外部依賴(lài)變更（如升級(jí) npm 包、修改 webpack 配置等）", emoji: "???" },
			{ value: "ci: 集成", name: "集成:   ??  修改 CI 配置、腳本", emoji: "??" },
			{ value: "revert: 回退", name: "回退:   ??  回滾 commit", emoji: "??" },
			{ value: "build: 打包", name: "打包:   ??  項(xiàng)目打包發(fā)布", emoji: "??" }
		],
		useEmoji: true,
		themeColorCode: "",
		scopes: [],
		allowCustomScopes: true,
		allowEmptyScopes: true,
		customScopesAlign: "bottom",
		customScopesAlias: "custom",
		emptyScopesAlias: "empty",
		upperCaseSubject: false,
		allowBreakingChanges: ["feat", "fix"],
		breaklineNumber: 100,
		breaklineChar: "|",
		skipQuestions: [],
		issuePrefixs: [{ value: "closed", name: "closed:   ISSUES has been processed" }],
		customIssuePrefixsAlign: "top",
		emptyIssuePrefixsAlias: "skip",
		customIssuePrefixsAlias: "custom",
		allowCustomIssuePrefixs: true,
		allowEmptyIssuePrefixs: true,
		confirmColorize: true,
		maxHeaderLength: Infinity,
		maxSubjectLength: Infinity,
		minSubjectLength: 0,
		scopeOverrides: undefined,
		defaultBody: "",
		defaultIssues: "",
		defaultScope: "",
		defaultSubject: ""
	}
};

6、Commit Message 的標(biāo)準(zhǔn)格式

• 說(shuō)明：Commit Message 標(biāo)準(zhǔn)格式包括三個(gè)部分：Header，Body，F(xiàn)ooter。其中Header是必需項(xiàng)，Body和Footer可以省略。

Header：<type>(<scope>): <subject>
// 空一行
<body>
// 空一行
<footer>

• type：提交類(lèi)型，常用類(lèi)型可以分為以下幾種。

七. 配置 package.json 命令

{
	"scripts": {
		// 以下為必配置
		"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
		"lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
		"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
		"lint:lint-staged": "lint-staged",
		"prepare": "husky install",
		"release": "standard-version",
		"commit": "git status && git add -A && git-cz"
	}
}

八. 配置完成，提交代碼

npm run commit 
等價(jià)于： git status -> git add . -> git -cz

如圖所示：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-501309.html

1. 選擇提交類(lèi)型type：必選
   
2. 選擇一個(gè)提交范圍scope（可選）：用于說(shuō)明影響的范圍，比如數(shù)據(jù)層、控制層、視圖層等等。
   
3. 填寫(xiě)簡(jiǎn)短精煉的變更描述subject： 必填
   
4. 添加更加詳細(xì)的變更描述body (可選)：對(duì) subject 的補(bǔ)充。可以多行用 “|” 換行，
   
5. 主要是一些關(guān)聯(lián) issue 的操作footer：可選
   
6. 最后確認(rèn)提交，此時(shí)開(kāi)始執(zhí)行husky代碼校驗(yàn)，如果校驗(yàn)成功則本次提交成功，否則本次提交失敗。
7. 提交成功之后就可以git push推送代碼了，在遠(yuǎn)端git 倉(cāng)庫(kù)可以看見(jiàn)剛剛推送的結(jié)果，說(shuō)明此次提交流程順利完成。
   
8. 說(shuō)明：如果遇到上述依賴(lài)安裝失敗可能是node或npm版本過(guò)低，檢查并升級(jí)版本再重復(fù)操作一下即可。建議node版本16.x，npm版本8.x。

到了這里，關(guān)于詳細(xì)說(shuō)明使用husky規(guī)范前端項(xiàng)目搭建的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！