Customizing the WebStorm layout

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

ws-mininalistic-layout

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.

ws-distraction-free-mode

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

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Cool Feature and tagged . Bookmark the permalink.

11 Responses to Customizing the WebStorm layout

  1. Dan Gamble says:

    Ever since you added the distraction free mode i really struggle coding without it, love how i’m left with just the code nothing else not even line numbers but i still get all the popup’s i need as well, love it! :D

  2. Jackie McGhee says:

    When tabs are hidden, you can’t move files right or down using the command palette. That’s quite annoying.

    • Ekaterina Prigara says:

      Do you mean splitting the editor horizontally or vertically and moving file to the different split?

      • Jackie McGhee says:

        Yes, it’s as if it only has one buffer on the go when tabs are hidden. You can see this when you press CTRL-F4 to close the current buffer, it doesn’t show any other file you might have opened in the same session, it shows the Search Everywhere, Project View, Go to File etc. list.

        Splitting the current window works fine because it shows the same file in each buffer, but not moving your current file to a split buffer and showing another in the original buffer. If tabs are set to display, everything works as expected.

        • Ekaterina Prigara says:

          I’ve consulted with the colleagues responsible for the editor behavior. Move Right/Move Down actions are available only with tabs enabled, that was made by design. When you hide tabs, that’s equivalent to setting tab limit to 1 in each split. There’re no hidden opened tabs below in the stack that can pop up when you move the tab right/down. You can try Split Vertically/Horizontally actions – the difference is that it copies the opened tab in a new split.

          • Jackie McGhee says:

            I figured that it was by design, but thanks for checking it out. It feels a little odd, is all, not a big deal.

  3. Nilesh Parkhe says:

    Hi,

    Could you please also allow saving custom layouts.
    I use multiple desktops at work and home with varying resolutions. It would be be great if I could switch layouts depending on the work environment rather than having to spend 2 mins every time for adjusting them as per the resolution.

    Thanks

  4. Amy B says:

    Why is it non-obvious that you can save your current configuration as the default? What I would really expect is when I drag tabs around that next time I open Webstorm that it will remember my choices and I don’t have to take any action to not have to redo that over and over. And then I’d expect “reset to default” to just reset to some default. So instead of having a hidden feature that people have to come here to figure out, why not just make the feature intuitive?

    • Ekaterina Prigara says:

      Hello Amy,
      WebStorm saves the layout for every individual project and the layout is restored when you reopen this project. That works the same way as many other WebStorm settings that are by default configured per project but can be then moved to the default settings.

Leave a Reply to Jackie McGhee Cancel reply

Your email address will not be published. Required fields are marked *