580

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.

4

13 回答 13

802

VS Code 1.6.0 及更高版本

正如下面的 aloisdg所提到的,editor.renderWhitespace现在是一个枚举,要么noneboundary要么all。查看所有空格:

"editor.renderWhitespace": "all", 

VS Code 1.6.0 之前

在 1.6.0 之前,您必须设置editor.renderWhitespacetrue

"editor.renderWhitespace": true
于 2015-05-09T13:41:28.937 回答
183

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

于 2016-12-30T15:14:59.907 回答
94

更新(2019 年 6 月)

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

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

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

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

在此处输入图像描述


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

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

在此处输入图像描述

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


原始(旧)答案

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

示例

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

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

于 2016-05-31T23:17:07.843 回答
59

在 Visual Studio Code 中显示空白字符

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

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

像这样!
(PS:没有“真正”的选项!,即使它也有效。) 在此处输入图像描述

于 2016-10-17T08:01:55.513 回答
35
于 2016-05-09T13:37:18.653 回答
35

*** 更新 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 中,默认值将更改为selectionv1.42 中的from none

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

v1.37 更新:添加仅在选定文本中呈现空白的选项。请参阅v1.37 发行说明,渲染空白

editor.renderWhitespace设置现在支持一个selection选项。设置此选项后,空格将仅显示在选定文本上:

"editor.renderWhitespace": "selection"

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

选择中的空白渲染演示


于 2019-08-05T02:39:32.380 回答
19

boolean不再是一个。他们切换到enum. 现在我们可以在:noneboundary和之间进行选择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 上查看原始差异。

于 2016-10-14T07:54:59.347 回答
18
  1. 打开用户首选项。键盘快捷键:CTR + SHIFT + P-> 首选项:打开用户设置;

  2. 插入搜索字段Whitespace,并选择所有参数 在此处输入图像描述

于 2019-07-10T11:04:52.403 回答
12

所有平台(Windows/Linux/Mac):

它在View -> Render Whitespace下。

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


关于 macOS 的注意事项</h3>

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

演示

于 2020-08-22T06:34:41.253 回答
7

为了让差异显示空白,类似于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 用户注意事项:Preferences 菜单位于 Code not File 下。例如,代码 > 首选项 > 用户设置。

这将打开一个名为“默认设置”的文件。扩大面积//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

于 2016-11-22T14:23:20.547 回答
5

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

于 2017-09-05T11:52:07.233 回答
5

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

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

于 2018-05-03T07:54:18.340 回答
0

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

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

于 2020-09-14T08:55:37.557 回答