Ubuntu 22.04 下调整 VS Code 界面及字体教程

一、前言

[二、VS Code 里的"大小"不是一个设置控制全部](#二、VS Code 里的“大小”不是一个设置控制全部)

[1. 工作台界面（Workbench）](#1. 工作台界面（Workbench）)

[2. 编辑器区域（Editor）](#2. 编辑器区域（Editor）)

[3. 终端区域（Terminal）](#3. 终端区域（Terminal）)

[三、Ubuntu 22.04 下最常用的调整思路](#三、Ubuntu 22.04 下最常用的调整思路)

1.最实用的方案

2.对比误区表

[四、第一步：调整 VS Code 整体页面大小](#四、第一步：调整 VS Code 整体页面大小)

[1. 操作方法](#1. 操作方法)

[2. 常见取值说明](#2. 常见取值说明)

[3. 建议](#3. 建议)

五、第二步：单独把代码编辑区字体调回合适大小

六、第三步：调整终端字体，避免和页面不协调

七、整理总结

一、前言

在 Ubuntu 22.04 上安装 VS Code 之后，很多人都会遇到一个很常见的问题：界面比例不合适。

有时候是整体页面太大，看起来很拥挤；有时候是代码区字体合适了，但侧边栏字体又显得太大或太小；还有时候是终端、资源管理器、菜单栏显示比例不统一，导致整个开发界面看起来不协调。

尤其是在 Ubuntu 22.04 环境下，如果系统本身设置了缩放，再叠加 VS Code 自身的界面缩放，就很容易出现：

页面整体偏大
左侧资源管理器字体不协调
编辑区和侧边栏大小不一致
终端字体显示突兀
调了一个地方，另一个地方又乱了

因此，本文结合实际使用经验，系统总结一下：如何在 Ubuntu 22.04 下调整 VS Code 的页面缩放、编辑区字体、终端字体，以及如何让侧边栏字体相对变小，使整个界面更加协调舒适。

二、VS Code 里的"大小"不是一个设置控制全部

很多人刚开始会以为，VS Code 里只要改一个"字体大小"就可以了。实际上并不是这样。

VS Code 的显示大致可以分成几部分：

1. 工作台界面（Workbench）

也就是 VS Code 本身的界面元素，包括：

顶部菜单栏
左侧活动栏
左侧侧边栏（资源管理器、搜索、源代码管理等）
底部状态栏
底部面板（终端、输出、问题等）

2. 编辑器区域（Editor）

也就是你真正写代码的区域。

3. 终端区域（Terminal）

集成终端的字体和显示比例是可以单独设置的。

也就是说，VS Code 的"页面大小"和"代码字体大小"并不是同一个东西 。

如果你只是改 editor.fontSize，那只会影响代码区；

如果你改 window.zoomLevel，那会影响整个界面，包括侧边栏、菜单栏、编辑器和终端。

所以，如果你的需求是：

Ubuntu 22.04 下 VS Code 整体页面需要调整，但又希望侧边栏字体相对小一点

那么正确思路不是只改一个设置，而是要组合调整。

三、Ubuntu 22.04 下最常用的调整思路

1.最实用的方案

一般来说，最实用的方案是：

先用 window.zoomLevel 调整整体页面比例
再用 editor.fontSize 单独控制代码区字体
用 terminal.integrated.fontSize 调整终端
通过整体缩放与编辑区字体配合，让侧边栏视觉上相对更小、更协调

这是最稳定、最通用的方法。

2.对比误区表

四、第一步：调整 VS Code 整体页面大小

如果你觉得 Ubuntu 22.04 下 VS Code 整个页面都太大或者太小，首先调整的是：

bash 复制代码

"window.zoomLevel": 0

1. 操作方法

打开 VS Code：

点击左下角齿轮
进入 Settings
搜索 zoom level

或者直接打开 settings.json 进行修改。

2. 常见取值说明

bash 复制代码

// 表示整体缩小一档
"window.zoomLevel": -1

// 表示默认大小
"window.zoomLevel": 0

// 表示整体放大一档
"window.zoomLevel": 1

3. 建议

我当前感觉：

整个页面太小
左侧侧边栏太窄

我是调整：

bash 复制代码

"window.zoomLevel": 2

这样会把整个 VS Code 页面调大一点，包括侧边栏、菜单栏、编辑区、终端都会一起变大。

五、第二步：单独把代码编辑区字体调回合适大小

整体页面变大后，左侧侧边栏通常会变得更协调，但代码区可能会显得偏大。

这时保持整体页面不动，单独改编辑器字体：

bash 复制代码

// 根据自己选择调整 "editor.fontSize"
"editor.fontSize": 16

因为目前 VS Code 对侧边栏字体并没有一个非常稳定、通用、官方推荐的独立字体大小设置，所以实际使用中，最有效的方法就是通过整体缩放 + 编辑器字体单独补偿 来实现。

六、第三步：调整终端字体，避免和页面不协调

很多人把页面和代码区调好了，却发现底部终端又太小或者太大。

这是因为终端字体也是独立控制的。

可以在 settings.json 里添加：

bash 复制代码

// 终端字体大小："terminal.integrated.fontSize 
"terminal.integrated.fontSize": 14

七、整理总结

在 Ubuntu 22.04 下使用 VS Code 时，如果你觉得页面比例不合适，尤其是想让侧边栏字体相对大一点、界面更协调，最实用的方式并不是去寻找某个"万能设置"，而是采用分层调整的方法：

用 window.zoomLevel 控制整体页面大小

用 editor.fontSize 单独控制代码区字体

用 terminal.integrated.fontSize 调整终端字体

通过整体缩小 + 编辑区补偿，实现侧边栏视觉上更小、更协调