VS Code: How to Render Whitespace Characters

Last updated on December 8, 2021 A Goodman Loading... Post a comment

This article walks you through a couple of different ways to display whitespace characters (space characters) in VS Code (Visual Studio Code).

Using Your Mouse

1. Go to the Settings page of VS Code:

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

2. Type render whitespace into the search field then head to the Editor: Render Whitespace section. Click on the dropdown then select all from the menu as follows:

Your change will be automatically saved and applied. Go back to your code file and try to hit your space key on your keyboard several times. You will see something like this (the whitespace characters will show up as small fuzzy dots):

Creating A Settings.json File

1. In the root of the project you are working with, create a new folder named .vscode then add a new file call settings.json inside it:

2. Add the following to the JSON file you’ve created in the previous step:

{
  "editor.renderWhitespace": "all", 
}

Save the file and you are all set.

Conclusion

You’ve learned how to show whitespace characters in VS Code. If you’d like to explore more useful tips and tricks about this great IDE, take a look at the following articles:

I have made every effort to ensure that every step in this article works properly, but I may have made some mistakes or omissions. If so, please leave a comment to report errors. I am more than happy to hear from you and update the article as soon as possible.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles