VSCode中React项目lint错误不提示及ESLint/Prettier配置问题

1. React组件遗漏return语句无报错仅白屏问题 #

这个情况不是你本地环境坏了，是React 18版本的默认行为变更：React 17及更早版本会在组件返回undefined时直接抛出Nothing was returned from render运行时错误，React 18调整了该逻辑，把返回undefined视为合法的空渲染行为，所以浏览器不会抛错，只会渲染空白页面。
不用降级React版本恢复报错提示，用静态检查提前拦截这类问题，效率比运行时排查高很多：

• 在ESLint规则里开启"react/require-render-return": "error"，只要组件里漏写return返回JSX的逻辑，VSCode会直接在对应代码行标红，不用启动项目就能发现问题。

2. ESLint配置问题与Prettier单引号规则冲突修复 #

现有配置的核心问题 #

• extends数组顺序不对：Prettier相关扩展必须放在extends数组的最末尾，不然后续加载的规则（你当前配置里prettier之后的jsx-a11y、react-hooks推荐规则）会覆盖Prettier的规则配置，导致规则冲突。
• prettier/prettier规则没有读取本地.prettierrc配置：默认会用Prettier内置的默认配置（默认要求双引号），所以你在VSCode扩展、.prettierrc里配的singleQuote根本不会生效。

配置调整方案 #

首先修正extends顺序，把prettier放到最后一位：

"extends": [
  "plugin:react/recommended",
  "airbnb",
  "airbnb/hooks",
  "plugin:jsx-a11y/recommended",
  "plugin:react-hooks/recommended",
  "prettier"
]

然后解决单引号冲突，两种方法选一个就行：

• 方案一（轻量，适合配置简单的项目）：直接在ESLint规则里写死Prettier配置，不依赖外部配置文件：

"rules": {
  "prettier/prettier": ["error", { "singleQuote": true, "endOfLine": "auto" }],
  "react/function-component-definition": [
    "error",
    { "namedComponents": "arrow-function" }
  ],
  "react/require-render-return": "error",
  "react/react-in-jsx-scope": "off"
}

• 方案二（适合需要多端统一配置的项目）：安装对应依赖让ESLint自动读取项目根目录的.prettierrc配置，不用在ESLint里重复写Prettier相关规则。

React场景配置补充建议 #

在配置里加React版本自动检测，避免规则和当前使用的React版本适配错误：

"settings": {
  "react": {
    "version": "detect"
  }
}

• 记得开react/react-in-jsx-scope: "off"：React 17+版本已经不需要在每个JSX文件顶部手动导入React，关掉这个规则就不会产生误报。
• 日常开发优先靠ESLint静态检查拦截语法、基础逻辑错误，比跑起来之后看控制台找问题效率高得多。

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