【VS Code】VS Code界面变模糊解决办法

最近遇到VS Code、新版QQ等Electron系应用界面模糊的问题，在网上搜索各路大神和官方提供的解决方法，将自己验证过的方法总结记录一下。

问题描述

现象

如下图。

当鼠标在VS Code的界面上划过，或是拖动这个窗口时总是会导致界面变得十分模糊。

系统信息

版本: 1.80.1 (system setup)
提交: 74f6148eb9ea00507ec113ec51c489d6ffb4b771
日期: 2023-07-12T17:22:07.651Z
Electron: 22.3.14
ElectronBuildId: 21893604
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Windows_NT x64 10.0.22621

原因

显卡的FXAA平滑处理或多帧采样AA（MFAA）导致Electron系应用界面出现模糊¹，更深层次的原因暂时未知。

解决方法

关闭GPU硬件加速渲染的功能²，或者仅关闭FXAA¹或MFAA即可。不同的方法列举如下。

添加启动参数

在打开VS Code时添加--disable-gpu参数²，比如在VS Code安装目录通过如下命令启动VS Code：

code --disable-gpu

此方法的优点是比较通用，可以仅修改需要修改的应用程序启动参数。比如在新版PC端QQ³发布后，我安装完新版QQ（版本号9.9.0，如下图）在使用过程中也遇到了跟VS Code同样界面变模糊的问题。

当在QQ安装目录使用以下命令打开时，QQ界面也变正常了。

QQ.exe --disable-gpu

顺带还能看到新版QQ的运行时log😂。

如果觉得通过命令行打开太麻烦，可以将其做成脚本放在桌面上双击打开，或者直接修改桌面快捷方式如下图。

在目标一栏中添加--disable-gpu参数，填入如下内容。

"D:\Program Files\Microsoft VS Code\Code.exe" --disable-gpu

点击应用，如果弹出窗口提示“需要提供管理员权限来更改这些设置”的话，选择“继续”即可。

关闭MFAA或FXAA

打开显卡的控制面板，将MFAA和FXAA关闭，点击应用，再重启界面模糊的应用即可。

修改配置文件（仅在VS Code上验证）

以下的步骤来自VS Code的1.40版本更新说明²，仅在VS Code上验证有效。

1. 打开命令面板（Ctrl + Shift + P）。
2. 运行Preferences: Configure Runtime Arguments命令。
3. 此命令会打开一个名为argv.json的文件来配置运行时参数。你将看到已经存在一些默认的参数。
4. 添加"disable-hardware-acceleration": true。
5. 重启VS Code。

实际上我运行上面提到的命令后打开的argv.json文件内容如下所示：

// This configuration file allows you to pass permanent command line arguments to VS Code.
// Only a subset of arguments is currently supported to reduce the likelihood of breaking
// the installation.
//
// PLEASE DO NOT CHANGE WITHOUT UNDERSTANDING THE IMPACT
//
// NOTE: Changing this file requires a restart of VS Code.
{
	// Use software rendering instead of hardware accelerated rendering.
	// This can help in cases where you see rendering issues in VS Code.
	// "disable-hardware-acceleration": true,

	// Allows to disable crash reporting.
	// Should restart the app if the value is changed.
	"enable-crash-reporter": true,

	// Unique id used for correlating crash reports sent from this instance.
	// Do not edit this value.
	"crash-reporter-id": "02c6b944-323f-408b-9f18-287459680fe8",
	"locale": "zh-cn"
}

是JSON with Comments 的格式，所以只需要取消"disable-hardware-acceleration": true的注释即可，最终保存的argv.json文件内容如下:

// This configuration file allows you to pass permanent command line arguments to VS Code.
// Only a subset of arguments is currently supported to reduce the likelihood of breaking
// the installation.
//
// PLEASE DO NOT CHANGE WITHOUT UNDERSTANDING THE IMPACT
//
// NOTE: Changing this file requires a restart of VS Code.
{
	// Use software rendering instead of hardware accelerated rendering.
	// This can help in cases where you see rendering issues in VS Code.
	"disable-hardware-acceleration": true,

	// Allows to disable crash reporting.
	// Should restart the app if the value is changed.
	"enable-crash-reporter": true,

	// Unique id used for correlating crash reports sent from this instance.
	// Do not edit this value.
	"crash-reporter-id": "02c6b944-323f-408b-9f18-287459680fe8",
	"locale": "zh-cn"
}

需要注意的是官方不建议在没有出对应问题的时候添加此参数。

---

1. 关于VSCode和electron系软件字体发虚的解决办法 ↩︎ ↩︎

2. VS Code 1.40版本官方更新说明 ↩︎ ↩︎ ↩︎

3. 新版QQ官网 ↩︎