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.
- 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:
(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!