文章摘要
开发前端项目时，经常会使用一些前端工具来帮助规范代码， eslint 和 prettier 就是两个非常好用的工具，两个一起用时可以让 eslint 负责检查代码， prettier 负责格式化代码。 其次， git commit 时，也希望 commit message 能好看些，以及规范些，更希望能在 commit 之前通过 eslint 检查并用 prettier 格式化代码，来防止 com…
开发前端项目时，经常会使用一些前端工具来帮助规范代码， eslint 和 prettier 就是两个非常好用的工具，两个一起用时可以让 eslint 负责检查代码， prettier 负责格式化代码。 其次， git commit 时，也希望 commit message 能好看些，以及规范些，更希望能在 commit 之前通过 eslint 检查并用 prettier 格式化代码，来防止 commit 的代码不合规范，导致后期维护困难。那么如何初始化一个这样的项目呢？阅读本篇文章，将带你实战了解整个过程。 项目初始化 首先新建一个文件夹 Test(改成项目名称)，用作项目根目录。然后在VSCode中打开这个文件夹。 在Vscode的终端中输入，将当前目录初始化为一个git仓库 小芝士点： git checkout -b main 和 git switch -c main 都可以切换到 main 分支 主分支可以是 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)开发前端项目时，经常会使用一些前端工具来帮助规范代码，eslint和 prettier就是两个非常好用的工具，两个一起用时可以让 eslint 负责检查代码，prettier负责格式化代码。 其次，git commit 时，也希望 commit message 能好看些，以及规范些，更希望能在 commit 之前通过 eslint检查并用 prettier格式化代码，来防止 commit的代码不合规范，导致后期维护困难。那么如何初始化一个这样的项目呢？阅读本篇文章，将带你实战了解整个过程。
项目初始化
首先新建一个文件夹 Test(改成项目名称)，用作项目根目录。然后在VSCode中打开这个文件夹。
在Vscode的终端中输入，将当前目录初始化为一个git仓库
小芝士点：
git checkout -b main和git switch -c main都可以切换到main分支- 主分支可以是
main也可以是master，不过为了工程化项目，后期可能还会使用git flow工具来规范git仓库提交，所以推荐使用main作为主分支。
接下来我们输入pnpm init，来初始化Node.js项目，当然也可以使用其他包管理器，比如npm和yarn，pnpm比较省空间且高效，所以我用他。具体可以上知乎搜索三者的区别
然后对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可知我们只需三句指令就能安装他
这样我们就安装好了，我们等eslint和prettier都装好时在回过来一起配置他。
eslint & prettier
这两货放一起时会冲突，每次都需要单独配置，不过好在逛github的时候发现有人已经写了个配置脚本，能一键初始化配置，真方便。
我们输入pnpx create-prettier-eslint跟着命令行回答个人风格快速配置一个eslint和prettier同时集成的项目
报错了？没关系，毕竟是个19年的项目，Node底层有api变动也是正常的，至少配置文件已经帮我们自动生成了，观察报错发现脚本想要自动安装以下依赖。
我们输入指令手动安装依赖。
简简单单，我们又装好了一个工具
工具配置
husky
我们虽然安装了husky，但是当我们在git commit时，并未激活任何git hook，因为我们还没配置husky。
通过观察发现，husky官方库的git提交都很规范，都是像chore: message这样的type: commit message式的提交方式，能不能让husky在git提交commit时自动阻拦下不是这样提交方式的commit，从而阻止不规范的提交呢？
commitlint
答案是肯定的，不过这之前我们还需要安装一个能够检查git commit的工具，他就是类似于eslint的commitlint
咱预览一下安装之后的效果
这也太方便了吧。根据readme的提示，几行命令安装他。
接着通过husky将commitlint加到commit之前的检查脚本里，拦截不规范的commit消息
咱们随便提个git commit看看效果
可以看到，即使我们在外部控制台，husky依然是起作用的，给了commit消息不合规的报错。
不过，我又想偷懒了，有没有另一个小工具，能够通过命令行选项的方式，帮我快速创建commit，而不用每次手输入呢？
嘿嘿，他就是Commitizen
Commitizen
这个工具要全局安装，全局安装后，就能在任意环境里（包括没有安装commitlint的项目）通过选项帮助快速生成格式化的commit message，真是懒人福利啊。
所以啊，以后再需要这些能偷懒又还没有人写的轮子，就自己造一个然后开源，没准不久后就要变成开源界小有名气的红人啦。
输入pnpm install -g commitizen全局安装一下
这里同时安装了cz-conventional-changelog适配器，方便我们根据自己的代码风格自定义Commitizen生成的commit
具体如何修改可以参考cz-conventional-changelog仓库的readme
输入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进行简单配置。
安装
看到lint-staged官方仓库标题的小细节了嘛，拒绝💩山，🚫💩哈哈哈
还是简单的两行指令
再通过以下指令将两个工具添加进项目的执行脚本里，方便后面执行
同时还要添加lint-staged的设置，来选择针对不同文件执行的操作(只格式化，还是两个都要)
打开package.json，添加以下字段，这是所有文件都要eslint并prettier的意思
其他配置可以查看lint-staged的readme
测试
在这之后，输入pnpm lint和pnpm pretty来看看效果
可以看到我们留的一个未使用的变量正常被eslint揪出来并且报错了。但是为什么还有几个报错？还有来自package.json文件的，能忽略这些文件嘛？
其实eslint也可以像git一样，选择忽略几个文件，那就是创建.eslintignore，然后在里面填上忽略的文件就行了
后续项目有什么新增的需要忽略的文件，往里面加就行了。
pretty-quick也正常工作了
接下来就是将他们通过husky，放置在commit的检查中了
输入以下指令通过husky，将这两个小工具添加进执行commit之前的操作脚本中
完成后我们提交一个commit试试，可以看到我们带着错误的代码提交时成功被拦截了
不过注释掉我们预留的错误代码后，还是报错，为啥呢？那是因为我们刚才配置的lint-staged默认会对所有文件执行prettier，经过实践，这样显然是不行的，所以我们要回归package.json修改lint-staged的策略，将通配符*改为*.js来让lint-staged只对js文件执行lint
再提交时，也如预期那样提交成功了，至此，这个项目就可以正常编写代码，并且在commit的时候自动审查不规范代码并拦截提示了。
结语
这个项目模板我已经同步更新在我的Github上了，传送门：Styunlen/husky-eslint-prettier-template: A project template with husky,eslint and prettier installed (github.com)
可以输入以下指令快速复制
依赖项目
- 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)
本文采用 CC BY-NC-SA 4.0 协议进行授权，如无注明均为原创，转载请注明出处。
标题：工程化前端神器—— husky + eslint + prettier - 提升前端代码质量指南作者：九仞之行链接：https://dev.styunlen.cn/archives/post-1564.html
还没有评论呢 ~ 快来抢沙发吧 🛋️