Next.js 12迁移及ESLint与Prettier、Airbnb、Jest配置排查

更新说明：已解决配置及依赖版本问题，下文更新了相关文件供遇到同类问题的开发者参考。

迁移背景 #

将大型应用从 Next.js 10 升级到 v12，移除原有简易 Babel 配置，改用 Next.js 自带的 next lint 工具。原使用 Prettier + Airbnb ESLint 插件，现替换为 eslint-plugin-airbnb-base——因 eslint-config-next 已内置 eslint、eslint-plugin-import、eslint-plugin-react、eslint-plugin-react-hooks、eslint-plugin-jsx-a11y 等规则/插件，基本覆盖 Airbnb 规则。

遇到的问题 #

• .prettierrc.js 配置规则未生效（例如 printWidth:80）
• 已修复：曾出现错误 Error: Definition for rule 'jest/expect-expect' was not found

相关配置文件 #

.eslintrc.json #

module.exports = {
  root: true,
  plugins: ['simple-import-sort', 'unused-imports'],
  extends: [
    'next',
    'next/core-web-vitals',
    'plugin:jest/recommended',
    'plugin:prettier/recommended',
  ],
  settings: {
    'import/resolver': {
      alias: {
        map: [['@', './']],
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
  rules: { /* 省略规则内容 */ },
  overrides: { /* TypeScript 相关覆盖规则 */ },
};

jest.config.js #

const nextJest = require('next/jest');

const createJestConfig = nextJest({ 
  dir: './'
})

const customConfig = {
  rootDir: './',
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
  setupFilesAfterEnv: ['<rootDir>/test-utils/jest-setup.ts'],
  moduleNameMapper: {
    '@/(.*)$': '<rootDir>/$1',
  },
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
};

module.exports = createJestConfig(customConfig);

.prettierrc.js #

module.exports = {
  bracketSpacing: true,
  printWidth: 80,
  singleQuote: true,
  trailingComma: 'es5',
  arrowParens: 'avoid',
};

package.json（devDependencies 部分） #

"devDependencies": {
    "@cypress/code-coverage": "^3.9.10",
    "@hookform/devtools": "^4.0.1",
    "@next/eslint-plugin-next": "^12.3.1",
    "@swc/core": "^1.3.3",
    "@swc/jest": "^0.2.23",
    "@testing-library/cypress": "^8.0.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.2.0",
    "@testing-library/react-hooks": "^8.0.1",
    "@types/autosuggest-highlight": "^3.1.1",
    "@types/cookie": "^0.4.1",
    "@types/geojson": "^7946.0.8",
    "@types/google.maps": "^3.45.6",
    "@types/jest": "^26.0.22",
    "@types/js-cookie": "^2.2.6",
    "@types/lodash.throttle": "^4.1.6",
    "@types/mui-datatables": "^3.7.6",
    "@types/qs": "^6.9.6",
    "@types/react": "17.0.2",
    "@types/react-dom": "17.0.2",
    "@types/react-gtm-module": "^2.0.1",
    "@types/react-input-mask": "^3.0.1",
    "@types/react-swipeable-views": "^0.13.1",
    "@types/stripe-v2": "^2.0.2",
    "@typescript-eslint/eslint-plugin": "^5.30.0",
    "cross-env": "^7.0.3",
    "cypress": "^8.6.0",
    "eslint": "^8.21.0",
    "eslint-config-next": "^12.3.1",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-cypress": "^2.11.3",
    "eslint-plugin-jest": "^27.0.4",
    "eslint-plugin-jest-dom": "^4.0.2",
    "eslint-plugin-simple-import-sort": "^5.0.3",
    "execa": "^4.0.3",
    "husky": "^4.2.5",
    "jest": "^29.1.2",
    "jest-environment-jsdom": "^29.1.2",
    "jest-junit": "^12.2.0",
    "lint-staged": "^10.5.1",
    "pg-promise": "^10.6.2",
    "prettier": "^2.7.1",
    "react-test-renderer": "^18.0.0",
    "ts-jest": "^29.0.3",
    "typescript": "^4.5.5"
  }

.lintstagedrc.js #

const path = require('path')

const buildEslintCommand = (filenames) =>
  `next lint --fix --file ${filenames
    .map((f) => path.relative(process.cwd(), f))
    .join(' --file ')}`

module.exports = {
  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
}

排查思路与建议 #

针对 Prettier 规则未生效的问题，按以下步骤排查：

1. 确认 ESLint 集成顺序：确保 plugin:prettier/recommended 在 extends 数组最后一位，保证其规则能覆盖其他冲突配置。
2. 单独验证 Prettier 配置：运行 npx prettier --check src/[示例文件].tsx，直接测试 Prettier 是否读取本地配置。如果单独运行生效但通过 ESLint 不生效，说明集成环节存在问题。
3. 补充缺失依赖：plugin:prettier/recommended 依赖 eslint-plugin-prettier 和 eslint-config-prettier，当前 package.json 未显式安装，需补充：

   npm install --save-dev eslint-plugin-prettier eslint-config-prettier
   

4. 查看 lint 调试日志：运行 next lint --debug，检查是否有 Prettier 规则加载失败或被覆盖的日志信息。
5. 调整 lint-staged 配置：当前仅调用 next lint --fix，可添加单独的 Prettier 格式化命令，确保规则生效：

   module.exports = {
     '*.{js,jsx,ts,tsx}': [buildEslintCommand, 'prettier --write'],
     '*.{json,md,css}': ['prettier --write'],
   }
   

6. 检查 IDE 配置：确认 IDE 启用了项目本地的 Prettier 配置，而非全局配置，且未被 ESLint 插件的格式化功能覆盖。

针对已修复的 Jest 规则问题，核心是确保 eslint-plugin-jest 正确安装，且 plugin:jest/recommended 在 extends 中的顺序合理，无其他规则覆盖插件定义。

内容的提问来源于 stack exchange，提问作者 Potatoes