Editor basics

• In the editor, press CtrlShiftF12. WebStorm hides all windows except the active editor.

  You can maximize a split screen as well. In this case, the active screen is maximized, and other screens are moved aside.

• Press Esc. WebStorm moves the focus from any window to the active editor.

note

This functionality relies on the Terminal plugin, which you need to install and enable. For more information, refer to Install plugin from Marketplace.

• Press AltF12. WebStorm closes the terminal window.

• If you need to keep the terminal window open when you switch back to the active editor, press CtrlTab.

• Press F12.

1. To jump between the opened files and tool windows with the switcher, press CtrlTab.

2. Keep Ctrl pressed to leave the switcher popup open.

3. Press Tab to move between elements. Press Backspace to remove the selected file from the list and close it in the editor.

You can switch between schemes, keymaps, and viewing modes.

1. Press Ctrl0`.

2. In the Switch menu, select the option you need and press Enter. Use the same shortcut Ctrl0` to undo your changes.

You can adjust the color scheme settings, including the High contrast color scheme for people with eyesight deficiency, in Settings | Editor | Color Scheme. To adjust the keymap settings, go to Settings | Keymap.

• Press AltHome.

• To close all opened tabs, select Window | Editor Tabs | Close All Tabs from the main menu.

• To close all inactive tabs, press Alt and click on the active tab. In this case, only the active tab stays open.

• To close all tabs except the active one and the pinned tabs, right-click any tab and select Close Other Tabs.

• To close only the active tab, press CtrlF4. You can also click the mouse's wheel button anywhere on a tab to close it.

• To reopen the closed tab, right-click any tab and select Reopen Closed Tab from the context menu.

• To open a new tab and place it to the right of all opened tabs, select Open new tabs at the end in the tab settings.

1. Right-click the tab.

2. From the list that opens, select Copy Path/Reference….

3. From the list that opens, select your copy option.

   

   Gif

   WebStorm copies the item to the clipboard, and you can paste it (Ctrl0V) wherever you need.

• To move or remove the icon on a tab, in the Settings dialog (CtrlAlt0S), go to Editor | General | Editor Tabs, and select the appropriate option in the Close button position field.

• To place the editor tabs in a different part of the editor frame or hide the tabs, right-click a tab and select Configure Editor Tabs to open the Editor Tabs settings. In the Appearance section, select the appropriate option from the Tab placement list.

  tip

  To access the Editor Tabs settings when all tabs are hidden, select Window | Editor Tabs | Configure Editor Tabs from the main menu.

• To see hidden editor tabs, click next to the last visible tab in the editor.

• To sort the editor tabs alphabetically, right-click a tab and select Configure Editor Tabs to open the Editor Tabs settings. In the Tab order section, select Sort tabs alphabetically.

You can pin an active editor tab so that it stays open when the tab limit is reached or when you use the Close Other Tabs command.

• To pin or unpin an active tab, right-click it and select Pin Tab or Unpin Tab from the context menu.

• To close all tabs but the pinned ones, right-click any tab and select Close All but Pinned.

• To assign a keyboard shortcut for the Pin Tab action, in the Settings dialog (CtrlAlt0S), go to Keymap, find the Pin Active Tab action, right-click it, select Add Keyboard Shortcut, and press the key combination you want to use.

• To keep pinned tabs on the left side, in the Settings dialog (CtrlAlt0S), go to Advanced Settings, locate the Editor Tabs section, and select the Keep pinned tabs on the left option.

When you detach a tab, the tab opens in a separate window, and the window becomes reserved for the detached tab.

If you try to detach another tab from the main frame, it will be opened in the window with the already detached tab. You can position the newly detached tab anywhere you like (on the left, right, bottom, or top). You can also drag different tool windows to that frame.

• Drag the tab you need outside the main window. If you want to re-attach the tab, drag it back over the main window.

• To detach an active tab, press ShiftF4.

• You can also use Altmouse for the same action.

