在 Visual Studio Code 中显示空白字符

VS Code 1.6.0 及更高版本

正如 aloisdg below 所提到的，editor.renderWhitespace 现在是一个采用 none、boundary 或 all 的枚举。查看所有空格：

"editor.renderWhitespace": "all", 

VS Code 1.6.0 之前

在 1.6.0 之前，您必须将 editor.renderWhitespace 设置为 true：

"editor.renderWhitespace": true

---

也可以通过主菜单完成View -> Render Whitespace

---

更新（2019 年 6 月）

对于那些愿意使用键盘快捷键切换空白字符的人，您可以轻松地为此添加键绑定。

在最新版本的 Visual Studio Code 中，现在有一个用户友好的图形界面（即无需键入 JSON 数据等），用于查看和编辑所有可用的键盘快捷键。还在下

文件 > 首选项 > 键盘快捷键（或使用 Ctrl+K Ctrl+S）

还有一个搜索字段可帮助快速查找（和过滤）所需的键绑定。所以现在添加新的和编辑现有的键绑定要容易得多：

https://i.stack.imgur.com/3tyIY.png

切换空白字符没有默认的键绑定，因此请随意添加一个。只需按相关行左侧的 + 号（或按 Enter，或双击该行的任意位置），然后在弹出窗口中输入所需的组合。

如果您选择的键绑定已用于其他一些操作，则会有一个方便的警告，您可以单击并观察哪些操作已使用您选择的键绑定：

https://i.stack.imgur.com/HJZt0.png

如您所见，一切都非常直观和方便。干得好，微软！

原始（旧）答案

对于那些愿意使用键盘快捷键切换空白字符的人，您可以将自定义绑定添加到 keybindings.json 文件（文件 > 首选项 > 键盘快捷键）。

例子：

// Place your key bindings in this file to overwrite the defaults
[
    {
        "key": "ctrl+shift+i",
        "command": "editor.action.toggleRenderWhitespace"
    }
]

这里我指定了 Ctrl+Shift+i 的组合来切换不可见字符，您当然可以选择其他组合。

---

在 Visual Studio Code 中显示空白字符

通过添加以下代码更改 settings.json！

文件路径是项目根文件夹中的 .vscode/settings.json 。

    // Place your settings in this file to overwrite default and user settings.
    {
        "editor.renderWhitespace": "all"
    }

https://i.stack.imgur.com/EWTeo.png

---

*** 更新 2020 年 8 月版本 *** 请参阅 https://github.com/microsoft/vscode/pull/104310

"editor.renderWhitespace": "trailing" // 添加选项

Add a new option ('trailing') to editor.renderWhitespace that renders only 
trailing whitespace (including lines with only whitespace).

*** 更新 2020 年 2 月版本 *** 请参阅 https://github.com/microsoft/vscode/issues/90386

在 v1.43 中，默认值将从 none 更改为 selection，就像在 v1.42 中一样。

"editor.renderWhitespace": "selection"  // default in v1.43

v1.37 更新：添加仅在选定文本中呈现空白的选项。请参阅v1.37 release notes, render whitespace。

editor.renderWhitespace 设置现在支持选择选项。设置此选项后，空格将仅显示在选定文本上：

"editor.renderWhitespace": "selection"

和

"workbench.colorCustomizations": {    
  "editorWhitespace.foreground": "#fbff00"
}

https://i.stack.imgur.com/fEobC.jpg

---

https://i.stack.imgur.com/ml310.png

其中 Tab 是 → 而 Space 是 .

---

打开用户首选项。键盘快捷键：CTR + SHIFT + P -> 首选项：打开用户设置；在搜索字段中插入空格，并选择所有参数

---

它不再是 boolean。他们切换到 enum。现在我们可以选择：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",

您可以在 GitHub 上看到原始差异。

---

所有平台（Windows/Linux/Mac）：

它在视图-> 渲染空白下。

⚠️ 有时菜单项显示它当前处于活动状态，但您可以看到空格。您应该取消选中并再次检查以使其正常工作。这是一个已知的错误🐞

关于 macOS 的注意事项 

在 mac 环境下，你可以在 Help 菜单下搜索任意菜单选项，然后它会打开你要找的确切的菜单路径。例如，搜索空格会导致：

https://i.stack.imgur.com/R6Ya7.jpg

---

为了让差异显示类似于 git diff 的空格，请将 diffEditor.ignoreTrimWhitespace 设置为 false。 edit.renderWhitespace 只是微不足道的帮助。

// Controls if the diff editor shows changes in leading or trailing whitespace as diffs
"diffEditor.ignoreTrimWhitespace": false,

要更新设置，请转到

文件 > 首选项 > 用户设置 Mac 用户注意事项：首选项菜单位于代码而非文件下。例如，代码 > 首选项 > 用户设置。

这将打开一个名为“默认设置”的文件。展开区域 //Editor。现在您可以看到所有这些神秘的 editor.* 设置的位置。搜索 (CTRL + F) renderWhitespace。在我的盒子上，我有：

// 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",

更令人困惑的是，左侧窗口“默认设置”不可编辑。您需要使用标题为“settings.json”的右侧窗口覆盖它们。您可以将粘贴设置从“默认设置”复制到“settings.json”：

// Place your settings in this file to overwrite default and user settings.
{
     "editor.renderWhitespace": "all",
     "diffEditor.ignoreTrimWhitespace": false
}

我最终关闭了 renderWhitespace。

---

使空白可见的选项现在显示为“视图”菜单上的一个选项，如 Visual Studio Code 1.15.1 版中的“切换渲染空白”。

---

点击 F1 按钮，然后输入“Toggle Render Whitespace”或您能记住的部分：)

我使用 vscode 版本 1.22.2，所以这可能是 2015 年不存在的功能。

---

我想提供这个建议作为旁注。如果您正在寻找修复所有“尾随空格”警告，您的 linter 会向您抛出。您可以让 VSCode 使用键盘和弦自动修剪整个文件中的空格。 CTRL+K / X（默认）

我正在研究显示空格，因为我的 linter 一直在用空格警告困扰我。所以这就是我在这里的原因。

---