Expo React Native项目中react-hooks规则不生效问题排查

针对你遇到的react-hooks/rules-of-hooks和react-hooks/exhaustive-deps规则未触发警告的问题，可按以下步骤排查修复：

1. 完善ESLint配置的关键参数 #

当前的.eslintrc.js缺少对React版本检测和Babel解析的必要配置，这会导致hooks规则无法正确识别代码中的React Hooks。修改配置如下：

module.exports = {
  extends: 'airbnb',
  plugins: ['react', 'react-native', 'react-hooks', 'import'],
  parser: '@babel/eslint-parser',
  // 添加以下parserOptions和settings
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
    requireConfigFile: false, // 适配Expo默认的Babel配置结构
  },
  settings: {
    react: {
      version: 'detect', // 自动检测React版本，确保hooks规则适配
    },
  },
  env: {
    jest: true,
    'react-native/react-native': true,
  },
  rules: {
    // 保持原有的规则不变，可尝试将hooks规则临时设为error测试
    'react-hooks/rules-of-hooks': 'warn',
    'react-hooks/exhaustive-deps': 'warn',
    // ...其余规则
  },
  globals: {
    fetch: false,
  },
};

2. 确保VS Code正确启用ESLint校验 #

修改.vscode/settings.json，添加ESLint对React文件的校验支持，并确保ESLint插件正常工作：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.singleQuote": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true // 明确指定ESLint自动修复
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact" // 确保ESLint校验.jsx文件
  ],
  "eslint.enable": true
}

3. 验证规则是否生效 #

方式一：通过终端手动运行lint命令 #

执行package.json中的lint脚本，查看终端输出是否有预期的警告：

npm run lint

如果终端能输出deleteGoalHandler未添加到依赖数组的警告，说明ESLint配置本身没问题，只需重启VS Code让插件加载新配置。

方式二：重启VS Code #

按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），选择"Reload Window"，让VS Code重新加载ESLint配置和插件。

4. 额外排查点 #

• 确认你的代码位于React组件或自定义Hook内部：hooks规则仅对组件/Hook内的代码生效，若函数在组件外部调用，规则不会触发。
• 检查eslint-plugin-react-hooks版本：你当前使用的4.6.0是兼容React 18的版本，无需降级，但可尝试重新安装依赖确保无损坏：

  npm install eslint-plugin-react-hooks@latest --save-dev
  

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