• To move between tabs, press Alt0→ or Alt0←.

  

  Gif

• You can also switch between recently viewed tabs or files.

  In the editor, press CtrlTab and keep holding Ctrl to keep the Switcher window open. Use Tab to select the necessary tab or file.

1. In the Settings dialog (CtrlAlt0S), go to Keymap.

2. In the list of directories, click Other and select the directory for which you want to add a shortcut. The maximum number of tabs to which you can assign shortcuts is 9.

   

WebStorm limits the number of tabs that you can open in the editor simultaneously (the default tab limit is 10).

1. In the Settings dialog (CtrlAlt0S), go to Editor | General | Editor Tabs.

2. In the Closing Policy section, adjust the settings according to your preferences and click OK.

note

If the tab limit equals 1, the editor will display only one file at a time (there will be no tabs). If you want the editor to never close any tabs, type some unreachable number.

The preview tab allows you to view files in a single tab one by one without opening each file in a new tab. This is helpful if you need to look through several files without exceeding the tab limit.

1. In the Project tool window Alt01, click and select Enable Preview Tab.

   You can also enable the preview tab in Settings | General | Editor Tabs | Opening Policy.

2. In the Project tool window, select a file that is not already open in any other tab.

   The name of the file is written in italics to indicate preview mode. Any other file that you select will replace the previous one in the preview tab.

   Start editing the file or double-click the file's tab to exit preview mode and convert the preview tab into a regular tab.

   

   Gif

   Note that when the preview tab is enabled, the Open Files with Single Click option is ignored. Double-click a file to open it in a regular tab.

Alternatively, preview files in a popup without opening a separate tab. Select the necessary file in the Project tool window and press Space. For more information, refer to Preview files from the Project tool window.

note

This option is available only in the classic UI. In the new UI, use the Show tabs in settings.

1. Press CtrlAlt0S to open the IDE settings and then select Editor | General | Editor Tabs.

2. Select the Hide tabs if there is no space option. Extra tabs will be placed in the drop-down list () located in the upper right part of the editor.

note

This option is available only in the new UI. In the classic UI, use the Hide tabs if there is no more space option.

When you open more tabs than your screen can fit, you can place them in one or several rows.

1. Press CtrlAlt0S to open the IDE settings and then select Editor | General | Editor Tabs.

2. In the Show tabs in section, select one of the following options:

   • One row, and if tabs don't fit: place all tabs in one row, and if the tabs do not fit:

     • Scroll the tabs panel: hover over the tab row and use the scroll bar that appears or the mouse wheel to scroll the tabs. Alternatively, use the drop-down list () on the right to open tabs that are outside the viewport.

     • Squeeze tabs: shrink tabs to fit them on the screen.

   • Multiple rows: place tabs in several rows.

   Scroll tabs

   Squeeze tabs

   Multiple rows

   

   

   

1. In the Settings dialog (CtrlAlt0S), go to Appearance & Behavior | Appearance.

2. In the Size field, specify the font size and click OK to save the changes.

   Keep in mind that the font size will change not only for the tabs but for tool windows as well.

• In the editor, right-click the desired tab and select how you want to split the editor window and move the selected file: Split Right, Split and Move Right, Split Down, Split and Move Down.

  WebStorm creates a split view of the editor and places the file according to your selection.

  

  Gif

• As an alternative, select similar options from Window | Editor Tabs from the main menu.

  You can also assign keyboard shortcuts for these actions. Go to Settings | Keymap and find one of the actions: Split Right, Split and Move Right, Split Down, Split and Move Down. Right-click it, select Add Keyboard Shortcut, and press the key combination you want to use. For more information, refer to Configure keyboard shortcuts.

• You can drag a tab vertically or horizontally in order to split the editor, and drag the tab back to unsplit the screen.

  

  Gif

