nextjs16配置eslint+prettier

ESLint Prettier 配合ESLint 负责“代码正确性和潜在错误”Prettier 负责“代码格式化”避免 ESLint 因格式化问题报错可以通过eslint-config-prettier或eslint-plugin-prettier配合Next.js 官方推荐Next.js 默认生成的模板就支持 ESLint可以通过--eslint、--tailwind等选项快速生成保持代码质量和团队统一风格一、首先创建一个nextjs项目pnpm create next-applatest nextjs-template --yes --src-dir这里两个参数的作用分别是--yes--yes 使用保存的偏好设置或默认值来跳过提示。默认设置启用 TypeScript、Tailwind CSS、ESLint、App Router 和 Turbopack包含导入别名 /*并包括 AGENTS.md其中引用了 CLAUDE.md以指导编码代理编写最新的 Next.js 代码。--src-dir强制将应用代码放到src/目录下创建完成后目录类似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相关依赖pnpm add prettier eslint-config-prettier eslint-plugin-prettier prettier-plugin-tailwindcss -D创建.prettierrc文件在根目录下内容有{ importOrder: [ ^(react/(.*)$)|^(react$), ^(next/(.*)$)|^(next$), THIRD_PARTY_MODULES, , ^/(.*)$, ^[./] ], importOrderParserPlugins: [typescript, jsx, decorators-legacy], plugins: [ ianvs/prettier-plugin-sort-imports, prettier-plugin-sort-json, prettier-plugin-tailwindcss ], printWidth: 80, semi: true, singleAttributePerLine: true, singleQuote: true, tabWidth: 2, trailingComma: es5 }这个prettier配置文件里面引用了这两个依赖ianvs/prettier-plugin-sort-imports、prettier-plugin-sort-json因此得去安装pnpm add ianvs/prettier-plugin-sort-imports prettier-plugin-sort-json eslint-plugin-unused-imports -D三、修改或创建eslint配置文件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命令行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进行以上配置最后附上next.config.ts配置import { existsSync, readFileSync } from node:fs; import { resolve } from node:path; import type { NextConfig } from next; function loadEnvFile(appEnv: string) { const envPath resolve(process.cwd(), .env.${appEnv}); if (!existsSync(envPath)) return; for (const line of readFileSync(envPath, utf8).split(\n)) { const trimmed line.trim(); if (!trimmed || trimmed.startsWith(#)) continue; const separatorIndex trimmed.indexOf(); if (separatorIndex -1) continue; const key trimmed.slice(0, separatorIndex).trim(); let value trimmed.slice(separatorIndex 1).trim(); if ( (value.startsWith() value.endsWith()) || (value.startsWith() value.endsWith()) ) { value value.slice(1, -1); } process.env[key] value; } } const appEnv process.env.APP_ENV ?? development; loadEnvFile(appEnv); const apiUrl process.env.NEXT_PUBLIC_API_URL ?? ; console.log( ~ :34 ~ apiUrl:, apiUrl); /** 仅 APP_ENVproduction 视为生产test 构建虽为 NODE_ENVproduction仍保留调试能力 */ const isProductionApp appEnv production; const isVercel Boolean(process.env.VERCEL); /** 与 Next 内置列表合并进一步按需导入子路径见 next/dist/server/config.js */ const optimizePackageImports [ antd, ant-design/icons, tanstack/react-query, dayjs, qrcode.react, ] as const; const nextConfig: NextConfig { /* config options here */ env: { NEXT_PUBLIC_APP_ENV: appEnv, NEXT_PUBLIC_API_URL: apiUrl, }, /** Vercel 原生托管无需 standaloneEC2 / Docker 自建部署时使用 */ ...(isVercel ? {} : { output: standalone as const }), /** 开发 / 测试保留 source map正式生产关闭以减小体积 */ productionBrowserSourceMaps: !isProductionApp, enablePrerenderSourceMaps: !isProductionApp, poweredByHeader: false, compiler: { /** 仅正式生产移除 console开发 / 测试保留调试输出 */ removeConsole: isProductionApp, }, experimental: { optimizePackageImports: [...optimizePackageImports], /** 服务端组件树摇Next 默认开启显式保留 */ optimizeServerReact: true, serverSourceMaps: !isProductionApp, turbopackSourceMaps: !isProductionApp, turbopackInputSourceMaps: !isProductionApp, }, async rewrites() { return [ { source: /api/:path*, destination: ${apiUrl}/:path*, }, ]; }, }; export default nextConfig;