ESLint & Prettier

安装 eslint-config-prettier 来禁用 eslint 中与 prettier 冲突的规则：

pnpm i -D eslint-config-prettier

然后编辑 eslint.config.[js|mjs]：

import { dirname } from 'node:path'
import { fileURLToPath } from 'node:url'
import { FlatCompat } from '@eslint/eslintrc'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

const compat = new FlatCompat({
  baseDirectory: __dirname,
})

const eslintConfig = [
  ...compat.extends('next/core-web-vitals', 'next/typescript', 'prettier'),
]

export default eslintConfig

安装 prettier，来格式化代码：

pnpm i -D prettier

如果项目使用了 tailwindcss，那么可以安装 prettier-plugin-tailwindcss 来格式化代码中的 tailwindcss 样式：

pnpm i -D prettier-plugin-tailwindcss

然后在 prettier 的配置文件，如果没有，可以创建 prettier.config.[js|mjs] 填入如下内容：

/**
 * @see https://prettier.io/docs/configuration
 * @type {import("prettier").Config}
 */
const config = {
  plugins: ['prettier-plugin-tailwindcss'],
}

export default config

Husky(git hooks)

安装 husky：

pnpm i -D husky

然后初始化 git hooks：

pnpm exec husky init

可以在多出的 .husky 目录下的 pre-commit 输入执行 git commit 之前要执行的命令。

lint-staged

lint-staged 搭配 husky 可以在 git commit 前自动对此次 commit 的文件执行一些操作，例如格式化 (prettier) 和代码风格 (eslint) 检查。

安装 lint-staged：

pnpm i -D lint-staged

然后创建 .lintstagedrc.json 文件：

{
  "!(public)/**/*": [
    "next lint --fix --file",
    "prettier --write --ignore-unknown"
  ]
}

因为 public 目录通常是用来存放外部下载的文件，如果其中有些 js 文件，那可能会进行没必要的格式化和代码检查。

然后到 .husky/pre-commit 里添加命令：

pnpm lint-staged