如何在具有现有 eslint 配置的项目中将 eslint 与 Next.js 一起使用？答案

【问题标题】：How to use eslint with Next.js in a project with an existing eslint config?如何在具有现有 eslint 配置的项目中将 eslint 与 Next.js 一起使用？
【发布时间】：2022-01-09 20:05:00
【问题描述】：

我有一个带有现有 eslint 配置的 Node.js 项目，我在同一个项目中生成了一个新的 next.js 项目，所以现在我有了

???? src
???? .eslintrc.yml
???? website
  ???? .eslintrc.json

如何使用我已经存在的配置来设置 next.js 的 eslint 配置？这是现有的样子：

env:
  es2020: true
  node: true

extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended

parser: "@typescript-eslint/parser"

parserOptions:
  sourceType: module

plugins:
  - "@typescript-eslint"
  - import

rules:
  no-duplicate-imports: error
  no-template-curly-in-string: warn
  no-unreachable-loop: warn
  camelcase: error
  curly: error
  eqeqeq: error
  no-console: error
  no-else-return: error
  no-empty-function: error
  no-eval: error
  no-new: error
  no-param-reassign: error
  no-return-await: warn
  no-unneeded-ternary: error
  no-useless-rename: error
  no-var: error
  prefer-arrow-callback: error
  prefer-const: error
  prefer-destructuring: error
  prefer-object-spread: error
  prefer-template: error
  block-spacing: error
  padding-line-between-statements:
    [error, { blankLine: "always", prev: "*", next: "return" }]
  "@typescript-eslint/explicit-module-boundary-types": off
  "@typescript-eslint/no-shadow": error
  import/order:
    [
      error,
      {
        alphabetize: { caseInsensitive: true, order: asc },
        groups: [[external, builtin], internal, parent, sibling, index],
        newlines-between: never,
      },
    ]

【问题讨论】：

标签： javascript node.js typescript next.js eslint

【解决方案1】：

我决定删除网站项目中所有与eslint相关的东西，并在根项目中安装eslint-config-next：

env:
  es2021: true
  shared-node-browser: true

extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
  - next/core-web-vitals
  - prettier

parser: "@typescript-eslint/parser"

parserOptions:
  sourceType: module

plugins:
  - "@typescript-eslint"
  - import

settings:
  next:
    rootDir: "./website"

rules:
  no-duplicate-imports: error
  no-template-curly-in-string: warn
  no-unreachable-loop: warn
  camelcase: error
  curly: error
  eqeqeq: error
  no-console: error
  no-else-return: error
  no-empty-function: error
  no-eval: error
  no-new: error
  no-param-reassign: error
  no-return-await: warn
  no-unneeded-ternary: error
  no-useless-rename: error
  no-var: error
  prefer-arrow-callback: error
  prefer-const: error
  prefer-destructuring: error
  prefer-object-spread: error
  prefer-template: error
  block-spacing: error
  padding-line-between-statements:
    [error, { blankLine: "always", prev: "*", next: "return" }]
  "@typescript-eslint/explicit-module-boundary-types": off
  "@typescript-eslint/no-shadow": error
  import/order:
    [
      error,
      {
        alphabetize: { caseInsensitive: true, order: asc },
        groups: [[external, builtin], internal, parent, sibling, index],
        newlines-between: never,
      },
    ]

我没有以这种方式使用 next lint，但这种方式 linting 应该可以正常工作，如果我能获得更好的集成，我会接受建议

【讨论】：