• You can open a file in the editor in the split on the right.

  In the Project tool window, right-click the file and select Open in Right Split from the context menu (or press ShiftEnter). WebStorm will open the file in the split on the right of the editor.

  

  Gif

  If there are two splits and focus is in the left split, the file will be opened in the existing right split. If the focus is in the right split, the file will be opened in the next right split.

• You can move files between split screens. Right-click the necessary file tab in the editor and select Move To Opposite Group or Open In Opposite Group from the context menu.

• You can close all the open tool windows at once and thus enlarge the split screens. Place the caret in an editor tab and press CtrlShiftF12 or just double-click the tab. WebStorm hides all the open tool windows, so all the space is shared by split screens.

  

  Gif

• You can split the editor equally multiple times with the Equalize proportions in nested splits option.

• To unsplit the screen, from the context menu, select Unsplit or Unsplit All to unsplit all the split frames.

1. Place the caret inside the desired split frame.

2. Go to Window | Editor Tabs.

3. From the list of options, select one of the following options:

   • Stretch Editor to Top

   • Stretch Editor to Left

   • Stretch Editor to Bottom

   • Stretch Editor to Right

   You can assign a shortcut to each option and use the keyboard to stretch the split frame.

   To move between the split frames, go to Window | Editor Tabs. From the list of options, select Goto Next Splitter or Goto Previous Splitter , respectively.

1. In the Settings dialog (CtrlAlt0S), go to Editor | Font.

2. Select the desired font from the list, specify its Size and Line height. You can also enable ligatures and configure typography settings.

3. Click OK to save the changes.

1. In the Settings dialog (CtrlAlt0S), go to Editor | General (Mouse Control section).

2. Select the Change font size with Ctrl+Mouse Wheel in option.

3. Return to the editor, press and hold Ctrl, and adjust the font size using the mouse wheel.

• In the editor, press AltShift0. to increase the font size globally, and AltShift0, to decrease it.

  WebStorm displays a zoom indicator on the bottom of the editor that shows the current font size and the default one, which you can roll back.

• The zoom indicator is enabled by default. To disable it, open the Settings dialog (CtrlAlt0S), go to Advanced Settings, and clear the Show zoom indicator option in the Editor section.

1. In the Settings dialog (CtrlAlt0S), go to Editor | Code Style.

2. From the list of languages, select the appropriate one, and configure settings for tabs and indents, spaces, wrapping and braces, hard and soft margins, and so on.

1. In the Settings dialog (CtrlAlt0S), go to Editor | Color Scheme.

2. Open the Color Scheme node and select the necessary language or framework. You can also select the General option to configure the color scheme settings for general items, such as code, editor, errors and warnings, popups and hints, search results, and so on.

• In the Settings dialog (CtrlAlt0S), go to Editor | General | Code Completion. Here you can configure case-sensitive completion, auto-display options, code sorting, and so on.

• In the Settings dialog (CtrlAlt0S), go to Editor | General. In the Virtual Space section, configure the caret placement options.

  Select the Allow placement of caret after end of line option to place the caret at the next line in the same position as the end of the previous line. If this option is cleared, the caret at the next line is placed at the end of the actual line.

  Select the Allow placement of caret inside tabs option to help you move the caret up or down inside the file while keeping it in the same position.

• In the Settings dialog (CtrlAlt0S), go to Editor | General. In the Other section, configure options for trailing spaces.

  For example, when you save your code, either manually or automatically, and want to preserve trailing spaces on the caret line regardless of what option is selected in the Strip trailing spaces on save list, select the Always keep trailing spaces on caret line option.

• In the Settings dialog (CtrlAlt0S), go to Editor | General | Appearance.

  For example, you can configure the IDE to show the hard wrap guide or parameter hints.

1. In the Settings dialog (CtrlAlt0S), go to Editor | General.

2. In the Soft Wraps section, specify the appropriate options.

You can configure the behavior of basic editor actions to differ depending on the language you use.

• In the Settings dialog (CtrlAlt0S), go to Editor | General | Smart keys.