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

User · Answer

All Platforms  Windows Linux Mac   It is under View - gt  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

User · Answer

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

User · Answer

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

User · Answer

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   quot editor renderWhitespace quot    quot all quot     Before VS Code 1 6 0 Before 1 6 0  you had to set editor renderWhitespace to true   quot editor renderWhitespace quot   true

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Update August 2020 Release     see https   github com microsoft vscode pull 104310  quot editor renderWhitespace quot    quot trailing quot      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   quot editor renderWhitespace quot    quot selection quot      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    quot editor renderWhitespace quot    quot selection quot   and  quot workbench colorCustomizations quot            quot editorWhitespace foreground quot    quot  fbff00 quot

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Open User preferences  Keyboard Shortcut  CTR   SHIFT   P -  Preferences  Open User Settings   Insert in search field Whitespace  and select all parameter

User · Answer

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

[visual-studio-code] Show whitespace characters in Visual Studio Code

All Platforms (Windows/Linux/Mac):

A note about the macOS ?

Examples related to visual-studio-code

Examples related to whitespace

Examples related to vscode-settings

Examples related to non-printing-characters