Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

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.

like image 873
Merchako Avatar asked Oct 18 '17 14:10

Merchako


People also ask

How to resize editor window without resizing the whole interface?

- 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.

How to configure vs code editor?

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.

Does VSCode ever resize the sidebar back to normal size?

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.

What is the user interface of Visual Studio Code?

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.


2 Answers

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.

like image 105
Mark Avatar answered Oct 18 '22 08:10

Mark


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.

like image 23
Yash Kochar Avatar answered Oct 18 '22 08:10

Yash Kochar