Background
I recently started learning web development on FreeCodeCamp. I found out about VScode and don't know how I survived without it! Anyone who is familiar with VScode knows how to add an extension, but sometimes the customization options aren't as well known.
I particularly like the bookmark feature in Visual Studio and wanted to have that functionality in VScode so I installed the Bookmarks extension. However, I didn't like the look of the default skinny blue bookmark on my dark background. I found out that there is a setting available so you can use a custom 16x16 pixel icon as your bookmark image!
This post is about how to add the bookmark extension and customize it, but I also created a github repo* of different colored bookmarks so you don't have to create your own if you don't want to.
*Note: The bookmark icons in the repo are modeled after the bookmark icon in Visual Studio 2017.
Customize the bookmark icon in VScode
- You'll need to install the bookmarks extension for VScode.
- Find a 16x16 pixel icon you want to use as a bookmark in VScode (or go ahead and clone/download the premade icons on my github) and put that image file in a local folder.
-
Add this setting to the settings.json file in VScode:
"bookmark.gutterIconPath": "c:\\path_to_icon\\icon.png" (Optional) Update the keybinding for 'Bookmark Toggle' to 'Ctrl+K Ctrl+K' (to mimic the Visual Studio IDE shortcut)
Enjoy your customized bookmarks!
I hope you have as much fun customizing VScode to fit your style as I do! If you have any questions for me or just want to connect, comment below or message me on twitter! I enjoy talking with new people π
Until next time, happy coding!
Top comments (4)
Iβm glad you like the extension. Itβs one of my favorites π.
With the recent iconography update in VSCode, I thought about updating that image too, using a border only visual, like the new Side Bar icon. Just an idea, for now.
In the next releases I will create another setting to customize the icon, just like my other Numbered Bookmarks extension, where you defines the color, and it creates the image on the fly. A bit easier than today to customize.
BTW, Congrats for you premade icons repo π
I'll be looking forward to that next release of the Bookmark Extension!
Thank you, I hope others find the icons to be useful π
Thanks for sharing. I was looking for some extension like this, and here I found it. π
You're welcome! I'm glad you found it helpful π