Show whitespace characters in Visual Studio Code

问题:

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.

回答1:

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

回答2:

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

回答3:

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.

回答4:

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

回答5:

Just to demonstrate the changes that editor.renderWhitespace : true will do to your VSCode I added this screenshot:
.

Where Tab are → and Spaceare .

回答6:

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.

回答7:

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.

回答8:

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.

回答9:

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.

回答10:

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"
}

回答11:

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

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