Next.js项目中为何需重复添加typescript-eslint的parser与plugin？

云上老周

2026-7-12

关于TypeScript-ESLint配置中重复声明parser和plugins的疑问解答

你的ESLint配置

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals",
  ],
  rules: {
    "@typescript-eslint/no-unused-vars": "warn",
    "@typescript-eslint/no-inferrable-types": "warn",

    "react-hooks/exhaustive-deps": "error",
  },
};

TypeScript-ESLint官方推荐配置

module.exports = {
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  root: true,
};

核心原因解析

官方配置是通用模板：官方入门指南的配置面向所有从零搭建ESLint+TypeScript环境的用户，确保无论用户是否完整继承plugin:@typescript-eslint/recommended，都能让ESLint正确识别TypeScript语法、加载对应插件。比如有些用户可能只继承plugin:@typescript-eslint/base，或者自定义组合配置，这时显式声明parser和plugins就很有必要。
Next.js项目的预设优化：你通过create-next-app创建的项目，已经通过plugin:@typescript-eslint/recommended继承了包含parser和plugins的base配置，同时next/core-web-vitals也做了适配性预设。所以无论你是否手动添加这两项，ESLint都会从继承的配置中读取到必要的设置，执行npx eslint .的结果自然一致。
冗余但无负面影响：显式添加parser和plugins不会与继承的配置冲突——ESLint会优先使用继承来的配置，重复声明不会覆盖已有设置，只是在Next.js这类已做好预设的项目中显得多余。