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.json (though it is an option in Atom.io), and I haven't been able to display whitespace characters using CSS.

score 735 · Accepted Answer · edited Aug 31 '20 at 16:50

735

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

edited Aug 31 '20 at 16:50

Mark

63,012
11
197
207

answered May 09 '15 at 13:41

revo

43,830
14
67
109

25

Is there a way to do this only for selected characters, like Sublime's `"draw_white_space": "selection"` option ? – noio Jan 10 '16 at 13:27
10

@noio Not yet, but it's on its way [github](https://github.com/Microsoft/vscode/issues/1477) – revo Jan 12 '16 at 16:47
But this only shows whitespace at the beginning and end of lines? – drzaus Sep 02 '16 at 15:47
16

@drzaus, `"editor.renderWhitespace": "boundary"` will be the beginning and end of lines where as `"deitor.renderWhitespace": "all"` will show all whitespace. @AlexanderGonchiy, I've found it useful to open file>preferences>user settings(or workspace settings) and using 'find' in the default settings folder to look for what I need. – JackChance Nov 18 '16 at 00:24
For `"editor.renderWhitespace": "all"` is the one that works – briankip Mar 03 '17 at 06:55
2

File -> Preferences -> Settings. Search for 'whitespace'. Under 'Editor: Render Whitespace' there is a dropdown to select your new setting. (v1.13.2) – CRice Mar 15 '19 at 00:59
1

@noio, see my answer below the `selection` option is added in v1.37 (released in early August, 2019). – Mark Aug 05 '19 at 02:40
1

As of December 2019, you can do `"editor.renderWhitespace": "selection",` and it will only render white spaces when selected. – zyy Dec 21 '19 at 04:06
An alternative: in **Keyboard Shortcuts** (Ctrl+K, Ctrl+S) you'll find through searching _Render Whitespace_ the`editor.action.toggleRenderWhitespace` binding (e.g. assign it to Ctrl+K, Ctrl+B) which will allow to turn it ON/OFF while coding. – CPHPython Apr 15 '20 at 10:25
@JackChance The `boundary` option is not limited to the beginning and end of lines (although it is poorly named), for instance, multiple spaces between words are also rendered. – Mark Aug 31 '20 at 17:00
@Mark updating an answer according to *original sources* doesn't mean it is a copy from another answer. If you feel like that please flag for a moderator attention. – revo Aug 31 '20 at 17:32
@revo That could ultimately make moot all other answers to many, many questions if eventually their content was incorporated into the first answer. Are you citing something for the "original sources" idea? – Mark Aug 31 '20 at 18:30
@Mark Sorry but I don't think so. This question got many answers over years which mostly could be merged into one. They are just referring to different versions of a software with an slightly different behavior. They do not contain different programming or algorithmic solutions. So if I update my answer according to new versions of the mentioned software I'm doing good because I want to maintain my answer for future readers too. Otherwise I could post a new answer whenever a new version comes out. Hence the edit is valid. I'll rollback. – revo Aug 31 '20 at 20:54
If you really feel that way, you should make this answer a wiki-answer. – Mark Aug 31 '20 at 20:58
@Mark I have no intention to make it a community wiki. Once again if you feel this is wrong bring it up in meta. – revo Sep 01 '20 at 10:21

Coder Absolute · Answer 2 · 2019-08-03T13:12:30.343

162

It can also be done via the main menu View -> Render Whitespace

edited Aug 03 '19 at 13:12

answered Dec 30 '16 at 15:14

Coder Absolute

3,659
3
21
33

informatik01 · Answer 3 · 2019-06-20T23:29:34.313

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.

My Visual Studio uses `ctrl+e ctrl+s` by default. For combo shortcuts like this one you need to put a space between the two combinations, not a comma. — t3chb0t, Nov 17 '16 at 07:43

score 49 · Answer 4 · answered Oct 17 '16 at 08:01

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.)

Zack S · Answer 5 · 2020-05-12T19:05:44.207

