React Native项目：VS Code未触发react-hooks/exhaustive-deps警告排查

1. 确认ESLint插件状态 #

• 打开VS Code扩展面板，确保ESLint插件已安装并启用，尽量更新到最新版本。
• 打开VS Code设置（快捷键Ctrl+,），搜索eslint.enable，确认该选项为true。

2. 检查react-hooks插件与React版本匹配 #

• eslint-plugin-react-hooks要求React 16.8及以上版本，先查看package.json里的react和react-native版本是否达标。
• 确认eslint-plugin-react-hooks已安装：执行npm list eslint-plugin-react-hooks，未安装则运行npm install eslint-plugin-react-hooks --save-dev。

3. 排查ESLint配置冲突 #

• 你的配置继承了airbnb规则集，它可能覆盖react-hooks相关规则，确保rules里的react-hooks/exhaustive-deps和react-hooks/rules-of-hooks明确设为warn或error。
• 执行npx eslint --print-config .eslintrc.js输出最终生效的配置，验证react-hooks规则是否真的被启用。

4. 配置VS Code的ESLint校验范围 #

• 打开VS Code设置，搜索eslint.validate，确保列表包含javascript、javascriptreact、typescript、typescriptreact，避免TSX/JSX文件不被校验。
• 检查根目录的.eslintignore文件，确认没有忽略需要校验的.tsx、.jsx文件。

5. 刷新ESLint服务或重启VS Code #

• 按Ctrl+Shift+P打开命令面板，执行ESLint: Restart ESLint Server，强制刷新服务。
• 若上述操作无效，直接重启VS Code，确保配置修改被加载。

6. 手动测试规则是否生效 #

• 编写测试组件故意遗漏依赖，示例：

import React, { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';

const TestComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);
  }, []); // 故意漏掉count依赖

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default TestComponent;

• 执行npx eslint TestComponent.tsx，若终端输出警告但VS Code编辑器不显示，说明是插件配置问题；若终端也无输出，则是ESLint配置本身未生效。

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