如何更改 GitHub 上的选项卡大小？答案

【问题标题】：How to change tab size on GitHub?如何更改 GitHub 上的选项卡大小？
【发布时间】：2012-01-12 11:00:14
【问题描述】：

当我在 GitHub 上查看文件时，选项卡显示为 8 个空格。

例子：

是否可以将此配置更改为 2 个或 4 个空格？

【问题讨论】：

您也可以查看GitHub问题#170 pre { tab-size: 4 }中提供的答案
我认为您应该将接受的答案更改为@rofrol 关于使用.editorconfig 的答案，我认为他的答案包括以其他人会看到的方式设置配置的当前最佳方法您希望看到的代码，并在您阅读时改变其他人的代码的外观。
@f1lt3r 我不同意。如果人们真的想用 8 个空格来查看我的代码，那么对他们来说就更强大了。我不想以这种方式限制它们，这样我就可以在 github 上为自己查看 4 个空格。如果答案要改变，那应该是mortenpi的答案
谁能解释一下默认使用 8 个空格的逻辑？我无法想象 8 个空格看起来很荒谬的任何场景——但它是 github 上的默认设置？什么给了？
九月。 2021：你现在有一个官方的 GitHub 配置文件设置，它将适用于所有 GitHub 页面。见my answer below。

标签： tabs github tab-size

【解决方案1】：

您可以将?ts=2 或?ts=4 附加到URL 以更改标签大小。

示例：https://github.com/jquery/jquery/blob/main/src/core.js?ts=2

该值似乎可以是 1 到 12 之间的任何值。但它不适用于 Gists 或原始文件视图。

来源：GitHub Cheat Sheet

【讨论】：

这是可能的，但如果有一种简单的方法来选择标签宽度而不是记住 URL 参数，那就太好了。
如果 github 允许您将其保存为首选项，这样您就不需要继续将其放回 URL 中，这也很好。
@PhilDennis 在 Chrome 上为我工作（在 Linux 上）。
@NikolaMihajlović 有点微妙，但是 ts 参数需要在 URL 中的 # 片段之前。例如。 github.com/jquery/jquery/commit/…
不错的解决方案。遗憾的是，它不适用于 PR 中的差异。

【解决方案2】：

为您的存储库设置默认显示的选项卡大小

当您的存储库中有 .editorconfig 时，它会尊重它在 GitHub 上查看代码时。

indent_style = tab 和 indent_size = 4 显示有 4 列的选项卡而不是 8 https://github.com/isaacs/github/issues/170#issuecomment-150489692

Example .editorconfig 适用于 JetBrains 产品的多个扩展：

root = true

[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
[*.{js,jsx,html,sass}]
charset = utf-8
indent_style = tab
indent_size = 4
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

更改您在其他存储库中查看选项卡的方式

在浏览器中安装Stylus，而不是安装GitHub: better-sized tabs in code。

还有谷歌浏览器扩展：

【讨论】：

似乎github不尊重没有名称的文件（.gitconfig等）的editorconfig文件。知道为什么或它是一个错误吗？前github.com/rmandvikar/git-setup/blob/tabs/.gitconfig
dotfiles 似乎不受 [*] 的尊重（在 github 上）。我不得不用[.*]添加另一个条目。
它在提交中不被尊重 :-(
此功能是否已从 github 中删除？我以前正确的一些 repo 似乎被重置为 8 个空格。
@rofrol 我想我错了。选项卡大小在代码和差异中正常工作，但在 README.md 代码 sn-ps 中不能正常工作。这是一个新的观察；我不知道README.md 代码 sn-ps 是否做过除 8 个空格以外的制表符大小。

【解决方案3】：

实际上可以通过浏览器扩展来做到这一点。安装Stylish（在Firefox 或Chrome 中），然后安装此用户样式：“GitHub: better-sized tabs in code”。

它可能不适用于某些语言。例如，我正在查看一个 JavaScript 文件，但我没有注意到任何变化。于是我把作者的样式删掉了，在里面放了以下几行：

.tab-size {
  -webkit-tab-size: 4 !important;
     -moz-tab-size: 4 !important;
       -o-tab-size: 4 !important;
          tab-size: 4 !important;
}

它可以在 Chrome (screenshot) 上运行。

从屏幕截图中可以看出，我还启用了宽屏模式并将配色方案更改为 Solarized。所以我通过Stylish extension for Chrome 在 GitHub 页面上运行了三种用户样式。我希望这对某人有所帮助。

【讨论】：

我写了that user style。我很高兴你发现它有用。我已经修复它并在 Chrome 中对其进行了测试，现在无需您的修改即可使用。
您可能还喜欢我的用户样式“All code has tab size 4”，它会更改所有网站上<code> 元素的标签大小。
Github 将每个 \t 替换为 8 个 &nbsp;。默德。
是的，他们以前没有这样做，我不知道他们现在为什么这样做 :( 我想一个解决方案可能是有人编写一个脚本来替换 say... 4 个连续两个或无论如何。但我认为那必须是“用户脚本”。
我们的GitHub Dark 时尚用户样式允许您设置标签大小。它正在积极维护中。

【解决方案4】：

Since Sept. 2021，您可以直接在 GitHub 设置中设置标签大小：github.com/settings/appearance。

在Changelog "Tab size rendering preference"宣布。

没有了.editorconfig
没有了?ts=2 added to the URL

只是：

注意：例如，您不能输入“3”。你会得到：

无法保存选项卡大小呈现首选项：
验证失败：
标签大小不包含在列表中

【讨论】：

这个答案应该更高；不幸的是，过时的答案有更多的选票。我最初看到前两个答案（通过投票），认为这是不可能的用户特定设置并放弃了。然后我在 UI 中偶然发现了这个设置。

【解决方案5】：

更新

是的。正如 mortenpi 所说，这可以通过一个额外的查询参数来完成。详情请见his answer。

原答案

是否可以将此配置更改为 2 或 4 个空格？

没有。它只能通过Ace 编辑器作为编辑功能的一部分使用，并且不会保留更改。

blog post 提供了有关嵌入式 IDE 的更多信息。

但是，如果您知道要查看的 blob（文件）的 url，则可以通过使用 editblob 段来轻松切换到编辑模式/strong> 细分并使用下拉菜单选择您喜欢的标签大小。

标准视图：https://github.com/moroshko/mmSelect/blob/master/mm_select.js
王牌视图：https://github.com/moroshko/mmSelect/edit/master/mm_select.js

【讨论】：

好主意，但问题是一旦你进入 EDIT 模式，你也会对上述存档进行 FORK。大约 50 次仅查看编辑后可能会有点过分；)
同意。但这可能是开始贡献的良好动力；）
正如@chrisdembia 提到的，这不再正确； github 允许您通过将值作为查询参数传递来更改选项卡大小（例如，?ts=4）
社区有没有办法覆盖所选答案？
@chrisdembia 感谢您的提醒；）更新了答案以指向莫伦蒂的答案。

【解决方案6】：

如果项目是你的，请在项目根目录中创建一个名为“.editorconfig”的文件，并为其提供以下内容。

[*]
indent_style = tab
indent_size = 4

这将导致 GitHub 在项目中呈现 4 宽的选项卡。

这是一个EditorConfig文件，正式指定，很多编辑器都支持，也支持更广泛的编辑器配置，比如指定所有.html文件都是UTF-8编码。

如果项目不是你的，请考虑打开一个问题，要求作者指定他们想要的缩进样式。

【讨论】：

【解决方案7】：

如果您喜欢 UserScripts，这对我有用：

// ==UserScript==
// @name         GitHub Tabs
// @namespace    http://foldoc.org/
// @version      1
// @description  Set sensible tabs on GitHub
// @author       Denis Howe
// @match        https://github.com/*
// ==/UserScript==

document.querySelectorAll('table').forEach(t => { t.dataset.tabSize = 2 });

【讨论】：

我会更喜欢这个替代方案，但这似乎或多或少随机工作：如果在用户脚本运行之前没有加载数据（例如文件列表然后单击打开文件），它不会工作。
干得好，但是对注释框中的代码块不起作用。

【解决方案8】：

我这样做是为了修复它们http://valjok.blogspot.com/2014/07/indentation-correction-for-exposing.html。

另一个选项是embedding your gist 时，将所有制表符替换为所需的空格数

<div id="willReplaceTabs">
 <script src="https://gist.github.com/valtih1978/99d8b320e59fcde634ad/cf1b512b79ca4182f619ed939755826c7f403c6f.js"></script>

 <script language="javascript">
  var spaces = "  "
  willReplaceTabs.innerHTML = willReplaceTabs.innerHTML.replace(/\t/g, spaces)
 </script>
</div>

【讨论】：

【解决方案9】：

如果它是您正在处理的项目的一个选项，则更改您的编辑器以将制表符视为空格将解决问题。

因此，例如，在 Visual Studio Code 中，配置如下所示：

{
    "editor.tabSize": 2,
    "editor.insertSpaces": true
}

在 Sublime 中是：

{
    "tab_size": 2,
    "translate_tabs_to_spaces": true
}

直到最近我还坚持使用非间隔制表符。切换后，它修复了 Github 渲染异常，我没有注意到我的工作流程中有任何明显的缺点。

【讨论】：

【解决方案10】：

如果可能，最好的解决方案是说服您正在查看的源代码的维护人员将所有选项卡替换为正确数量的空格。

鉴于您经常在网络上看到它，现在在代码中使用标签是有问题的，“每个标签有多少空间”的决定取决于它的显示位置。

【讨论】：

这是正确的答案，不值得被否决。有太多的软件不允许您将“选项卡可配置”的选项卡宽度更改为除了一厢情愿之外的任何东西。而且，如果您缩进的距离不是首选标签宽度的倍数，那么您现在会混合使用标签和空格，并且调整标签大小甚至不再起作用。跨度>
阅读 Wikipedia 文章，了解 8 空格制表符的来源。 “尽管五个字符是半英寸并且是当时典型的段落缩进，但八个字符的常见水平制表符大小不断发展，因为对于可用的有限数字电子设备，以 2 的幂计算更容易以二进制计算。”您的答案使用循环推理（即标准是八个字符，因为这是标准）来关闭问题的大门。提问者对此标准不满意，几乎没有理由这样做。
@mrjedmao 可以，你可以?ts=4。
我更喜欢制表符而不是空格，因为当我将光标移动到空白处时，它可以将我的编辑速度提高 4 到 8 倍。
“除了付钱给开发者的人，嗯？”你大脑的 IDE 是否使用其逐行移动功能跳过了以下句子？我明确指出，项目的强制约定优先于个人偏好。 || “当所有编辑器都具有逐字/字段/行功能时，为什么要对自己这样做？”是的，您的意思是使用编辑器的功能来导航代码比简单地按一个键遍历整列更容易。此外，并非所有编辑器都说过功能，有些甚至工作方式不同。不要以为全世界都在使用 Sublime。