VS Code: 3 Ways to Change Color of Comments

This article walks you through 3 different ways to change the color of comments in VS Code (Visual Studio Code). Without any further ado, let’s get our hands dirty.

Using Built-In VS Code Settings

1. Go to the Settings page:

• Mac: Code > Preferences > Settings (hotkeys: Command + ,)
• Windows: File > Preferences > Settings (hotkeys: Ctrl + ,)

2. Type “editor.tokenColorCustomizations” into the search bar, then click on “Edit in settings.json”:

3. By default, “editor.tokenColorCustomizations” is set to “null”. To customize the comment color, you can add the following:

{
  "comments": "[color code]"
}

For example, I will make my comments turn purple like this:

4. After saving the file, the change will be applied immediately. Here’s the result you get:

Creating a Custom Setting File for a Project

This method only affects a single project.

1. Create a new folder named “.vscode” at the root of your project you want to change comments’ color. Next, add a new file called “settings.json” inside that folder:

2. Add the following to the “settings.json” file (use any color code you want):

{
  "editor.tokenColorCustomizations": {
    "comments": "#b3ff00"
  }
}

3. Save the file and recheck your comments:

Using an Extension

There are many free extensions that could help us colorize comments in the ways we want. Just go to the Extensions section of VS Code and search for “comments”. A bunch of results will show up:

The one I am currently using is “Better Comments”, but you can try others if you want. Here’s how my comments look like:

Conclusion

Using comments with custom colors will help us to be less boring when writing code as well as easier to read later. Hope the above methods are helpful to you.

Further reading:

• VS Code: Set Preferred Quote Type for Quick Fixes
• VS Code: How to Collapse/Expand Blocks of Code
• VS Code: How to Render Whitespace Characters
• How to Change File Encoding in VS Code
• VS Code: How to Position/Align the Bottom Panel

You can also check out our Visual Studio Code topic page for more tips and tricks to improve your producibility and coding experience.