In Microsoft's VS Code, I can zoom in and out with the keyboard shortcuts ⌘+
and ⌘-
. These commands affect the entire interface, such as the file explorer and both editor windows.
I'd like a way to zoom in and out of only the active editor window. How can I do this?
Clarification: I don't want to change the window size. I only want to change the apparent font size of the text I'm editing.
- Stack Overflow VS Code: How to resize editor window without resizing the whole interface? In Microsoft's VS Code, I can zoom in and out with the keyboard shortcuts ⌘+ and ⌘-. These commands affect the entire interface, such as the file explorer and both editor windows.
VS Code gives you many options to configure the editor. From the View menu, you can hide or toggle various parts of the user interface, such as the Side Bar, Status Bar, and Activity Bar. Hide the Menu Bar (Windows, Linux) # You can hide the Menu Bar on Windows and Linux by changing the setting window.menuBarVisibility from classic to toggle.
That's it! It is now resized back to appropriate size based on the contents of the sidebar and viewport size. Peace! Neat! VSCode forgets the pane sizes when I disconnect and reconnect my 2nd monitor, because it's forced to move to the smaller laptop screen.
User Interface. At its heart, Visual Studio Code is a code editor. Like many other code editors, VS Code adopts a common user interface and layout of an explorer on the left, showing all of the files and folders you have access to, and an editor on the right, showing the content of the files you have opened.
As I mentioned in the comments shortly after the original post, you can change the font-size for the editors. That change will not affect other parts of the UI like the activity bar or explorer. But it will affect all editors, not only the active one.
Open the user settings (either by clicking the gear icon in the lower left or by Ctrl-,) and entering, in the split pane for entering user settings, modify:
"editor.fontSize": 18,
EDIT: As of v1.24 you can now zoom only the editors (and not the entire interface). See font zoom controls.
Font zoom commands have been added and they increase or decrease the font size of the editor while the rest of VS Code UI is left as-is. This feature is very handy for presentations and pair-programming.
Use the following keybindings to replace the default global zoom actions:
on macOS:
{ "key": "cmd+numpad_add", "command": "editor.action.fontZoomIn" },
{ "key": "shift+cmd+=", "command": "editor.action.fontZoomIn" },
{ "key": "cmd+=", "command": "editor.action.fontZoomIn" },
{ "key": "cmd+numpad_subtract", "command": "editor.action.fontZoomOut" },
{ "key": "shift+cmd+-", "command": "editor.action.fontZoomOut" },
{ "key": "cmd+-", "command": "editor.action.fontZoomOut" },
{ "key": "cmd+numpad0", "command": "editor.action.fontZoomReset" },
{ "key": "cmd+0", "command": "editor.action.fontZoomReset" },
on Windows and Linux:
{ "key": "ctrl+numpad_add", "command": "editor.action.fontZoomIn" },
{ "key": "shift+ctrl+=", "command": "editor.action.fontZoomIn" },
{ "key": "ctrl+=", "command": "editor.action.fontZoomIn" },
{ "key": "ctrl+numpad_subtract", "command": "editor.action.fontZoomOut" },
{ "key": "shift+ctrl+-", "command": "editor.action.fontZoomOut" },
{ "key": "ctrl+-", "command": "editor.action.fontZoomOut" },
{ "key": "ctrl+numpad0", "command": "editor.action.fontZoomReset" },
{ "key": "ctrl+0", "command": "editor.action.fontZoomReset" },
You need to add those keybindings in order to override existing zoom controls using the same bindings - otherwise you will get the old behavior of the entire interface zooming.
There is a way of doing that, but that's not a fast way as zoom-in and zoom-out. You can change the font-size setting in setting file.
Goto File -> Preferences -> Settings
In editor section of the file, there is a property font-size
. You have to edit it as per your requirement and then save the file.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With