WebStorm 2023.1 Help

Bookmarks

If you work with large projects, searching for files and folders can be time-consuming. For such cases, WebStorm features bookmarks. You can bookmark the necessary lines of code to be able to find them easier. You can also bookmark the files, folders that you need more often than other project items.

All your bookmarks are grouped in lists in the Bookmarks tool window that you can open by selecting View | Tool Windows | Bookmarks from the main menu or by pressing Alt+2. The tool window also shows all breakpoints that are automatically added to the dedicated list once you place them in your code.

Bookmarks tool window

WebStorm has two types of bookmarks:

  • Anonymous bookmarks don't have an identifier and allow you to place as many bookmarks as you want. Files and lines marked with anonymous bookmarks have a bookmark icon.

  • Mnemonic bookmarks allow you to create bookmarks with numbers (0 to 9) or letters (A to Z). Files and lines marked with mnemonic bookmarks have the corresponding letter or number icon in a frame.

Add bookmarks

WebStorm adds your bookmarks to the predefined list in the Bookmarks tool window that is created automatically and has the same name as the project. You can create more lists and set another list as default.

Add an anonymous line bookmark

  • In the editor, place the caret at a line of code and press F11.

  • Alternatively, right-click the gutter next to the line of code that you want to bookmark and select Add Bookmark.

    Add an anonymous bookmark

A bookmark icon appears in the gutter next to the bookmarked line.

Anonymous bookmark in the gutter

Add a mnemonic line bookmark

  1. In the editor, place the caret at a line of code and press Ctrl+F11.

    Alternatively, right-click the gutter next to the line of code that you want to bookmark and select Add Mnemonic Bookmark.

    Add a mnemonic bookmark
  2. In the popup that opens, select a number or a letter that you want to use as an identifier for this bookmark.

    Adding a mnemonic bookmark: select an identifier

    If the selected mnemonic is already used, the IDE will ask you whether you want to overwrite an existing bookmark with the new one. Select the Don't ask again option to silently overwrite mnemonics.

    Adding a mnemonic bookmark: Rewrite mnemonic popup
  3. Optionally, provide a description for the new bookmark.

  4. Press Enter or click the selected letter or number once again to save the bookmark.

    A letter or a number bookmark icon appears in the gutter next to the bookmarked line.

    Mnemonic bookmark added in the gutter

Bookmark files and folders

  1. In the Project tool window (Alt+1), right-click an item that you want to bookmark and select Bookmarks | Add Bookmark (F11) or Add Mnemonic Bookmark (Ctrl+F11).

    Bookmark folders

    To bookmark multiple items, select them in the tool window, right-click one of them, and select Bookmarks | Add Bookmarks (F11).

    Bookmark several files
  2. For mnemonic bookmarks, select a number or a letter that you want to use as an identifier for this bookmark.

    Press Enter or click the selected letter or number once again to save the bookmark.

The corresponding icon appears in the Project tool window next to the bookmarked item.

Bookmarked files and folders are shown in the Bookmarks tool window

Bookmark an editor tab

You can bookmark files from editor tabs one by one. These bookmarks will be added to the default list.

  1. Right-click the tab with the file that you want to bookmark and select Bookmarks | Add Bookmark (F11) to add an anonymous bookmark or Add Mnemonic Bookmark (Ctrl+F11) to add a bookmark with an identifier.

  2. For mnemonic bookmarks, select a number or a letter that you want to use as an identifier for this bookmark.

    Press Enter or click the selected letter or number once again to save the bookmark.

Bookmark all editor tabs

You can quickly bookmark all open files and add these bookmarks to the new list.

  1. Right-click any editor tab and select Bookmarks | Bookmark Open Tabs.

  2. Name the new list.

    You can use this list for new bookmarks by default: enable the Use as default list option.

    The IDE will create a new list and add there all files from the open tabs.

    Bookmark all open tabs

Jump to a mnemonic bookmark with a digit

  • Hold Ctrl and press the mnemonic digit on the keyboard.

    For example, to jump to the bookmark with mnemonic 5, press Ctrl+5.

  1. Press Shift+F11 or from the main menu, select Edit | Bookmarks | Show Line Bookmarks.

  2. Double-click the bookmark or select it with the keyboard and press Enter.

    For mnemonic bookmarks, press the corresponding digit or letter.

By default, WebStorm shows only line bookmarks in the bookmarks popup. You can configure the settings to see other bookmarked items (for example, files or folders): press Ctrl+Alt+S to open the IDE settings, select Advanced Settings, and disable the Show only line bookmarks in popup option.

  • From the main menu, select View | Tool Windows | Bookmarks or press Alt+2 to open the Bookmarks tool window.

  • Expand the desired bookmark list or click Expand all to expand all bookmark lists.

  • Double-click a bookmark on the list to navigate to it.

