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

Question

是否可以在 Visual Studio 代码中显示白色 space 字符，例如 space 字符？

在 settings.json 中似乎没有它的选项（虽然它在 Atom.io 中是一个选项），我没有'能够使用 CSS.

显示白色 space 字符

Answer 1

VS Code 1.6.0 及更高版本

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

"editor.renderWhitespace": "all",

VS Code 1.6.0 之前

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

"editor.renderWhitespace": true

Answer 2

只是为了演示 editor.renderWhitespace : none||boundary||all 对您的 VSCode 所做的更改，我添加了此屏幕截图：
.

其中 Tab 是 → 和 Space 是 .

Answer 3

更新（2019 年 6 月）

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

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

File > Preferences > Keyboard Shortcuts (or use Ctrl+K Ctrl+S)

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

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

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

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

原始（旧）答案

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

示例：

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

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

Answer 4

它不再是 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 上看到原始差异。

Answer 5

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

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

the file path is .vscode/settings.json in your project root folder.

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

就这样吧！
（PS：没有 "true" 选项！即使它也有效。）

Answer 6

为了使 diff 类似于 git diff 显示空白，请将 diffEditor.ignoreTrimWhitespace 设置为 false。 edit.renderWhitespace 的帮助很小。

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

要更新设置，请转至

File > Preferences > User Settings

Note for Mac users: The Preferences menu is under Code not File. For example, Code > Preferences > User Settings.

这将打开一个名为 "Default Settings" 的文件。扩大区域//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",

更令人困惑的是，left window "Default Settings" 不可编辑。您需要使用标题为 "settings.json" 的 right window 覆盖它们。您可以将粘贴设置从 "Default Settings" 复制到 "settings.json":

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

我最终关闭了 renderWhitespace。

Answer 7

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

Answer 8

使空白可见的选项现在显示为“查看”菜单上的一个选项，如 Visual Studio 代码的 1.15.1 版中的 "Toggle Render Whitespace"。

Answer 9

按 F1 键，然后输入 "Toggle Render Whitespace" 或您能记住的部分 :)

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

Answer 10

打开用户首选项。键盘快捷键：CTR + SHIFT + P -> 首选项：打开用户设置；
在搜索字段中插入 Whitespace 和 select all 参数

Answer 11

*** 更新 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。

The editor.renderWhitespace setting now supports a selection option. With this option set, whitespace will be shown only on selected text:

"editor.renderWhitespace": "selection"

和

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

Answer 12

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

在View -> 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

关于 macOS

的注释

在mac环境下，您可以在帮助菜单下搜索任何菜单选项，然后它会打开您要查找的确切菜单路径。例如，搜索 whitespace 结果如下：

Answer 13

我想将此建议作为旁注提供。
如果你想修复所有 'trailing whitespaces' 警告你的 linter 扔给你。
您可以使用整个文件 VSCode 自动 trim 空格键盘和弦。
CTRL+K / X （默认）

我一直在考虑显示空格，因为我的 linter 一直用空格警告来骚扰我。这就是我来这里的原因。

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

Show whitespace characters in Visual Studio Code

visual-studio-code

whitespace

vscode-settings

non-printing-characters

更新（2019 年 6 月）

原始（旧）答案

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

关于 macOS