TypeScript的.tsx文件保存时addMissingImports重复导入React问题

我来帮你搞定这个保存代码时自动额外添加import React from "react";的麻烦事儿。其实核心原因是你的TypeScript配置和工具链还没适配React 17+推出的自动JSX转换特性，导致source.addMissingImports功能误以为TSX文件必须显式导入React。下面是一步步的解决方案：

1. 确认你的React版本（关键前提） #

首先确保你的项目使用的是React 17或更高版本——这个版本开始，React官方支持不需要手动导入React就能写JSX的语法，底层会自动处理JSX转换。

2. 修改TypeScript配置（tsconfig.json） #

打开项目根目录的tsconfig.json，调整以下两个关键配置：

• 将jsx编译选项设置为react-jsx（生产环境）或react-jsxdev（开发环境），这两个模式对应新的自动JSX转换，不需要显式导入React。
• 确保lib数组包含DOM，保证TSX语法有正确的类型支持。

示例配置片段：

{
  "compilerOptions": {
    "jsx": "react-jsx", // 开发环境可换成react-jsxdev
    "lib": ["ESNext", "DOM"],
    "target": "ESNext",
    "module": "ESNext",
    // 其他你的原有配置...
  }
}

3. 调整ESLint规则（如果使用ESLint） #

如果你用了ESLint的React插件，默认的react/react-in-jsx-scope规则会要求你导入React才能写JSX，这和新的转换特性冲突。需要在.eslintrc.json（或类似配置文件）里把这个规则关掉：

{
  "extends": [
    // 你的其他extends配置，比如react-app、eslint:recommended等
  ],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

4. 验证VS Code的保存动作配置 #

你的现有editor.codeActionsOnSave配置没问题，但如果上述步骤完成后还是偶尔出现重复导入，可以尝试：

• 暂时启用source.organizeImports（去掉注释），它会自动合并重复的导入语句，不过记得保存后如果不需要可以再关掉。
• 重启VS Code，确保配置修改生效。

这样调整后，TSX文件保存时就不会再自动添加多余的import React from "react";了，同时source.addMissingImports依然能正常帮你添加其他需要的导入。

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