日常开发中，一个项目常常会有多人协同开发的情况，不同的开发人员具有不同的编码风格和喜好，这些不同的风格和喜好就会增加项目的维护成本，因此每个项目或者团队需要明确统一的编码规范，目前编码规范有下面这两种：
- 编码前人为约定标准
- 通过工具实现编码lint
很显然，利用工具实现编码统一规范是最优解。接下来具体介绍几种lint工具使用方法。
准备工作：
项目仓库地址-->> 地址
创建一个新项目，我这里是用vue脚手架创建的一个vue3.0的项目。
npm init vue@latest
这个项目是练习用的，创建的时候我全部选择的是No：
初始化的项目目录长这样：
1. husky
开发的时候，往往会修改很多个文件，某个文件在编码的时候，有可能编写的代码并不符合编码规范，编码完成后，就直接提交到项目仓库中了，长此以往，这样的代码逐渐变多，就会增加项目的维护成本，那么如何避免这种情况呢？ 那就是在提交代码前，进行编码规范检查。
git提供了很多钩子（git中的钩子），较常用的有 pre-push、pre-commit ，其中 pre-commit 钩子会在 commit 前触发，pre-push 会在 push 前触发。（提示：所有钩子默认情况下是禁用的）因此，我们可以利用pre-commit 钩子在 commit 时对代码先进行 eslint 检查，如果不合格就不给 commit，不过使用 git 钩子有些麻烦。而husky这个工具，它能让我们使用 git 钩子变得更加容易。
下面是husky官方原话:
“You can use it to lint your commit messages , run tests , lint code , etc... when you commit or push. Husky supports all Git hooks.”
1.1安装
husky相关的代码在
feature/dev-husky分支上
npm i hustky -D
npx husky install
npx husky add .husky/pre-commit
执行上面命令会在项目根目录上生成一个.husky文件夹:
在pre-commit文件中自定义命令，就可以在commit前触发。
初始化的pre-commit文件内容如下:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
undefined
1.2 使用pre-commmit
在pre-commit 文件中将undefined删除改成echo "hello, world":
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
echo "hello, world"
然后执行commit操作，可以看到 hello, world是在commit之前执行的：
初步验证了huskey作用之后，我们就可以使用husky在commit之前执行其它操作了。
2. prettier
这个工具能够使输出代码保持风格一致，可以在代码保存时进行格式化与检查（检查比较少用，不过剧情需要，这里还是演示一下） 我们可以在 commit 前让 pre-commit 执行 prettier 来检查代码格式是否合格，合格了才给 commit。
2.1 安装
prettier相关的代码在
feature/dev-prettier分支上
npm i prettier -D
2.2 配置
2.2.1 创建.prettierrc文件
在项目根目录下新建.prettierrc文件, 内容如下:
2.2.2 配置package.json文件脚本命令
"scripts": {
"dev": "vite",
"prettier:check": "prettier --config .prettierrc --check "src/**/*.{js,ts,css,html,vue}""
},
2.2.3 配置pre-commit 文件中的命令
将之前的 echo "hello, world"删除，改为下面的命令
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run prettier:check
2.2.4 使用
修改src文件夹下面main.js文件，增加如下内容：
// main.js
function test() {
console.log("测试 prettier"); // 将缩进去掉, 同时使用双引号""
}
完成上面内容后，进行代码commit，此时会报下面的错误：
Checking formatting...
[warn] src/App.vue
[warn] src/main.js
...
[warn] Code style issues found in 15 files. Forgot to run Prettier?
husky - pre-commit hook exited with code 1 (error)
因此这个功能也验证成功了，在 commit 前让 pre-commit 执行 prettier 来检查代码格式是否合格，不合格不会commit成功。这一步是为了验证代码检查，那么如何自动修复呢？很简单，只需要在package.json脚本命令中 加入 --write即可，代码如下：
"prettier:check": "prettier --config .prettierrc --check "src/**/*.{js,ts,css,html,vue}" --write"
然后再执行commit操作，会发现代码虽然被格式化了，但是并没有一起commit上去，仍然处于修改状态：
这就需要再进一步配置，可以在pre-commit文件中将之前的命令改为如下:
npm run prettier:check && git add -A
关于git相关的操作，这里有一篇文章记录了日常开发中常用的git命令,想了解的可以去看一下。
修改命令后，再执行commit操作，会发现代码commit成功：
prettier 检查代码只是它的一部分，上面仅仅是配合 husky 作为演示，它更多的是用来代码保存自动格式化，怎么配置保存自动格式化网上有很多例子，这里不在讲述。
3. eslint
eslint 可以对代码进行约束规范，如果代码不符合规范则会在下面呈现一条~~~~ 红色的波浪线，相比于 prettier 的检查，eslint 更丰富更强大，因此 prettier 常用于保存自动格式化代码， 而 eslint 作为代码规范检查，两者可以结合使用。
3.1安装
此处代码在分支
feature/dev-eslint上
创建vue项目的时候，如果选择项eslint选择的是yes，就会自动集成配置好eslint, 如果想要了解更多配置，可以去官网查看。这里只是介绍下~。
npm init @eslint/config // 安装并配置
根据提示选择配置项即可，配置完成后会再根目录下生成一个.eslintrc.js文件:
根据自己项目的需要，在.eslintrc.js文件的rules中配置自己的检查规则即可，这里只做演示作用。
3.2 package.json文件中配置执行脚本
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --ignore-path .gitignore",
到这步其实eslint就已经配置完成了，可以运行命令
npm run lint来检查代码，
3.3 pre-commit 文件新增eslint命令
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run lint
执行commit操作后，可以看到下面的报错：
如果想要自修复，可以在命令后面再加一个--fix命令即可，完整命令如下：
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore --fix"
这里有一点需要注意：eslint只会修复.eslintrc.js文件中对应的rules，其它的只能手动修复。
有个小问题，提交的时候，在
.eslintrc.js文件中报错：ESLint 'module' is not defined. (no-undef)解决方法：// 将es6相关的删除即可(es2021,es6等)
"env": { "node": true, "browser": true, "commonjs": true, "amd": true },
4. lint-staged
上面的插件都需要指定文件才能进行检查，比如 eslint 命令需要指定 src/*.js ，但这样会产生新的问题，如果 src 目录存在着大量的 .js 文件，那么每次执行 eslint 时都会对所有文件检查&修复，很明显除了对性能有影响外，还会影响同事以前写过的代码格式。
有没有办法能让这些工具只检查&修复我们修改过的文件就好呢？ lint-staged 就可以做到。 lint-staged 能让这些插件只扫描暂存区的文件而不是全盘扫描。
vue-cli脚手架创建的项目，里面已经安装过了，无需我们自己安装，直接用即可。
4.1 安装
此处代码在分支
feature/dev-lint-staged上
npm i lint-staged -D
4.2 配置package.json
在 package.json 新增 lint-staged 选项
"lint-staged": {
"*.{js,jsx,vue}": [
"eslint --fix",
"git add"
]
},
4.3 pre-commit 文件新增命令
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
# 新增 lint-staged
npx lint-staged
4.4 测试lint-staged
在src文件夹下新建一个test.js文件，文件内容如下：
利用命令：git commit -m'test' -n提交到仓库中，-n表示忽略pre-commit钩子，直接提交，本次提交的是不符合编码规范的代码。
接下来修改main.js文件内容：
function test(a,b) {
console.log('测试 prettier',a,b);
}
test(1,2)
执行commit操作后，会发现代码已经被修复并且提交成功，而刚刚不符合编码规范的test.js文件中的代码并没有被修改。
总结
- husky，让我们使用
git钩子变得更加容易,方便。 - prettier，可以使输出的代码风格保持一致，在代码保存时进行格式化与检查，一般很少用来检查。
- eslint功能强大且丰富，检查的时候只会修复
.eslintrc.js文件rules中配置项，其它的需要手动去修复，它可以与prettier相互配合使用。 - lint-staged能让eslint等插件只扫描暂存区的文件而不是全盘扫描，不会影响同事以前写过的代码。
feature/dev-eslint-preitter-lint-staged这个分支上配置了eslint + preitter + lint-staged三者结合使用的列子
案例代码在github项目仓库上面,感兴趣的可以去看看。
