How to render Whitespace Characters in Visual Studio Code

# Table of Contents

1. How to render Whitespace Characters in Visual Studio Code
2. Using the top menu to render Whitespace characters
3. Render whitespace characters and update their color
4. Rendering whitespace characters using your global settings.json
5. Setting a keyboard shortcut to toggle rendering whitespace

# How to render Whitespace Characters in Visual Studio Code

To render whitespace characters in VS Code:

1. Press:

• Ctrl + Shift + P on Windows and Linux
• Command + Shift + P on macOS

2. Type user settings and select Preferences: Open User Settings.

You can also open the settings screen by pressing Ctrl + , on Windows and Linux or Cmd + , on macOS.

3. Type render whitespace and set the Editor: Render Whitespace setting to all.

When the Editor: Render Whitespace setting is set to all, all whitespace characters are displayed.

You can also set the setting to:

• selection - to only display the whitespace characters in the highlighted text.
• trailing - to only display the trailing whitespace characters.
• boundary - displays whitespace characters at the beginning and end of lines (not between words).

Once the setting is set to all, all whitespace characters are shown.

# Using the top menu to render Whitespace characters

You can also show the whitespace characters using the top menu:

1. Click on View in the top menu.
2. Click on Appearance and then click Render Whitespace.

If you don't see the top menu on Windows or Linux, press the Alt key to toggle it.

# Render whitespace characters and update their color

You can also render whitespace characters using a settings.json file:

1. In the root directory of your project, create a .vscode folder.
2. Create a settings.json file in the .vscode folder.

Add the following code to the settings.json file.

Copied!
{
  "editor.renderWhitespace": "all",
  "workbench.colorCustomizations": {
   "editorWhitespace.foreground": "#F4EA56"
  }
}

Make sure the .vscode/settings.json file is located in the root directory of your project.

The following setting is used to render all whitespace characters.

Copied!
{
  "editor.renderWhitespace": "all",
}

And, the following setting is used to set the color of the whitespace characters.

Copied!
{
  "workbench.colorCustomizations": {
   "editorWhitespace.foreground": "#F4EA56"
  }
}

The setting is optional and can be set using the #RGB, #RGBA, #RRGGBB or #RRGGBBAA formats.

# Rendering whitespace characters using your global settings.json

You can also show whitespace characters by updating your global settings.json file:

1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).

2. Type user settings json.

3. Click on Preferences: Open User Settings (JSON)

4. Add the following properties to the object in the settings.json file.

Copied!
"editor.renderWhitespace": "all",
"workbench.colorCustomizations": {
  "editorWhitespace.foreground": "#F4EA56"
}

Make sure the properties are wrapped in an object if your settings.json file is empty.

Copied!
{
  "editor.renderWhitespace": "all",
  "workbench.colorCustomizations": {
   "editorWhitespace.foreground": "#F4EA56"
  }
}

The workbench.colorCustomizations property is optional and sets the color of the whitespace characters.

If you already have the property set in your settings.json file, you have to simply add the "editorWhitespace.foreground": "#F4EA56" line to the object.

Make sure you don't declare the workbench.colorCustomizations object multiple times in your settings.json file.

# Setting a keyboard shortcut to toggle rendering whitespace

You can also use a keyboard shortcut to toggle rendering the whitespace characters in your project.

1. Press:

• Ctrl + Shift + P on Windows and Linux.
• Command + Shift + P on macOS.

2. Type Keyboard Shortcuts and select Preferences: Open Keyboard Shortcuts.

3. Search for toggle render whitespace.

4. Click on the plus icon next to View: Toggle Render Whitespace or simply double-click on the row to add a keyboard shortcut.

You will be prompted to press the desired key combination.

Once done, press Enter to set the keyboard shortcut.

Now you can use the keybinding to show or hide the whitespace characters.

I've also written an article on how to remove the trailing spaces automatically in VS Code.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• VS Code: Remove Folder from Workspace open Multiple Folders
• Rename a File, Folder or Workspace in Visual Studio Code
• Remove unused imports and sort imports in VS Code
• VS Code: Open terminal in directory of currently opened file
• How to use the Color Picker in Visual Studio Code