VSCode怎么让TSX文件自动导入React核心库-VSCode-PHP中文网

TSX 文件不自动导入 React 的根本原因是 TypeScript 语言服务未识别 JSX 上下文，需同时满足：文件被识别为 TypeScript React 模式、tsconfig.json 启用 "jsx": "react-jsx"、VSCode 设置开启 autoImports 和 includePackageJsonAutoImports。

vscode怎么让tsx文件自动导入react核心库

TSX 文件不自动导入 React，不是插件没装，而是 TypeScript 语言服务压根没识别出 JSX 上下文——它连 useState 是从哪来的都不知道，自然不会帮你加 import React from 'react'。

为什么 `import React` 不自动出现？

VSCode 的 TSX 自动导入依赖两个硬性前提：文件被识别为 TypeScript React 模式，且项目有有效的 tsconfig.json。常见失效场景包括：

右下角状态栏显示的是 TypeScript（纯 TS），不是 TypeScript React —— 这说明 VSCode 把 .tsx 当普通类型脚本处理，跳过了 JSX 支持
项目根目录没有 tsconfig.json，或里面没启用 JSX 相关配置（如 "jsx": "react-jsx"）
typescript.preferences.includePackageJsonAutoImports 没设为 "auto"，导致输入 useState 时无法反向推导要从 react 导入

`tsconfig.json` 必须包含的最小配置

哪怕你只写一个函数组件，也得让 TS 知道你在写 React。在项目根目录的 tsconfig.json 中至少确保有：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "lib": ["dom", "es2020"],
    "moduleResolution": "node"
  }
}

注意："jsx": "react-jsx" 是关键——它启用新的 JSX 转换，也是 TS 能识别 useState、useEffect 等来自 react 的 Hook 的前提。改完后务必运行命令面板里的 TypeScript: Restart TS server。

`settings.json` 中必须开启的三项

光有 tsconfig.json 不够，VSCode 编辑器本身也要“同意”自动插入 import。打开 settings.json，确认以下三行存在且值为布尔 true（不是字符串 "true"）：

React 组件生成器

根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。

下载

"typescript.suggest.autoImports": true
"typescript.preferences.includePackageJsonAutoImports": "auto"（注意值是字符串 "auto"，不是布尔）
"files.associations": { "*.tsx": "typescriptreact" } —— 强制把所有 .tsx 文件绑定到 TypeScript React 语言模式

如果已装 ES7+ React/Redux/React-Native snippets，建议暂时禁用它——它的代码片段会劫持 Ctrl+Space 补全，盖掉原生的 import 建议。

验证是否生效的快速方式

新建一个 Test.tsx，输入 us 然后按 Tab（如果装了 snippets）或直接输 useState 后按 Enter：

若顶部自动加上 import { useState } from 'react'; → 成功
若只补全了 useState 但没 import，且 Ctrl+. 无反应 → 检查右下角语言模式是否为 TypeScript React，再检查 TS Server 是否重启
若提示 “Cannot find name ‘useState’”，说明 tsconfig.json 的 "jsx" 配置未生效或路径不对

最常被忽略的一点：VSCode 不读 vite.config.ts 或 webpack.config.js 里的 alias，它只认 tsconfig.json。哪怕你用 @/hooks 写得飞起，只要 tsconfig.json 里没配 baseUrl 和 paths，自动导入就找不到目标模块。