Is it possible to show whitespace characters, like the space character, in Visual Studio Code?
There doesn't appear to be a setting for it (though it is one in several other code editors like Atom or Notepad++).
Is it possible to show whitespace characters, like the space character, in Visual Studio Code?
There doesn't appear to be a setting for it (though it is one in several other code editors like Atom or Notepad++).
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
"draw_white_space": "selection"
option ?
"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.
Commented
Nov 18, 2016 at 0:24
selection
option is added in v1.37 (released in early August, 2019).
UPDATE (December 2023)
To show whitespace characters in VSCode >1.85, you can do View -> Appearance -> Render Whitespace
.
You may have to turn it off and back on to get it to start working.
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!
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.
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.
Ctrl+Shift+P
), in case you prefer not having to set and remember a keyboard shortcut.
Commented
Apr 29, 2023 at 11:48
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 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 aselection
option. With this option set, whitespace will be shown only on selected text:
"editor.renderWhitespace": "selection"
and
"workbench.colorCustomizations": {
"editorWhitespace.foreground": "#fbff00"
}
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 .
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 🐞
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:
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.
trailing
and selection
. See also: github.com/microsoft/vscode/issues/163213
Commented
Oct 10, 2022 at 20:07
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
.
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.
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.
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.
Starting with VSCode 1.75 (Jan. 2023), whitespace and tab reresentation won't be impacted by style/colors, as they are today, like reported in issue 49462:
Before 1.75:
PR 168732 proposes a new experimentalWhitespaceRendering
setting:
svg
: Use a new rendering method with svgsfont
: Use a new rendering method with font charactersoff
: Use the stable rendering methodIt is available now (Dec. 2022) in VSCode insiders.