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

husky

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

安装

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

使用

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

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

这些钩子可以用来干嘛？

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

prettier

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

安装

npm i prettier -D

配置

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

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

在 pakcage.json 新增脚本命令

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

eslint

eslint 可以对代码进行约束规范，如果代码不符合规范则会在下面呈现一条~~~~ 红色的波浪线， 相比于 prettier 的检查，eslint 更丰富更强大，因此 prettier 常用于保存自动格式化代码， 而 eslint 作为代码规范检查，两者可以结合使用。

安装

npm i eslint -D

在根目录新建 .eslintrc.js 配置文件，内容如下

// eslint-disable-next-line no-undef
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
    }
}

lint-staged

上面的插件都需要指定文件才能进行检查，比如 eslint 命令需要指定 src/*.js ，但这样会产生新的问题，如果 src 目录存在着大量的 .js 文件，那么每次执行 eslint 时都会对所有文件检查&修复，很明显除了对性能有影响外，还会影响同事以前写过的代码格式。

有没有办法能让这些工具只检查&修复我们修改过的文件就好呢？ lint-staged 就可以做到。 lint-staged 能让这些插件只扫描暂存区的文件而不是全盘扫描，很明显，这就是我们想要的工具。

安装

npm i lint-staged -D

配置

在 package.json 新增 lint-staged 选项

  "scripts": {
    ...
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "eslint --fix"
    ]
  },

执行命令 pre-commit