工程化前端神器—— husky + eslint + prettier – 提升前端代码质量指南

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

项目初始化

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

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

小芝士点:

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

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

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

pnpm init

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

接着我们要开始安装huskyeslintprettier这三个工具了。

工具安装

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

这样我们就安装好了,我们等eslintprettier都装好时在回过来一起配置他。

eslint & prettier

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

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

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

报错了?没关系,毕竟是个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式的提交方式,能不能让huskygit提交commit时自动阻拦下不是这样提交方式的commit,从而阻止不规范的提交呢?

commitlint

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

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

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: [[email protected]/config-conventional']}" > commitlint.config.js

接着通过huskycommitlint加到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

GitHub – conventional-changelog/conventional-changelog: Generate changelogs and release notes from a project’s commit messages and metadata.

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

可以看到已经有选项了

eslint & prettier

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

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

以及添加endOfLine: “auto”,解决windows换行问题

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

lint-staged & pretty-quick

当然啦,直接使用eslint或者prettier其实会有一些小问题,我们每次修改代码,提交commit,其实只希望eslint或者prettier对增量代码执行检查和格式化,但他俩的默认行为确实对所有代码执行这些操作,那么对于拥有祖传代码的工程项目将会是一个灾难,毕竟大项目多多少少可能会有一些不能动的屎山代码,所以这里还需要安装两个小工具🚫💩lint-stagedpretty-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,添加以下字段,这是所有文件都要eslintprettier的意思

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

其他配置可以查看lint-stagedreadme

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

测试

在这之后,输入pnpm lintpnpm 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

依赖项目

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
Source: https://github.com/zhaoolee/ChineseBQB
Source: https://github.com/zhaoolee/ChineseBQB
Source: https://github.com/zhaoolee/ChineseBQB
颜文字
Emoji
小恐龙
花!
滑稽大佬
演奏
程序员专属
上一篇