Next.js配置Eslint+Prettier+husky规范代码开发

Next.js配置代码格式化和校验

本文概括：

ESLint 可以给项目加上代码校验
Prettier可以格式化代码
Git的钩子可以在提交时自动修复格式化

安装和配置Prettier

Next.js项目已经配置好了EsLint,可以自己加上prettier进行格式化：

安装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.json文件，用来配置格式化内容，这里我只格式化src目录下的文件

css 复制代码

{
    "src/**/*.{js,jsx,ts,tsx}": ["eslint --fix"],
    "src/**/*.{js,jsx,tsx,ts,less,md,json}": ["prettier --write"]
}

现在提交代码之后就会自动进行格式化了。