Ubuntu 下 VS Code 渲染白屏问题

文章作者: Xizao Wang

发布时间: 2019-11-24, 11:14:10

最后更新: 2019-12-07, 00:02:35

原始链接: https://wangxiz.github.io/blog/posts/vscode-render-blank-under-ubuntu/ 

我的 Ubuntu 16.04 上的 VS Code 在最近升级到 1.40.1 版本之后, 打开之后一直显示白屏. 但 VS Code 并不是处于卡死的状态, 因为菜单栏中的菜单项还是可以点击操作的, 只是编辑器的主体部分全部为白色, 如下图:

一开始我以为是升级的过程中出了问题, 简单, 那就重装嘛! 因为我的 VS Code 是用 snap 安装的, 我就先用:

卸载了之前的安装, 然后用:

重新安装, 打开新安装的 VS Code, 依然白屏…

那会不会是 snap 的安装包的问题呢? 要不用 apt 试试?

于是我把 snap 版 VS Code 卸载了, 直接去官网下载了 VS Code 的 deb 安装包, 然后用:

重新安装了 VS Code, 再次打开, 问题依然在…

那看来应该不是安装包的问题了, 我又回去仔细看了看处于白屏状态的 VS Code, 这才意识到可能是渲染的问题. 于是去 Google 搜索了相关的关键字, 在 VS Code 官方文档中找到了问题所在:

The Electron shell used by Visual Studio Code has trouble with some GPU (graphics processing unit) hardware acceleration. If VS Code is displaying a blank (empty) main window, you can try disabling GPU acceleration when launching VS Code by adding the Electron –disable-gpu command-line switch.

大家都知道 VS Code 是基于 Electron 框架开发的, 而我们这里遇到的白屏, 简单来说就是 VS Code 使用的 Electron shell 对于某些 GPU 硬件加速存在一些问题, 因此禁用 GPU 硬件加速就能解决这个问题了.

如果要从命令行启动 VS Code 并禁用 GPU 硬件加速, 我们只需要为 code 命令添加参数 --disable-gpu 即可:

每次运行都要加参数的话, 有点麻烦, 我们可以在 shell 配置文件 (.zshrc, .bashrc 等) 中添加一行:

重新打开 Terminal 或者手动加载配置文件, 关闭所有已打开的 VS Code 实例之后, 就可以正常通过 code 命令从命令行启动 VS Code 了.

在 GUI 界面下, 大多数用户可能还是习惯从 Launcher 启动应用. 但要从 Launcher 启动的话, 上面的 alias 就不起作用了, 因为 Launcher 并不是从 shell 里面去调用 code 命令来启动 VS Code 的.

在 Ubuntu 中, 桌面应用是通过桌面启动器来进行启动的, 每个桌面应用都对应着一个后缀为 .desktop 的桌面启动器, 类似于 Windows 下的快捷方式. 相应地, 我们需要修改 VS Code 对应的 code.desktop 启动器文件来设置启动参数.

 Note 对于使用 apt 安装的 VS Code, 其启动器文件路径为 /usr/share/applications/code.desktop; 对于使用 snap 安装的 VS Code, 其启动器文件路径为 ~/.local/share/applications/code.desktop.

code.desktop 内容为:

对 .desktop 启动器文件格式感兴趣的同学可以移步 Desktop Entry Specification, 这里不做过多介绍, 只关注我们需要修改的 Exec 条目部分. 我们只需要为启动器文件中的两个 Exec 条目分别加上 --disable-gpu 参数即可:

修改后, 关闭已打开的所有 VS Code 实例, 然后重新从 Launcher 打开 VS Code 就可以正常运行了.

 Warning 上述方式不能做到一劳永逸, 因为在升级 VS Code 时会自动重置 code.desktop 启动器, 重置之后我们手动添加的 --disable-gpu 参数就没有了. 因此, 这种方式在每次更新 VS Code 之后, 都需要我们手动重新修改 .desktop 启动器.

从 VS Code v1.40 开始, 提供了一个关闭 GPU 硬件加速的 flag, 设置这个 flag 之后就不需要再传递 --disable-gpu 参数了.

We have heard issue reports from users that seem related to how the GPU is used to render VS Code’s UI. These users have a much better experience when running VS Code with the additional –disable-gpu command-line argument. Running with this argument will disable the GPU hardware acceleration and fall back to a software renderer. To make life easier, you can add this flag as a setting so that it does not have to be passed on the command line each time.

可以通过以下四个步骤来设置 flag:

但文档中也提到不要随便设置这个 flag, 除非你遇到了这里说的 GPU 硬件加速导致的渲染问题.

 Warning Do not use this setting unless you are seeing issues!

修改配置之后, 就可以正常使用 VS Code 啦! 效果图如下: