章
目
录
本文主要讲解关于如何为next项目添加prettier并配置husky 相关内容，让我们来一起学习下吧！
使用npx create-next-app@latest初始化项目时会有添加eslint的选项，一般都会选择启用，因此不用自己配置eslint。下面介绍如何在此基础上添加prettier和husky
安装prettier
npm i -D prettier eslint-config-prettier
如果在next初始化时选择了启用tailwind，还可额外安装tailwind的扩展，可以自动排列className的顺序
# 额外的插件
npm i -D prettier-plugin-tailwindcss
在.eslintrc.json中添上prettier扩展,让eslint和prettier能和谐使用
{
"extends": ["next/core-web-vitals", "prettier"],
}
在更目录下创建.prettierrc.json，对prettier进行配置
{
"plugins": [
"prettier-plugin-tailwindcss"
],
"tailwindFunctions": ["classNames"],
"singleQuote": true,
"trailingComma": "es5"
}
在package.json中加入format命令和check-format命令。format用于手动格式化代码，而check-format则用于下文的husky配置
...
"scripts": {
"check-format": "prettier --check "**/*.{js,jsx,ts,tsx}"",
"format": "prettier --write "**/*.{js,jsx,ts,tsx}" && next lint --fix",
}
...
如果有保存时自动格式化代码的需求，可以通过File > Preferences > Settings进入设置页面，搜索format on开启下列面这个选项
配置husky
安装husky和相关依赖
npm install --save-dev husky @commitlint/cli @commitlint/config-conventional
使用husky规范commit提交注释
初始化husky
npx husky install
添加提交git的hook
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'
在项目根目录新建配置文件commitlint.config.js并添加如下配置
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-case': [2, 'always', ['lower-case', 'upper-case']],
'type-enum': [2, 'always',['feat', 'fix', 'docs','style','refactor','perf','test', 'chore', 'revert']]
}
}
注：提交规范为<type>(<scope>): <subject>,type可选类型为上文type-enum中配置的关键字。subject 是本次提交的基本信息。前俩者为必填项，为选填项，用来描述本次提交的影响面。
提交示例:
#添加新特性的commit
git commit -m 'feat: xxx'
# 修复bug的commit
git commit -m 'fix: xxx'
编写pre-commit
运行npx husky install后会在根目录生成一个.husky文件夹，文件夹下有一个pre-commit文件，我们可以在里面写一些shell脚本，这个脚本会在git commit执行前运行,因此我们可以在这个阶段进行测试代码、检验代码格式等操作。
如果没有该文件可以运行下列命令进行生成
npx husky add .husky/pre-commit
pre-commit编写示例:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
echo '?️? commit前置操作'
echo '?代码格式检查'
# Check Prettier standards
npm run check-format ||
(
echo '?? 代码格式有问题!';
false;
)
echo '?lint检查'
npm run lint ||
(
echo 'lint 校验失败!好好检查一下再提交 ?'
false;
)
echo '?ts代码校验'
npm run check-types ||
(
echo '❌存在typescript相关错误!?'
false;
)
以上就是关于如何为next项目添加prettier并配置husky 相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！
