按照网上配置的 husky+lint-staged+prettier 为什么不生效

背景

为了维护代码的统一性，引入了 eslint prettier 等一些格式化代码的工具。
为了避免在代码提交时忘记格式化找到 husky+lint-staged 的解决方案。在网上很容易找到相关的文章，但是按照文章里的配置弄好后却不起作用。经过一番查询才知道最新版本的husky已经废弃了之前的设置方式。

介绍一下

husky@7.0.4

一个git钩子工具，能够方便的帮助我们在一些 git 事件(add、commit…)触发前后做一些事情。我们主要使用pre-commit 钩子(执行 commit 前做一些事情)

lint-staged@11.2.3

对提交的文件（处于 git staged 区的文件）进行格式化

新版配置方式

1. 安装

	yarn add husky@7.0.4 lint-staged@11.2.3 prettier -D

2. 在项目根目录创建 prettier 配置文件 .prettierrc.json
3. 在package.json中写入 lint-staged 配置

  "lint-staged": {
    "*.{js,ts,json,vue,md}": [
      "prettier --config .prettierrc.json --write"
    ]
  }

4. 配置 husky

	npx husky install
	npm set-script prepare "husky install"
	npx husky add .husky/pre-commit "npx lint-staged"
	git add .husky/pre-commit

总结

我们在使用一个新的技术时，往往会直接找博客，找案例，但是这是有风险的，因为我们不能保证每个人的环境、包版本等是相同的，这会引起我们一些未知的错误，所以还是要看官方文档。