30

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 .

edited May 12 '20 at 19:05

answered May 09 '16 at 13:37

Zack S

1,192
1
20
37

2

P.S. color schema is not part of change (I have an extra plugin for this) – Zack S Aug 24 '16 at 17:05
1

Plugin can be found here: https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow&showReviewDialog=true – Zack S Aug 25 '16 at 13:03

Mark · Answer 6 · 2020-08-31T16:55:40.410

*** Update August 2020 Release *** see https://github.com/microsoft/vscode/pull/104310

"editor.renderWhitespace": "trailing" // option being added

Add a new option ('trailing') to editor.renderWhitespace that renders only 
trailing whitespace (including lines with only whitespace).

*** Update February 2020 Release *** see https://github.com/microsoft/vscode/issues/90386

In v1.43 the default value will be changed to selection from none as it was in v1.42.

"editor.renderWhitespace": "selection"  // default in v1.43

Update for v1.37: adding the option to render whitespace within selected text only. See v1.37 release notes, render whitespace.

The editor.renderWhitespace setting now supports a selection option. With this option set, whitespace will be shown only on selected text:

"editor.renderWhitespace": "selection"

and

"workbench.colorCustomizations": {    
  "editorWhitespace.foreground": "#fbff00"
}

If you want to make it a little less present vs code also accepts the alpha channel so #fbff0040 would also be valid making the dots more transparent — relief.melone, May 08 '20 at 07:28

score 17 · Answer 7 · answered Oct 14 '16 at 07:54

17

It is not a boolean anymore. They switched to an enum. Now we can choose between: none, boundary, and all.

// 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",

You can see the original diff on GitHub.

answered Oct 14 '16 at 07:54

aloisdg

16,342
4
73
80

2

It is also possible to install an extension called Trailing Spaces to show only the trailing ones. – Stephane Jan 14 '19 at 12:44

score 11 · Answer 8 · answered Jul 10 '19 at 11:04

11

Open User preferences. Keyboard Shortcut: CTR + SHIFT + P -> Preferences: Open User Settings;
Insert in search field Whitespace, and select all parameter

answered Jul 10 '19 at 11:04

Andrey Patseiko

1,637
18
18

2

Also, for VS Code 1.45 (on OSX), the default was "selection". – Shane May 11 '20 at 15:25

score 7 · Answer 9 · answered Nov 22 '16 at 14:23

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.

Dragonthoughts · Answer 10 · 2018-03-13T15:39:11.103

5

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.

edited Mar 13 '18 at 15:39

answered Sep 05 '17 at 11:52

Dragonthoughts

2,069
8
20
23

score 5 · Answer 11 · answered May 03 '18 at 07:54

5

Hit the F1 button, then type "Toggle Render Whitespace" or the parts of it you can remember :)

I use vscode version 1.22.2 so this could be a feature that did not exist back in 2015.

answered May 03 '18 at 07:54

Stevelot

119
1
4

1

this works! But it only toggles between 'all' and 'none', skipping the 'boundary' option. – DiegoDD May 14 '18 at 19:45

Mojtaba Hosseini · Answer 12 · 2020-11-06T10:19:37.397

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

A note about the macOS 

In the mac environment, you can search for any menu option under the Help menu, then it will open the exact menu path you are looking for. For example, searching for whitespace result in this:

score 0 · Answer 13 · answered Sep 14 '20 at 08:55

I'd like to offer this suggestion as a side note.
If you're looking to fix all the 'trailing whitespaces' warnings your linter throws at you.
You can have VSCode automatically trim whitespaces from an entire file using the keyboard chord.
CTRL+K / X (by default)

I was looking into showing whitespaces because my linter kept bugging me with whitespace warnings. So that's why I'm here.

Show whitespace characters in Visual Studio Code

13 Answers13

UPDATE (June 2019)

Original (old) answer

All Platforms (Windows/Linux/Mac):

A note about the macOS 

Linked