开发前端项目时，经常会使用一些前端工具来帮助规范代码，eslint和 prettier就是两个非常好用的工具，两个一起用时可以让 eslint 负责检查代码，prettier负责格式化代码。 其次，git commit 时，也希望 commit message 能好看些，以及规范些，更希望能在 commit 之前通过 eslint检查并用 prettier格式化代码，来防止 commit的代码不合规范，导致后期维护困难。那么如何初始化一个这样的项目呢？阅读本篇文章，将带你实战了解整个过程。

项目初始化

首先新建一个文件夹 Test(改成项目名称)，用作项目根目录。然后在VSCode中打开这个文件夹。

在Vscode的终端中输入，将当前目录初始化为一个git仓库

小芝士点：

1. git checkout -b main和git switch -c main都可以切换到main分支
   
2. 主分支可以是main也可以是master，不过为了工程化项目，后期可能还会使用git flow工具来规范git仓库提交，所以推荐使用main作为主分支。

git init
git checkout -b main

接下来我们输入pnpm init，来初始化Node.js项目，当然也可以使用其他包管理器，比如npm和yarn，pnpm比较省空间且高效，所以我用他。具体可以上知乎搜索三者的区别

pnpm yarn npm - 搜索结果 - 知乎 (zhihu.com)

pnpm init

然后对package.json的内容稍作修改

接着我们要开始安装husky，eslint，prettier这三个工具了。

工具安装

husky

首先是hsuky的简单介绍，以及为什么推荐用他的小理由

这是官方的readme

Modern native Git hooks made easy

Husky improves your commits and more 🐶 woof!

平时使用的git工具为我们提供了一系列hook接口，方便我们拦截并更改git提交时的一些操作，但修改git hook是一件麻烦的事儿，所以出现了这个git hooks的管理工具

废话不说，根据readme可知我们只需三句指令就能安装他

pnpm install husky -D
pnpm pkg set scripts.prepare="husky install"
pnpm run prepare

这样我们就安装好了，我们等eslint和prettier都装好时在回过来一起配置他。

eslint & prettier

这两货放一起时会冲突，每次都需要单独配置，不过好在逛github的时候发现有人已经写了个配置脚本，能一键初始化配置，真方便。

leggsimon/create-prettier-eslint: Generates eslint and prettier config files for you (github.com)

我们输入pnpx create-prettier-eslint跟着命令行回答个人风格快速配置一个eslint和prettier同时集成的项目

报错了？没关系，毕竟是个19年的项目，Node底层有api变动也是正常的，至少配置文件已经帮我们自动生成了，观察报错发现脚本想要自动安装以下依赖。

eslint
prettier
eslint-config-prettier
eslint-plugin-prettier
eslint-plugin-react

我们输入指令手动安装依赖。

pnpm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react

简简单单，我们又装好了一个工具

工具配置

husky

我们虽然安装了husky，但是当我们在git commit时，并未激活任何git hook，因为我们还没配置husky。

通过观察发现，husky官方库的git提交都很规范，都是像chore: message这样的type: commit message式的提交方式，能不能让husky在git提交commit时自动阻拦下不是这样提交方式的commit，从而阻止不规范的提交呢？

commitlint

答案是肯定的，不过这之前我们还需要安装一个能够检查git commit的工具，他就是类似于eslint的commitlint

咱预览一下安装之后的效果

conventional-changelog/commitlint: 📓 Lint commit messages (github.com)

这也太方便了吧。根据readme的提示，几行命令安装他。

# Install commitlint cli and conventional config
pnpm install --save-dev @commitlint/config-conventional @commitlint/cli
# For Windows:
pnpm install --save-dev @commitlint/config-conventional @commitlint/cli

# Configure commitlint to use conventional config
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

接着通过husky将commitlint加到commit之前的检查脚本里，拦截不规范的commit消息

pnpm husky add .husky/commit-msg  'pnpm commitlint --edit ${1}'

咱们随便提个git commit看看效果

可以看到，即使我们在外部控制台，husky依然是起作用的，给了commit消息不合规的报错。

不过，我又想偷懒了，有没有另一个小工具，能够通过命令行选项的方式，帮我快速创建commit，而不用每次手输入呢？

嘿嘿，他就是Commitizen

Commitizen

这个工具要全局安装，全局安装后，就能在任意环境里（包括没有安装commitlint的项目）通过选项帮助快速生成格式化的commit message，真是懒人福利啊。

所以啊，以后再需要这些能偷懒又还没有人写的轮子，就自己造一个然后开源，没准不久后就要变成开源界小有名气的红人啦。

输入pnpm install -g commitizen全局安装一下

pnpm install -g commitizen
commitizen init cz-conventional-changelog --save-dev --save-exact

这里同时安装了cz-conventional-changelog适配器，方便我们根据自己的代码风格自定义Commitizen生成的commit

具体如何修改可以参考cz-conventional-changelog仓库的readme

