如何在VS Code的Jupyter Notebook中显示交互式IPyWidgets？

检查VS Code及扩展版本 #

• 确保VS Code为最新版本，旧版本可能存在渲染兼容漏洞
• 更新Jupyter扩展至最新版，这是VS Code处理交互式笔记本的核心组件
• 确认IPyWidgets扩展已安装（在VS Code扩展商店搜索ipywidgets）

配置Jupyter服务器参数 #

• 打开VS Code设置（快捷键Ctrl+,），搜索Jupyter: Widget Scripts Enabled，确保该选项处于勾选状态
• 搜索Jupyter: Use Legacy Renderer，切换该选项的勾选状态后重启VS Code，再测试组件渲染效果

验证Python环境依赖 #

• 在当前使用的Python环境中，确保ipywidgets和jupyterlab-widgets包版本匹配且为最新：

  pip install --upgrade ipywidgets jupyterlab-widgets
  

• 执行jupyter nbextension enable --py widgetsnbextension，手动触发组件扩展启用（VS Code通常自动处理，但可排除配置异常）

调整代码渲染逻辑 #

• 尝试用容器组件统一渲染复选框，避免循环中多次调用display导致的渲染异常，修改代码如下：

  # 替换原循环display的代码块
  from ipywidgets import VBox
  # 用VBox容器统一展示所有复选框
  display(VBox(checkboxes))
  # 后续绑定事件逻辑不变
  for chkBx in checkboxes:
      chkBx.observe(changed, names=['value'])
  

清除Jupyter缓存 #

• 打开命令面板（快捷键Ctrl+Shift+P），执行Jupyter: Clean Jupyter Cache清除缓存冲突
• 重启VS Code后重新打开笔记本测试

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