配置VSCode+ESLint检测React/Next.js项目基础错误的问题

1. 先修复"Cannot find module 'next/babel'"错误 #

这个问题大多是依赖缺失或ESLint配置未正确关联Next.js内置规则导致的：

• 先确认项目安装了next和eslint-config-next依赖，没装的话执行：

npm install next eslint-config-next --save-dev

• 恢复.eslint.json的官方标准配置，不要随意修改继承项：

{
  "extends": ["next/core-web-vitals"]
}

• 删掉手动创建的.babelrc，Next.js会自动处理Babel配置，手动创建反而容易引发冲突
• 调整VSCode工作区settings.json的工作目录配置，如果是单根项目，直接指向根目录即可：

{
  "eslint.workingDirectories": ["./"]
}

如果是monorepo结构，再用packages/*这类匹配规则，先确认你的项目结构是否需要。

2. 强制开启基础语法检测规则 #

Next.js默认配置可能没完全启用核心语法检查，手动在.eslint.json里添加规则：

{
  "extends": ["next/core-web-vitals"],
  "rules": {
    "no-undef": "error", // 检测未定义变量
    "no-unused-vars": ["error", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }] // 检测未使用变量，可忽略下划线开头的变量
  }
}

这样ESLint就会把未定义、未使用变量标记为错误，实时高亮提示。

3. 配置VSCode ESLint扩展确保实时检测 #

在VSCode的用户或工作区settings.json中添加以下配置，让ESLint实时工作：

{
  "eslint.enable": true,
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"], // 覆盖Next.js所有常用文件类型
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 保存时自动修复可修复的ESLint问题
  },
  "eslint.run": "onType" // 输入时实时检测，不用等保存
}

4. 验证配置是否生效 #

• 按Ctrl+Shift+P执行ESLint: Restart ESLint Server，或者直接重启VSCode
• 在组件里输入未定义变量（比如console.log(testUndefinedVar)），正常情况下会立刻高亮并提示"testUndefinedVar is not defined"
• 定义变量后不使用，也会收到未使用变量的错误提示

额外排查点 #

• 如果终端还残留ESLint错误，删掉node_modules和package-lock.json，重新执行npm install
• 检查VSCode的ESLint扩展是否为最新版本，在扩展市场更新即可
• 确认项目根目录的.eslintignore文件没有忽略需要检查的目录（比如app/）

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