Show whitespace characters in Visual Studio Code

Question

Is it possible to show whitespace characters, like the space character, in Visual Studio Code?

There doesn\'t appear to be an option for it in the settings.js

Answer 1

The option to make whitespace visible now appears as an option on the View menu, as "Toggle Render Whitespace" in version 1.15.1 of Visual Studio Code.

Answer 2

Show whitespace characters in Visual Studio Code

change the setting.json, by adding the following codes!

// Place your settings in this file to overwrite default and user settings.
{
    "editor.renderWhitespace": "all"
}

just like this!
(PS: there is no "true" option!, even it also works.)

Answer 3

All Platforms (Windows/Linux/Mac):

It is under View -> Render Whitespace.

⚠️ Sometimes the menu item shows that it is currently active but you can's see white spaces. You should uncheck and check again to make it work. It is a known bug

Answer 4

In order to get the diff to display whitespace similarly to git diff set diffEditor.ignoreTrimWhitespace to false. edit.renderWhitespace is only marginally helpful.

// Controls if the diff editor shows changes in leading or trailing whitespace as diffs
"diffEditor.ignoreTrimWhitespace": false,

To update the settings go to

File > Preferences > User Settings

Note for Mac users: The Preferences menu is under Code not File. For example, Code > Preferences > User Settings.

This opens up a file titled "Default Settings". Expand the area //Editor. Now you can see where all these mysterious editor.* settings are located. Search (CTRL + F) for renderWhitespace. On my box I have:

// Controls how the editor should render whitespace characters, posibilties are 'none', 'boundary', and 'all'. The 'boundary' option does not render single spaces between words.
"editor.renderWhitespace": "none",

To add to the confusion, the left window "Default Settings" is not editable. You need to override them using the right window titled "settings.json". You can copy paste settings from "Default Settings" to "settings.json":

// Place your settings in this file to overwrite default and user settings.
{
     "editor.renderWhitespace": "all",
     "diffEditor.ignoreTrimWhitespace": false
}

I ended up turning off renderWhitespace.

Answer 5

Just to demonstrate the changes that editor.renderWhitespace : none||boundary||all will do to your VSCode I added this screenshot:
.

Where Tab are → and Spaceare .

Answer 6

1. Open User preferences. Keyboard Shortcut: CTR + SHIFT + P -> Preferences: Open User Settings;

2. Insert in search field Whitespace, and select all parameter