让vscode远程开发也可以图形显示

0. 摘要

vscode登录远程服务器进行开发遇到图形显示需求时，该怎么处理？一般有几种方式：

1. 保存下来查看
2. jupyter内置的inline图像渲染
3. jupyter+浏览器
4. matplot后端改用webapp
5. ssh X11转发

1. 保存查看

略

2. jupyter内置inline渲染

1. 指定inline后端
2. python示例

   %matplotlib inline  # Jupyter Magic 命令，强制内联显示图像
   import matplotlib.pyplot as plt
   plt.plot([1, 2, 3])
   plt.show()
   

3. jupyter+浏览器

1. 启动jupyter lab

   jupyter lab
   

2. 浏览器打开jupyter

4. matplot修改后端

适用场景：需要交互式绘图（如缩放、保存），但无需 X11 转发。
步骤：

1. 在代码中指定 WebAgg 后端：

   import matplotlib
   matplotlib.use('WebAgg')  # 使用基于 Web 的交互式后端
   

2. python示例代码

   import matplotlib.pyplot as plt
   plt.plot([1, 2, 3])
   plt.show()  # 自动弹出浏览器窗口显示图像
   

3. 访问图形界面：
   - 运行代码后，VS Code 会自动在 内置浏览器 或默认浏览器中打开交互式图表页面。

5. SSH X11转发[※]

适用场景：有独立弹窗需要显示

步骤：

1. PC端安装VcXsrv[1]
2. 运行XLaunch
3. 设置display number或者保持默认

5. 查看DISPLAY

6. vscode添加环境变量
   打开Settings,设置terminal.integrated.env.windows，添加DISPLAY（此处为上一步查看到的DISPLAY）

       "terminal.integrated.env.windows": {
           "DISPLAY":"localhost:0.0"
       }
   

7. SSH登录设置

   1. 安装remote-ssh插件
   2. 新建remote连接
      SSH Connection Command, 如: ssh hello@microsoft.com -XY(配置x11转发)
      添加的配置如下：

      Host xx.xx.xx.xx
        HostName xx.xx.xx.xx
        User username
        **ForwardX11 yes**
        *ForwardX11Trusted yes*
      

8. 在 VS Code 中测试 X11 转发：

   1. 连接远程服务器后，打开终端运行：
   2. bash

      echo $DISPLAY  # 应输出类似 localhost:10.0
      xeyes          # 测试图形窗口是否弹出
      

6. 参考

[1] VcXsrv下载
[2] VS code remote x11 cant get DISPLAY while connecting to remote server