VS Code isn’t that great when it comes to customizing the color of the comments.
A couple of ways you can customize them is to pick a theme that would change the whole visuals of the editor, including comments.
The other way would be to play around with editor.tokenColorCustomizations setting.
However, none of these methods provide the granularity to fully customize the comments to your liking.
This is where the Better Comments extension comes into play.
Better Comments Extension
With Better Comments, you are able to categorize the comments into:
- Highlighted comments
- Alerts
- Queries
- TODOs
- Commented out code
Customize the colors
If you want to change the presets’s colors and other visuals like making them bold, italic, or underlined, the extension supports that.
Press down CTRL + SHIFT + P, type in settings, and open up the settings.json file.
Paste the following code at the end of the file:
You can also find the above code in the extension’s overview section and in the README file.
You can go ahead and change the colors as you like 😍
⚠️ If you made some changes to the presets that didn’t apply, try refreshing VS Code’s Editor Window.
You can do that by pressing down CTRL + SHIFT + P and typing in reload window.
Create your own comment styles
A cool feature that the Better Comments extension brings is that we can create our own comment styles or tags, as they’re technically being called in the settings.
I created a new tag called dev <>:
Make sure to reload VS Code’s window once again.
And here is what it looks like!
Pretty neat 😎
Let me know what you think about this article in the comments section below.
If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.