如何配置VSCode以检测React中useCallback/useEffect的依赖缺失错误

要让VSCode在你忘记给useCallback或useEffect添加依赖项时提示错误，核心是通过ESLint的官方React Hooks规则实现，具体步骤如下：

• 安装VSCode的ESLint扩展
  打开VSCode扩展商店，搜索并安装「ESLint」插件，这是实现实时代码检查的基础。

• 添加React Hooks ESLint规则
  如果你的项目还没安装eslint-plugin-react-hooks，先通过包管理器安装：

  npm install eslint-plugin-react-hooks --save-dev
  # 或者用yarn
  yarn add eslint-plugin-react-hooks --dev
  # 或者pnpm
  pnpm add eslint-plugin-react-hooks -D
  

  然后在项目的ESLint配置文件（比如.eslintrc.js、.eslintrc.json，或是package.json里的eslintConfig字段）中启用规则：

  // .eslintrc.js示例
  module.exports = {
    plugins: ['react-hooks'],
    rules: {
      // 检查钩子的基本使用规范（比如不能在条件语句中调用）
      'react-hooks/rules-of-hooks': 'error',
      // 强制检查依赖项缺失，设为"error"会直接提示错误
      'react-hooks/exhaustive-deps': 'error'
    }
  };
  

  注意：如果你的项目是用Create React App创建的，这个规则已经默认配置好了，只需确保ESLint插件正常启用即可。

• 配置VSCode实时检查
  打开VSCode的设置（快捷键Ctrl+,或Cmd+,），在settings.json中添加以下配置，确保ESLint对React文件生效并实时提示：

  {
    "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
    "eslint.enable": true,
    // 可选：开启保存时自动修复可修复的ESLint问题
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  }
  

完成以上配置后，当你遗漏useEffect或useCallback的必要依赖项时，VSCode会立即显示红色波浪线错误提示，鼠标悬停还能看到具体的缺失依赖说明。

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