Customizing the WebStorm Layout

Ekaterina Prigara

WebStorm layout has three types of major UI elements.

First of all, there’s the editor with the right and left gutters that show line numbers, status of VSC-modified lines, errors and warnings, and some other useful info.

Second, there are various tool windows such as the project view on the left with the project structure, the debugger tool window that displays when you start a debugging session, or the built-in terminal.

The third type of elements includes all the various bars like Navigation bar on the top or Status bar on the bottom. There’s also a Toolbar which is hidden by default, and a Tool buttons bar that shows icons corresponding to various tool windows.

Tip: You may notice numbers on the tool buttons; press Cmd+Number key / Alt-Number key to take you to the corresponding tool window.

You have a lot of flexibility in modifying the WebStorm layout. You can hide bars you don’t need via the View menu. You can also change the position of the tabs from the top to the left or right side of the editor, or hide them completely (see Preferences | Editor | General | Editor tabs).

All the tool windows can be dragged around, and they behave a bit different in various modes. In Docked mode, they stick to the side of the main IDE window, while in Floating mode they can be placed anywhere on the screen. To switch the mode, simply click the gear icon on the tool window.

One non-obvious thing here is that you can save your favorite layout as the default via the Window menu. Store the current layout as default, and then quickly go back to it if you’ve moved some things around by selecting Window | Restore default layout (or pressing Shift-F12).

With the Hide all tool windows action (Cmd-Shift-F12 / Ctrl+Shift+F12) you can maximize the editor and hide all the tool windows as the name suggest.

One next step you may want to try is the Distraction free mode. When you enable this mode, all the tool windows, side bars and even editor tabs are hidden, and you see only the code you’re working with. In other words, nothing distracts you anymore. To enable the Distraction free mode, select the View menu (or press Ctrl-` for the Quickly switch scheme popup) and then select Distraction free mode under View modes.

While working in the Distraction free mode, navigation between files is done with these shortcuts:

• Cmd-E / Ctrl+E for Recent files
• Cmd-Shift-O / Ctrl+Shift+N for Go to file
• Cmd-Alt-O / Ctrl+Alt-Shift+N for Go to symbol

The Full screen mode expands WebStorm to the full screen and hides the top menu.

For live coding sessions on big screens, consider the Presentation mode. Only the editor is shown, and the font and all the UI elements are larger in size.

– JetBrains WebStorm Team

Subscribe to WebStorm Blog updates

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!