在Visual Studio代码中显示空白字符

本文翻译自：Show whitespace characters in Visual Studio Code

Is it possible to show whitespace characters, like the space character, in Visual Studio Code? 是否可以在Visual Studio代码中显示空格字符，如空格字符？

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. 在settings.json似乎没有它的选项（虽然它是Atom.io中的一个选项），但我无法使用CSS显示空格字符。

---

#1楼

参考：https://stackoom.com/question/22Swd/在Visual-Studio代码中显示空白字符

---

#2楼

VS Code 1.6.0 and Greater VS Code 1.6.0和更高版本

As mentioned by aloisdg below , editor.renderWhitespace is now an enum taking either none , boundary or all . 正如提到以下aloisdg ， editor.renderWhitespace现在是一个枚举采取任何none ， boundary或all 。 To view all whitespaces: 要查看所有空格：

"editor.renderWhitespace": "all", 

Before VS Code 1.6.0 在VS Code 1.6.0之前

Before 1.6.0, you had to set editor.renderWhitespace to true : 在1.6.0之前，您必须将editor.renderWhitespace设置为true ：

"editor.renderWhitespace": true

---

#3楼

Just to demonstrate the changes that editor.renderWhitespace : true will do to your VSCode I added this screenshot: 只是为了演示editor.renderWhitespace : true会对你的VSCode做的更改，我添加了这个截图：
. 。

Where Tab are → and Space are . 标签是→ 空格 .

---

#4楼

UPDATE (June 2019) 更新（2019年6月）

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 (ie no need to type JSON data etc) for viewing and editing all the available keyboard shortcuts. 在最新版本的Visual Studio Code中，现在有一个用户友好的图形界面（即不需要输入JSON数据等）来查看和编辑所有可用的键盘快捷键。 It is still under 它还在

File > Preferences > Keyboard Shortcuts (or use Ctrl + K Ctrl + S ) 文件>首选项>键盘快捷键 （或使用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: 所以现在添加new和编辑现有的键绑定都更容易：

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. 只需按相关行左侧的+号（或按Enter键 ，或双击该行上的任意位置），然后在弹出窗口中输入所需的组合。

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 ). 对于那些愿意使用键盘快捷键切换空白字符的用户 ，可以在keybindings.json文件中添加自定义绑定（“ 文件”>“首选项”>“键盘快捷键” ）。

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 + Shift + i的组合来切换不可见的字符，您当然可以选择另一种组合。

---

#5楼

It is not a boolean anymore. 它不再是boolean 。 They switched to an enum . 他们换成了enum 。 Now we can choose between: none , boundary , and all . 现在我们可以选择： none ， boundary和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 . 你可以在GitHub上看到原始差异。

---

#6楼

Show whitespace characters in Visual Studio Code 在Visual Studio代码中显示空白字符

change the setting.json, by adding the following codes! 通过添加以下代码更改setting.json！

// 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.) （PS：没有“真实”选项！即使它也有效。）