VS Code: 3 Ways to Change Color of Comments

Last updated on August 28, 2021 A Goodman Loading... Post a comment

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 > Prefrences > 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:

{
  "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 comment 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. Happy coding.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles