在 Visual Studio Code 中显示空白字符

Posted 2023-02-16

【中文标题】在 Visual Studio Code 中显示空白字符

【英文标题】：Show whitespace characters in Visual Studio Code

【发布时间】：2015-07-20 08:37:22

【问题描述】：

是否可以，例如空格字符？

settings.json 中似乎没有它的选项（尽管它是 Atom.io 中的一个选项），并且我无法使用显示空白字符CSS。

【参考方案1】：

在 Visual Studio Code 中显示空白字符

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

// Place your settings in this file to overwrite default and user settings.

    "editor.renderWhitespace": "all"

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

【参考方案2】：

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

它在View -> Render Whitespace下。

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

---

关于 macOS 的说明

在mac环境下，你可以在Help菜单下搜索任意一个菜单选项，就会打开你要找的那个菜单路径。例如，搜索 white空格会导致：

【参考方案3】：

我想将此建议作为附注。 如果您正在寻找修复所有“尾随空格”警告您的 linter 向你投掷。 您可以使用 VSCode 自动修剪整个文件中的空格 键盘和弦。CTRL+K / X （默认）

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

【参考方案4】：

*** 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 设置现在支持selection 选项。设置此选项后，空格将仅显示在选定文本上：

"editor.renderWhitespace": "selection"

和

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

---

【讨论】：

如果你想让它不那么存在，vs 代码也接受 alpha 通道，所以 #fbff0040 也可以使点更透明

喜欢那颗能定色的小宝石——对我的一群看不到灰点的人来说非常有帮助，哈哈

【参考方案5】：

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

【讨论】：

有没有办法只对选定的字符执行此操作，例如 Sublime 的 "draw_white_space": "selection" 选项？

@noio 还没有，但正在路上github

@drzaus, "editor.renderWhitespace": "boundary" 将是行的开头和结尾，而"deitor.renderWhitespace": "all" 将显示所有空格。 @AlexanderGonchiy，我发现打开文件>首选项>用户设置（或工作区设置）并在默认设置文件夹中使用“查找”来查找我需要的内容很有用。

文件 -> 首选项 -> 设置。搜索“空白”。在“编辑器：渲染空白”下，有一个下拉菜单可以选择您的新设置。 (v1.13.2)

@noio，在 v1.37（2019 年 8 月上旬发布）中添加了selection 选项下方的我的答案。

【参考方案6】：

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

Tab 是 →，Space 是 .

【讨论】：

P.S.颜色模式不是更改的一部分（我有一个额外的插件）

插件可以在这里找到：marketplace.visualstudio.com/…

【参考方案7】：

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

【参考方案8】：

打开用户首选项。键盘快捷键：CTR + SHIFT + P -> 首选项：打开用户设置；

在搜索字段中插入空格，并选择all参数

【讨论】：

另外，对于 VS Code 1.45（在 OSX 上），默认值为“selection”。

这是最好的答案！它实际上解释了如何到达该部分以及做什么。谢谢！

【参考方案9】：

更新（2019 年 6 月）

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

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

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

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

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

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

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

---

原始（旧）答案

对于那些愿意使用键盘快捷键切换空白字符，您可以将自定义绑定添加到 keybindings.json 文件（File > Preferences > Keyboard快捷方式）。

示例：

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

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

【讨论】：

我的 Visual Studio 默认使用ctrl+e ctrl+s。对于像这样的组合快捷方式，您需要在两个组合之间放置一个空格，而不是逗号。

【参考方案10】：

点击 F1 按钮，然后输入“切换渲染空白”或您能记住的部分：)

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

【讨论】：

这行得通！但它只会在“全部”和“无”之间切换，跳过“边界”选项。

【参考方案11】：

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

【参考方案12】：

为了让差异显示类似于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”的 right 窗口覆盖它们。您可以将粘贴设置从“默认设置”复制到“settings.json”：

// Place your settings in this file to overwrite default and user settings.

     "editor.renderWhitespace": "all",
     "diffEditor.ignoreTrimWhitespace": false

我最终关闭了renderWhitespace。

【参考方案13】：

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

【讨论】：

也可以安装一个名为 Trailing Spaces 的扩展来只显示尾随的空格。