VS CodeVS Code界面变模糊解决办法

VS Code等Electron系界面变模糊解决办法

  • 问题描述
    • 现象
    • 系统信息
  • 原因
  • 解决方法
    • 添加启动参数
    • 关闭MFAA或FXAA
    • 修改配置文件（仅在VS Code上验证）

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

问题描述

现象

如下图。
随着鼠标划动而变得十分模糊的VSCode界面
当鼠标在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系应用界面出现模糊1，更深层次的原因暂时未知。

解决方法

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

添加启动参数

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

code --disable-gpu

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

新版QQ版本号

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

QQ.exe --disable-gpu

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

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

VS Code快捷方式的属性
在目标一栏中添加--disable-gpu参数，填入如下内容。

"D:Program FilesMicrosoft VS CodeCode.exe" --disable-gpu

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

关闭MFAA或FXAA

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

显卡控制面板

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

以下的步骤来自VS Code的1.40版本更新说明2，仅在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官网 ??