如何阻止VS Code IntelliSense在函数名后自动插入={}

快速修复步骤： #

• 关闭函数调用自动补全设置
  打开VS Code设置（快捷键Ctrl+,/Cmd+,），搜索javascript.suggest.completeFunctionCalls和typescript.suggest.completeFunctionCalls，把这两个选项都关掉。这个设置原本是帮你补全函数调用的括号，但在JSX属性里传递函数引用时，会错误地嵌套多余的{}，导致<button onClick={func={}} />这种错误写法。

• 重载窗口确保设置生效
  打开命令面板（Ctrl+Shift+P/Cmd+Shift+P），输入Developer: Reload Window重启VS Code，让新设置立即生效。

进阶排查（如果上述方法无效）： #

• 检查项目配置文件
  确认项目根目录的jsconfig.json或tsconfig.json里正确配置了JSX和React类型：

  {
    "compilerOptions": {
      "jsx": "react-jsx",
      "types": ["react", "react-dom"]
    }
  }
  

  TypeScript项目还可以更新一下React类型依赖：

  npm install @types/react @types/react-dom --save-dev
  

• 清除VS Code缓存
  关闭VS Code，找到对应系统的缓存目录删除Cache和CachedData文件夹：

  • Windows：%APPDATA%\Code
  • macOS：~/Library/Application Support/Code
  • Linux：~/.config/Code
    重新打开VS Code后问题应该能解决。

问题原因： #

这次VS Code的更新调整了内置TypeScript/JavaScript语言服务的自动补全逻辑，函数调用补全的触发规则在JSX属性场景下出现了误判，把函数引用当成了函数调用，从而自动添加了多余的括号，导致嵌套{}的错误写法。

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