Next.js配置代码格式化和校验
本文概括：
- ESLint 可以给项目加上代码校验
- Prettier可以格式化代码
- Git的钩子可以在提交时自动修复格式化
安装和配置Prettier
Next.js项目已经配置好了EsLint,可以自己加上prettier进行格式化：
官网文档链接：nextjs.org/docs/app/ap…
安装Prettier依赖：
npm install --save-dev eslint-config-prettier
在 eslint.config.mjs 中加入prettier
const eslintConfig = [
...compat.extends("next/core-web-vitals", "next/typescript", "prettier"),
];
prettier已经可以完成代码格式化了，我们项目中一般会用tailwindCSS，所以可以顺便格式化一下tailwind的类名（下面两个按需使用）
npm i -D prettier-plugin-organize-imports prettier-plugin-tailwindcss
新建一个 .prettierrc.json 来放置格式化的规则，下面会具体介绍
新建一个 .prettierignore 来放置不需要格式化的内容
格式化命令(可以放钩子里提交之前格式化一下)：
# 下面的命令会直接帮你格式化
npx prettier . --write
# 下面的命令会检测，不格式化
npx prettier . --check
在IDEA编辑器中配置代码格式化，打开下面的选项：
然后可以给prettier绑定一个快捷键（我这里改成了和默认的格式化是同一个，这样就可以使用默认格式化的同时格式化代码了）：
安装和配置husky
husky 和 lint-staged 可以在 Git 提交代码时进行 ESLint 的代码校验和 prettier 的格式化
husky官网：typicode.github.io/husky/get-s…
安装依赖（husk+lint-staged）：
npm install --save-dev husky lint-staged
# 下面这个可以在package.json里设置 "prepare": "husky install" 当别人安装依赖的时候会自动执行prepare脚本
npm pkg set scripts.prepare="husky install"
husky配置：
npx husky init
修改 .husky/pre-commit 文件内容，放入我们需要执行的npx lint-staged
新建一个 .lintstagedrc.json文件，用来配置格式化内容，这里我只格式化src目录下的文件
{
"src/**/*.{js,jsx,ts,tsx}": ["eslint --fix"],
"src/**/*.{js,jsx,tsx,ts,less,md,json}": ["prettier --write"]
}
现在提交代码之后就会自动进行格式化了。
