Next.js 12迁移和Eslint配置，更漂亮，Airbnb，Jest/react测试-库

Question

更新:最后，配置和dep版本开始工作。我更新了下面的文件，以防其他人有同样的问题。

我正在将一个大型应用程序从Next.js 10迁移到v12。我有少量的babel配置，所以决定删除它，同时也使用Next.js的linter next lint。我们最初使用了更漂亮的和airbnb的eslint插件。我使用的不是eslint-plugin-airbnb，而是eslint-plugin-airbnb-base。原因是eslint-config-next已经包含了eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y的ESLint规则/插件，基本上是airbnb

我的问题是：

1. 我有一个小的.prettierrc.js文件，但是没有应用这些规则。ie:打印: 80
2. 修正:也得到这个错误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 overrides },

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

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

package.json

  "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],
}

Answer 1

1. 如果您想要在您的皮棉过程中运行得更漂亮一些，您需要更漂亮的插件。我看你有更漂亮的插件和更漂亮的配置。他们做的事情略有不同，所以检查他们的文档，并坚持其中之一。就我个人而言，我更喜欢弹性配置-更漂亮，所以我把衬里和格式化分开，但这是个人的选择！
2. 您需要安装ESLint，然后在plugins配置的ESLint部分启用它。

如果您对Next.js ESLint配置很满意，那么应该检查Vercel风格指南，这包括了对ESLint、更漂亮和TypeScript的合理默认值。