Staying Organized with Bookmarks in VS Code

Greetings, friends! Do you remember getting bookmarks for free during school? I remember getting awesome bookmarks with Pokémon on them when I was in elementary school. Simpler times back then!

We can place regular bookmarks anywhere in our books to remember which page we are on. Similarly, we can use the Bookmarks VS Code extension by Alessandro Fragnani to add bookmarks to any lines of code!

We can add bookmarks to our code in three ways.

• Right-click a line and choose Bookmarks -> Toggle
• Use Command + Shift + P (Mac) or Ctrl + Shift + P (Windows) to open the Command Palette and then select Bookmarks: Toggle
• We can use the keybinding, Option + Command + K on Macs or the equivalent on Windows

Once you "toggle" a bookmark, you should see a little blue ribbon appear next to the line number.

We can view all bookmarks by clicking on the "Bookmarks" icon on the "Activity Bar" underneath the icon you normally click for installing extensions from within VS Code. This icon appears after installing the Bookmarks extension.

Clicking this icon will open up the Bookmarks Explorer. We can view all of our saved bookmarks and edit the name of their label. Labels are names we can give to our bookmarks, so they're easier to keep track of. We can also see the line number and column number where each bookmark lives.

There are lots more commands available to us in the Bookmarks extensions! Here is a list of all the commands.

• Bookmarks: Toggle Mark/unmark positions with bookmarks
• Bookmarks: Toggle Labeled Mark labeled bookmarks
• Bookmarks: Jump to Next Move the cursor forward, to the bookmark below
• Bookmarks: Jump to Previous Move the cursor backward, to the bookmark above
• Bookmarks: List List all bookmarks in the current file
• Bookmarks: List from All Files List all bookmarks from all files
• Bookmarks: Clear remove all bookmarks in the current file
• Bookmarks: Clear from All Files remove all bookmarks from all files
• Bookmarks (Selection): Select Lines Select all lines that contains bookmarks
• Bookmarks (Selection): Expand Selection to Next Expand the selected text to the next bookmark
• Bookmarks (Selection): Expand Selection to Previous Expand the selected text to the previous bookmark
• Bookmarks (Selection): Shrink Selection Shrink the select text to the Previous/Next bookmark

If you need help running a particular command, open up the Command Palette using Command + Shift + P (Mac) or Ctrl + Shift + P and then search for Bookmarks. You should see a list of all the Bookmarks extension commands and their corresponding keyboard shortcuts.

With the Bookmarks extension, we can add markers to important spots in our code. Done with work for the day? Add a bookmark to help you remember where you left off in your code! Trying to figure out how the code works and need to remember what the line referred to? Add a label to your bookmark! The Bookmarks extension is a great way to stay organized! 🔖