Menu
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.
439
You can click on View and then Click on Command Palette or type Ctrl + Shift + P keyboard shortcut. Click on Toggle Render Whitespace. This option can be used to toggle Indentation dots in VSCode.
For example, the common whitespace symbol U+0020 SPACE (also ASCII 32) represents a blank space punctuation character in text, used as a word divider in Western scripts.
Well, place the cursor into the line from where you want to clean it up and then navigate to Edit -> Advanced -> Delete Horizontal White Space or press Ctrl + E , \ . That will automatically remove the additional spaces from your code.
Up until recently I had no idea that Visual Studio had the same option to display white space. Jeff Atwood’s recent blog post Whitespace: The Silent Killer had a screen shot on some code showing white space characters, so I hunted around in the Visual Studio toolbars for a little bit and found the option under the Edit menu.
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.
To view all whitespaces: Before 1.6.0, you had to set editor.renderWhitespace to true: Show activity on this post. It can also be done via the main menu View -> Render Whitespace Show activity on this post. For those willing to toggle whitespace characters using a keyboard shortcut, you can easily add a keybinding for that.
Display white space characters Menu: You can toggle the visibility of the white space characters from the menu: Edit > Advanced > View White Space. Button: If you want to add the button to a toolbar, it is called Toggle Visual Space in the command category "Edit". The actual command name is: Edit.ViewWhiteSpace.
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 If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
