Show whitespace characters in Visual Studio Code
VS Code 1.6.0 and Greater
As mentioned by aloisdg below, editor.renderWhitespace
is now an enum taking either none
, boundary
or all
. To view all whitespaces:
"editor.renderWhitespace": "all",
Before VS Code 1.6.0
Before 1.6.0, you had to set editor.renderWhitespace
to true
:
"editor.renderWhitespace": true
It can also be done via the main menu View -> Render Whitespace
Show whitespace characters in Visual Studio Code
change the settings.json
, by adding the following codes!
the file path is
.vscode/settings.json
in your project root folder.
// 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.)
UPDATE (June 2019)
For those willing to toggle whitespace characters using a keyboard shortcut, you can easily add a keybinding for that.
In the latest versions of Visual Studio Code there is now a user-friendly graphical interface (i.e. no need to type JSON data etc) for viewing and editing all the available keyboard shortcuts. It is still under
File > Preferences > Keyboard Shortcuts (or use Ctrl+K Ctrl+S)
There is also a search field to help quickly find (and filter) the desired keybindings. So now both adding new and editing the existing keybindings is much easier:
Toggling whitespace characters has no default keybinding so feel free to add one. Just press the + sign on the left side of the related line (or press Enter, or double click anywhere on that line) and enter the desired combination in the pop-up window.
And if the keybinding you have chosen is already used for some other action(s) there will be a convenient warning which you can click and observe what action(s) already use your chosen keybinding:
As you can see, everything is very intuitive and convenient.
Good job, Microsoft!
Original (old) answer
For those willing to toggle whitespace characters using a keyboard shortcut, you can add a custom binding to the keybindings.json file (File > Preferences > Keyboard Shortcuts).
Example:
// Place your key bindings in this file to overwrite the defaults
[
{
"key": "ctrl+shift+i",
"command": "editor.action.toggleRenderWhitespace"
}
]
Here I have assigned a combination of Ctrl+Shift+i to toggle invisible characters, you may of course choose another combination.