VSCode React开发技巧_常用Hooks提示与代码补全-VSCode-PHP中文网

vs code 的 react hooks 补全依赖 typescript 类型信息、正确 tsconfig.json 配置及 eslint/prettier 协同；自定义 hook 需有类型声明且被 ts 服务扫描，路径别名需 baseurl/paths 配置，tsserver 崩溃会导致补全退化。

vscode react开发技巧_常用hooks提示与代码补全

VS Code 对 React Hooks 的补全不是靠“猜”或“关键词匹配”，而是依赖 TypeScript 类型信息 + 正确的 tsconfig.json 配置 + Prettier/ESLint 插件协同推导。没配对，useEffe 按 Ctrl+Space 就真不会弹出 useEffect。

React Hooks 补全为什么只显示 useState、useRef，不提示自定义 Hook？

VS Code 默认只识别 React 官方导出的 Hook（来自 react 包），对项目内或 node_modules 中的自定义 Hook（如 useApi、useAuth）无感知，除非它们有明确的类型声明。

确保自定义 Hook 文件以 .ts 或 .tsx 结尾，并导出带完整返回类型的函数，例如：export function useApi<t>() : { data: T | null; loading: boolean }</t>
如果 Hook 来自第三方库（如 @tanstack/react-query），确认该库已安装且 node_modules/@tanstack/react-query 下存在 dist/react-query.d.ts 或类似类型文件
检查 tsconfig.json 中的 "include" 是否包含 Hook 所在目录（如 "src/hooks/**/*"），否则 TS 语言服务根本不会扫描它

useEffect/useMemo/useCallback 参数签名不提示？

这是典型“TS 类型未激活”表现：编辑器把文件当做了普通 JS，而非受控的 TypeScript 上下文。

React Native Skills

{"answer":"构建高性能移动应用的 React Native 与 Expo 最佳实践。适用于构建组件、优化列表性能、实现……"}

下载

右下角状态栏确认语言模式是 TypeScript React（不是 JavaScript React 或 Plain Text）
项目根目录必须存在 tsconfig.json（哪怕内容只是 {}），否则 VS Code 启动的是“无类型 JS 语言服务”，useEffect 只会提示函数名，不显示参数重载
若用 jsconfig.json（JS 项目），需显式开启类型检查："compilerOptions": { "checkJs": true, "allowJs": true }，否则无法推导 Hook 签名
禁用旧版扩展如 Reactjs code snippets，它常劫持 . 触发逻辑，干扰 TS Server 的语义补全

路径别名（@/hooks）补全失效，import 时看不到自定义 Hook？

路径补全和符号跳转共用同一套解析逻辑——全靠 tsconfig.json 的 baseUrl 和 paths 配置驱动，不是文件系统模糊匹配。

确认 tsconfig.json 中有如下配置：

"compilerOptions": {
  "baseUrl": "src",
  "paths": {
    "@/*": ["*"],
    "@/hooks/*": ["hooks/*"]
  }
}

修改后必须执行命令：Developer: Restart Language Server（不要只刷新窗口）
多根工作区（multi-root workspace）中，每个子文件夹需独立拥有 tsconfig.json；父级配置不会透传
别名仅对当前 workspace 有效；若 Hook 在 symlink 目录或 lerna monorepo 的 packages/ 下，需在对应 package 内补一个 tsconfig.json

最常被忽略的是：即使所有配置都对，只要 typescript-language-server 进程崩溃（比如因内存溢出或版本冲突退出），补全就退化为纯字符串匹配。打开 Output 面板，切换到 TypeScript 标签页，看有没有 TSServer exited 日志——有，就得查 node_modules/typescript 版本是否与 VS Code 内置 TS 版本兼容，而不是重装插件。