nextjs16配置eslint+prettier

ESLint + Prettier 配合 ：
- ESLint 负责"代码正确性和潜在错误"
- Prettier 负责"代码格式化"
- 避免 ESLint 因格式化问题报错，可以通过 eslint-config-prettier 或 eslint-plugin-prettier 配合
Next.js 官方推荐 ：
- Next.js 默认生成的模板就支持 ESLint
- 可以通过 --eslint、--tailwind 等选项快速生成
- 保持代码质量和团队统一风格

一、首先创建一个nextjs项目

javascript 复制代码

pnpm create next-app@latest nextjs-template --yes --src-dir

这里两个参数的作用分别是：

--yes：--yes 使用保存的偏好设置或默认值来跳过提示。默认设置启用 TypeScript、Tailwind CSS、ESLint、App Router 和 Turbopack，包含导入别名 @/*，并包括 AGENTS.md（其中引用了 CLAUDE.md）以指导编码代理编写最新的 Next.js 代码。
--src-dir：强制将应用代码放到 src/ 目录下

创建完成后目录类似：

javascript 复制代码

my-app/
├─ src/
│  ├─ app/
│  │  ├─ layout.tsx
│  │  ├─ page.tsx
│  │  └─ globals.css
│  └─ ...
├─ public/
├─ package.json
├─ next.config.ts
└─ tsconfig.json

当然你也可以不加--src-dir，不加--src-dir生成的是无src目录工程，目前nextjs默认生成的就是无src目录工程。这个根据个人需求和喜好去选择。

`二、安装prettier相关依赖`

javascript 复制代码

pnpm add prettier eslint-config-prettier eslint-plugin-prettier -D

创建.prettierrc文件在根目录下，内容有

javascript 复制代码

{
  "importOrder": [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "",
    "^@/(.*)$",
    "^[./]"
  ],
  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"],
  "plugins": [
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-sort-json"
  ],
  "printWidth": 80,
  "semi": true,
  "singleAttributePerLine": true,
  "singleQuote": true,
  "tabWidth": 2,

  "trailingComma": "es5"
}

这个prettier配置文件里面引用了这两个依赖@ianvs/prettier-plugin-sort-imports、prettier-plugin-sort-json，因此得去安装：

javascript 复制代码

pnpm add @ianvs/prettier-plugin-sort-imports prettier-plugin-sort-json eslint-plugin-unused-imports -D

三、修改或创建eslint配置文件

javascript 复制代码

import nextVitals from 'eslint-config-next/core-web-vitals';
import nextTs from 'eslint-config-next/typescript';
import prettierConfig from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier';
import unusedImports from 'eslint-plugin-unused-imports';
import { defineConfig, globalIgnores } from 'eslint/config';

const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,

  globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']),
  prettierConfig,
  {
    plugins: {
      prettier: prettierPlugin,
      'unused-imports': unusedImports,
    },
    rules: {
      '@typescript-eslint/no-unused-vars': 'off',
      'no-unused-vars': 'off',
      'unused-imports/no-unused-imports': 'error',
      'unused-imports/no-unused-vars': [
        'warn',
        {
          vars: 'all',
          varsIgnorePattern: '^_',
          args: 'after-used',
          argsIgnorePattern: '^_',
        },
      ],
      'prettier/prettier': 'error',
    },
  },
]);

export default eslintConfig;

四、修改package.json命令行

javascript 复制代码

"scripts": {
  "lint": "eslint .",
  "format": "prettier --write ."
}

以上步骤就完成了nextjs的eslint、prettier配置

第五步：编辑器集成（VS Code 党必看）

在 VS Code 或者cursor中安装插件：

ESLint ✔️
Prettier - Code formatter ✔️

然后再vscode或者cursor的setting.json 当中配置如下：

复制代码

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

当然了你也可以在nextjs项目下面创建，到 .vscode/settings.json，进行以上配置