Visual Studio Code React项目quick fix import功能失效解决咨询

• 第一步：开启编辑器内置自动导入基础配置
  打开VS Code设置（快捷键Ctrl+,Windows/Linux，Cmd+,Mac），搜索以下配置项，确保全部开启：
  • javascript.suggest.autoImports：设置为启用
  • javascript.updateImportsOnFileMove.enabled：设置为always
  • typescript.suggest.autoImports：即使是JS/JSX项目也需要开启该配置，适配跨语法提示逻辑
  • editor.suggest.showImports：设置为启用
• 第二步：添加项目结构识别配置文件
  VS Code的智能导入功能依赖配置文件识别项目范围，在项目根目录新增对应配置：
  • 纯JS/JSX项目新建jsconfig.json，填入以下内容：

    {
      "compilerOptions": {
        "module": "ESNext",
        "target": "ES6",
        "jsx": "react",
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true
      },
      "exclude": ["node_modules", "build"]
    }
    

  • TS/TSX项目直接在已有的tsconfig.json中补充上述compilerOptions字段的对应配置即可
• 第三步：排查扩展冲突
  你安装的多类代码片段扩展可能会拦截默认提示逻辑，按以下步骤排查：
  • 临时禁用所有非必要扩展，仅保留ESLint后逐个重新启用，定位冲突扩展后关闭对应扩展的「覆盖默认提示」配置，或直接卸载老旧未更新的同类扩展
  • 关闭npm intellisense扩展的「覆盖内置模块提示」选项，优先使用VS Code内置的模块识别逻辑
• 第四步：配置粘贴触发自动导入
  打开VS Code的settings.json配置文件，新增以下配置项：

  "editor.codeActionsOnSave": {
    "source.addMissingImports": true
  },
  "javascript.autoImportsOnPaste": true
  

  注：javascript.autoImportsOnPaste是VS Code 1.69及以上版本支持的功能，版本过低请先升级编辑器
• 第五步：功能验证
  重启VS Code后，粘贴使用了未导入依赖的React代码，稍等1-2秒就会弹出自动导入提示，按回车/Tab即可自动生成导入语句；也可以在未导入的标识符上按Ctrl+.（Windows/Linux）/Cmd+.（Mac）手动触发导入操作

内容的提问来源于stack exchange，提问作者Philipos D.