commitizen/cz-conventional-changelog: A commitizen adapter for the angular preset of https://github.com/conventional-changelog/conventional-changelog

输入cz，git cz，git-cz 三个指令中的任意之一即可使用一下试试

可以看到已经有选项了

eslint & prettier

其实此时的eslint与prettier的基础配置已经能够正常使用了，但仍然可以根据自己的代码风格对prettier进行配置

比如，我会将trailingComma: 'all'改为trailingComma: 'none'，这样对于数组或者对象，prettier不会在最后一个元素后自动添加逗号。

以及添加endOfLine: "auto"，解决windows换行问题

但是前面提到了我还希望能在使用git提交代码时，能使用eslint和prettier，所以我们还需要借助一下husky，集成这两个工具。

lint-staged & pretty-quick

当然啦，直接使用eslint或者prettier其实会有一些小问题，我们每次修改代码，提交commit，其实只希望eslint或者prettier对增量代码执行检查和格式化，但他俩的默认行为确实对所有代码执行这些操作，那么对于拥有祖传代码的工程项目将会是一个灾难，毕竟大项目多多少少可能会有一些不能动的屎山代码，所以这里还需要安装两个小工具🚫💩lint-staged和pretty-quick ，这两个小工具还很好的优化了eslint或者prettier的输出信息，以及可以快速配置对不同文件执行的操作。是选择eslint检查后prettier格式化，还是直接prettier格式化，都可以通过lint-stage进行简单配置。

安装

okonet/lint-staged: 🚫💩 — Run linters on git staged files (github.com)

看到lint-staged官方仓库标题的小细节了嘛，拒绝💩山，🚫💩哈哈哈

还是简单的两行指令

pnpm install --save-dev pretty-quick
pnpm install --save-dev lint-staged # requires further setup

再通过以下指令将两个工具添加进项目的执行脚本里，方便后面执行

pnpm pkg set scripts.lint="pnpm lint-staged"
pnpm pkg set scripts.pretty="pnpm pretty-quick --staged"

同时还要添加lint-staged的设置，来选择针对不同文件执行的操作(只格式化，还是两个都要)

打开package.json，添加以下字段，这是所有文件都要eslint并prettier的意思

"lint-staged": {
    "*": ["eslint --fix","prettier --write"]
}

其他配置可以查看lint-staged的readme

okonet/lint-staged: 🚫💩 — Run linters on git staged files (github.com)

测试

在这之后，输入pnpm lint和pnpm pretty来看看效果

可以看到我们留的一个未使用的变量正常被eslint揪出来并且报错了。但是为什么还有几个报错？还有来自package.json文件的，能忽略这些文件嘛？

其实eslint也可以像git一样，选择忽略几个文件，那就是创建.eslintignore，然后在里面填上忽略的文件就行了

package.json
pnpm-lock.yaml
.eslintrc.js
.prettierrc.js
commitlint.config.js

后续项目有什么新增的需要忽略的文件，往里面加就行了。

pretty-quick也正常工作了

接下来就是将他们通过husky，放置在commit的检查中了

输入以下指令通过husky，将这两个小工具添加进执行commit之前的操作脚本中

pnpm husky add .husky/pre-commit "pnpm lint"
pnpm husky add .husky/pre-commit "pnpm pretty"

完成后我们提交一个commit试试，可以看到我们带着错误的代码提交时成功被拦截了

不过注释掉我们预留的错误代码后，还是报错，为啥呢？那是因为我们刚才配置的lint-staged默认会对所有文件执行prettier，经过实践，这样显然是不行的，所以我们要回归package.json修改lint-staged的策略，将通配符*改为*.js来让lint-staged只对js文件执行lint

"lint-staged": {
  "*.js": [
    "eslint --fix",
    "prettier --write"
  ]
}

再提交时，也如预期那样提交成功了，至此，这个项目就可以正常编写代码，并且在commit的时候自动审查不规范代码并拦截提示了。

结语

这个项目模板我已经同步更新在我的Github上了，传送门：Styunlen/husky-eslint-prettier-template: A project template with husky,eslint and prettier installed (github.com)

可以输入以下指令快速复制

git clone https://github.com/Styunlen/husky-eslint-prettier-template.git

依赖项目

• husky typicode/husky: Git hooks made easy 🐶 woof! (github.com)
• eslint eslint/eslint: Find and fix problems in your JavaScript code. (github.com)
• prettier prettier/prettier: Prettier is an opinionated code formatter. (github.com)
• commitlint conventional-changelog/commitlint: 📓 Lint commit messages (github.com)
• commitizen commitizen/cz-cli: The commitizen command line utility. #BlackLivesMatter (github.com)
• lint-staged okonet/lint-staged: 🚫💩 — Run linters on git staged files (github.com)
• pretty-quick azz/pretty-quick: ⚡ Get Pretty Quick (github.com)