How to change font size in VS Code sidebar?

To change the font size of the sidebar (including the Explorer and Search) in VS Code, you can follow these steps:

1. Open Settings: You can open the settings by clicking the gear icon in the bottom-left corner and selecting 'Settings'. The shortcut is typically Ctrl + , (Windows/Linux) or Cmd + , (Mac).

2. Modify User Settings: In the settings search box, type workbench and locate Workbench: Font Size. This setting controls the font size for the entire VS Code interface, including the sidebar. Enter the desired font size value.

3. Modify JSON Settings File: If you prefer to directly edit the JSON file, click the {} Open Settings (JSON) icon in the top-right corner of the settings interface. In the opened settings.json file, add or modify the following settings:

json
"workbench.fontAliasing": "auto",
"workbench.tree.indent": 20,
"workbench.iconTheme": "your-icon-theme",
"editor.fontSize": 18

Here, editor.fontSize controls the font size of the editor, while the size of the sidebar and other UI elements can be indirectly adjusted by modifying window.zoomLevel:

json
"window.zoomLevel": 1

By following these steps, you can adjust the font size of the VS Code sidebar and the entire interface as needed.

Example: In a previous project of mine, our development team included members with poor vision. To help them use VS Code more comfortably, we adjusted window.zoomLevel and editor.fontSize to make the interface more user-friendly. This adjustment significantly improved the team members' productivity.