Go to the next or previous bookmark

  • Press Ctrl+Alt+Down (Navigate | Next Bookmark Occurrence) to jump to the next bookmark.

  • Press Ctrl+Alt+Up (Navigate | Previous Bookmark Occurrence) to return to the previous bookmark.

Modify bookmarks

Rename bookmarks

Bookmarks have short descriptions. By default, they contain the code from the line or the name of the item on which they are placed. If necessary, you can give bookmarks your own short descriptions.

  1. Right-click a bookmark icon in the editor gutter, a bookmarked item in the Project tool window, or a bookmark in the Bookmarks tool window, and select Rename Bookmark.

    Rename bookmark: click icon
  2. In the dialog that opens, specify a new description and click OK.

    Renaming a bookmark

You can view descriptions of bookmarks in the Bookmarks tool window, or in the editor: hover the mouse pointer over a bookmark icon in the gutter to see a tooltip with the bookmark's description.

View the description of a bookmark in a popup

Assign a mnemonic to an anonymous bookmark

You can convert an anonymous bookmark to a mnemonic one.

  1. Right-click a bookmark icon in the editor gutter, a bookmarked item in the Project tool window, or a bookmark in the Bookmarks tool window, and select Assign Mnemonic (or press Ctrl+F11).

    Assigning mnemonic to anonymous bookmark
  2. In the popup that opens, select a number or a letter that you want to use as an identifier for this bookmark.

    Optionally, provide a description.

  3. Press Enter or click the selected letter or number once again to save the bookmark.

Change a mnemonic identifier

  1. Right-click a bookmark icon in the editor gutter, a bookmarked item in the Project tool window, or a bookmark in the Bookmarks tool window, and select Change Mnemonic (or press Ctrl+F11).

    Changing a mnemonic identifier for a bookmark
  2. In the popup that opens, select another identifier. If necessary, change the description as well.

  3. Press Enter or click the selected letter or number once again to save the bookmark.

Anonymize mnemonic bookmarks

You can convert a mnemonic bookmark to an anonymous one.

  • Right-click a bookmark icon in the editor gutter, a bookmarked item in the Project tool window, or a bookmark in the Bookmarks tool window, and select Remove Mnemonic.

    Anonymizing a mnemonic bookmark from the gutter

Delete bookmarks

  • To delete a bookmark from the Bookmarks tool window or from the gutter, right-click it and select Delete Bookmark.

  • To delete a bookmark from the Project tool window, right-click a bookmarked item and select Bookmarks | Delete Bookmark.

Lists of bookmarks

There's one predefined empty bookmarks list that has the same name as the project. By default, WebStorm adds your bookmarks there. If necessary, you can use another list as the default. You can also create multiple lists and move items between them.

Create a bookmarks list

  1. From the main menu, select View | Tool Windows | Bookmarks or press Alt+2 to open the Bookmarks tool window.

  2. In the tool window, click Create Bookmarks List and name the new list in the dialog that opens.

  3. Enable the Use as default list option if you want your bookmarks to go to this list automatically and click Create.

    Creating a new bookmarks list

Move a bookmark to another list

  • From the main menu, select View | Tool Windows | Bookmarks or press Alt+2 to open the Bookmarks tool window and drag a bookmark to another list.

  • In the Project tool window (Alt+1), right-click a bookmarked item and select Bookmarks | Add Bookmark to Another List.

Sort bookmarks

  • To move a bookmark up or down the list, right-click it in the Bookmarks tool window and select Move Up or Move Down.

  • To display line bookmarks in the tool window grouped by file, click Show Options Menu in the Bookmarks tool window and select the Group Line Bookmarks by File option.

Change the default list

WebStorm adds all your bookmarks to the list that is configured as the default one. If necessary, you can use another default list for your bookmarks.

  1. From the main menu, select View | Tool Windows | Bookmarks or press Alt+2 to open the Bookmarks tool window.

  2. Right-click the list that you want to use as your default bookmarks list and select Mark List as Default.

    The list is now located above others in the tool window and has the Default tag.

    Default list in the Bookmarks tool window

Delete a list of bookmarks

After you delete a list, all bookmarks from it are removed from code and project items.

  1. From the main menu, select View | Tool Windows | Bookmarks or press Alt+2 to open the Bookmarks tool window.

  2. Right-click the list that you want to delete and select Delete Bookmark List.

Last modified: 09 March 2023