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