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 并不是处于卡死的状态, 因为菜单栏中的菜单项还是可以点击操作的, 只是编辑器的主体部分全部为白色, 如下图:

 

系统环境

• 主机: macOS Catalina (10.15.1)
• 虚拟机程序: Parallels Desktop 15 for Mac Home Edition (15.1.1)
• 虚拟机: Ubuntu 16.04.6 LTS 64-bit
• VS Code 版本: 1.40.1
• apt 版本: 1.2.32 amd64
• snap 版本: 2.42.1

原因探究

snap 重装 VS Code

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

1	sudo snap remove code

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

1	sudo snap install code --classic

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

apt 重装 VS Code

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

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

1	sudo apt install ./code-1.40.1-1573664190_amd.deb

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

禁用 GPU 硬件加速

那看来应该不是安装包的问题了, 我又回去仔细看了看处于白屏状态的 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 即可:

1	$ code --disable-gpu

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

1	alias code="code --disable-gpu"

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

Launcher 启动

在 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 内容为:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

[Desktop Entry] Name=Visual Studio Code Comment=Code Editing. Redefined. GenericName=Text Editor Exec=/usr/share/code/code --unity-launch %F Icon=/usr/share/pixmaps/com.visualstudio.code.png Type=Application StartupNotify=false StartupWMClass=Code Categories=Utility;TextEditor;Development;IDE; MimeType=text/plain;inode/directory; Actions=new-empty-window; Keywords=vscode; X-Desktop-File-Install-Version=0.22 [Desktop Action new-empty-window] Name=New Empty Window Exec=/usr/share/code/code --new-window %F Icon=/usr/share/pixmaps/com.visualstudio.code.png

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

1 2 3 4

[Desktop Entry] Exec=/usr/share/code/code --unity-launch --disable-gpu %F [Desktop Action new-empty-window] Exec=/usr/share/code/code --new-window --disable-gpu %F

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

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

修改 argv.json 配置文件

从 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:

• 打开命令面板 (Ctrl + Shift + P);
• 运行 “首选项: 配置运行时参数” 命令, 该命令将打开 argv.json 运行时参数配置文件;
• 向配置文件 argv.json 中添加项 "disable-hardware-acceleration": true;
• 重启 VS Code.

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

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

总结

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

 

参考资料

• Visual Studio Code FAQ | VS Code is blank?
• Desktop files: putting your application in the desktop menus
• GNOME Doc | Desktop Entry Specification
• Desktop Entry Specification — Specifications for creating a desktop file
• Display error with Visual Studio Code under Ubuntu
• How can I disable GPU rendering in Visual Studio Code
• VS Code Update 1.40.1 | Disable GPU acceleration