代码规范 & 详细解释 husky、prettier、eslint、lint-staged 的作用和使用

准备工作

1. 使用 vscode 新建一个项目（比如叫 my-project）
2. 初始化 git 仓库（git init)
3. 初始化 package.json ( npm init -y)
4. 新建 src/main.js

项目结构如图

.git 目录没有出现在 vscode 编辑器中是正常的。

1. husky

在介绍 husky 之前，首先要理解什么是 hook（钩子），在前端 Vue 框架中提供了 beforCreated、created、beforeMounted、mounted 等函数、这些函数都是钩子，也常被称为‘生命周期钩子函数’，它们会在 Vue 实例化过程中有序地执行。

在 Git 中也存在一些钩子，其中较常用的有 pre-push、pre-commit ，其中 pre-commit 钩子会在 commit 前触发，pre-push 会在 push 前触发。（提示：所有钩子默认情况下是禁用的）

这些钩子可以用来干嘛？

比方我们可以利用pre-commit 钩子在 commit 时对代码先进行 eslint 检查，如果不合格就不给 commit，
不过使用 git 钩子稍微麻烦，于是就有了 husky ，它能让我们使用 git 钩子变得更加容易。

小插曲：关于“钩子”于”中间件“有什么区别，本人觉得没有区别，我甚至觉得钩子就是中间件，
因为无论是从作用、概念、实现上都能够作出合理的解释，如果你有更好的说法欢迎提出。

1.1 安装

npm i husky -D
npx husky install
npx husky add .husky/pre-commit

以上命令将会下载初始化 husky 并新增 pre-commit 钩子文件

下面只需在 pre-commit 文件自定义命令，即可在 commit 前触发，就这样，是不是很简单？

1.2 使用

pre-commit 内容如下

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

echo "Hello,world"

下面 commit 时将会提前输出 ‘Hello,world’，如图

可以在根目录新增 .gitignore 文件让 git 忽略掉不需要提交的文件，避免影响学习测试。

2. prettier

prettier 工具可以在代码保存时进行格式化与检查（检查比较少用，不过剧情需要，这里还是演示一下）
我们可以在 commit 前让 pre-commit 执行 prettier 来检查代码格式是否合格，合格了才给 commit。

2.1 安装

npm i prettier -D

2.2 配置

2.2.1 在项目根目录新建 .prettierrc 配置文件，内容如下：

{
   
    "tabWidth": 4, // 保存时为 4 个空格并以 tab 格式
    "singleQuote": true, // 保存时为单引号
}

关于 .prettierrc 更多配置可参考官方文档，这里仅作为演示。

2.2.2 在 pakcage.json 新增脚本命令

"scripts": {
   
	...
    "prettier:check": "prettier --config .prettierrc --check \"src/**/*.{js,ts,css,html}\"",
 	...