如何自定义制表符到空间的转换因子？

使用Visual Studio Code时如何自定义制表符到空间的转换因子？

例如，现在在超文本标记语言中，每次按TAB似乎产生两个空格，但在TypeScript中它产生4。

1056008 次浏览
小开
最佳答案

默认情况下，Visual Studio Code将尝试根据您打开的文件猜测您的缩进选项。

您可以通过"editor.detectIndentation": false关闭缩进猜测。

您可以通过菜单文件中的windows→偏好→用户设置和菜单代码中的mac→偏好→设置或⌘,中的这三个设置轻松自定义：

// The number of spaces a tab is equal to. This setting is overridden// based on the file contents when `editor.detectIndentation` is true."editor.tabSize": 4,
// Insert spaces when pressing Tab. This setting is overriden// based on the file contents when `editor.detectIndentation` is true."editor.insertSpaces": true,
// When opening a file, `editor.tabSize` and `editor.insertSpaces`// will be detected based on the file contents. Set to false to keep// the values you've explicitly set, above."editor.detectIndentation": false
小开

我正在运行版本1.21，但我认为这也可能适用于其他版本。

看看屏幕右下角，您应该会看到Spaces或Tab-Size的内容。

我的显示空间，→

在此处输入图片描述

  1. 点击空间（或标签页大小）
  2. 选择缩进使用空格或使用标签缩进
  3. 选择您喜欢的空格或制表符的数量。

这仅适用于每个文档，而不是项目范围。如果您想在项目范围内应用它，您还需要将"editor.detectIndentation": false添加到您的用户设置中。

小开

默认情况下，Visual Studio Code会自动检测当前打开文件的缩进。如果要关闭此功能并使所有缩进（例如，两个空格），请在用户设置或工作区设置中执行以下操作。

{"editor.tabSize": 2,
"editor.detectIndentation": false}
小开

我们可以按文件类型控制选项卡大小带有编辑配置及其VS Code的配置文件扩展名。然后我们可以使Alt+Shift+F特定于每种文件类型。

安装

使用CTRL+P打开VS Code命令面板并粘贴：

ext install EditorConfig

示例配置

编辑配置

[*]indent_style = space
[*.{js,ts,json}]indent_size = 2
[*.java]indent_size = 4
[*.go]indent_style = tab

settings.json

EditorConfig覆盖settings.json为编辑器配置的任何内容。无需更改editor.detectIndentation。

小开

您想确保您的editorconfig与您的用户或工作区设置配置不冲突，因为当我的编辑器配置撤消这些更改时，我只是有点烦恼，认为设置文件设置没有被应用。

小开

说明

如果您正在谈论<强>更漂亮 for tabsize，请转到此答案的第2节

第1节：VS代码方式

好吧，如果您喜欢开发人员的方式，Visual Studio Code允许您为tabSize指定不同的文件类型。这是我的settings.json示例，默认为四个空格，JavaScript/JSON为两个空格：

{// I want my default to be 4, but JavaScript/JSON to be 2"editor.tabSize": 4,"[javascript]": {"editor.tabSize": 2},"[json]": {"editor.tabSize": 2},
// This one forces the tab to be **space**"editor.insertSpaces": true}

PS：如果您不知道如何打开此文件（特别是在新版本的Visual Studio Code中），您可以：

  1. 左下档→
  2. 设置→右上角打开设置

在此处输入图片描述

第2节：如果使用更漂亮

如果你正在使用漂亮，事情可能会有所不同，漂亮有2个级别的设置：

  1. 用户级别，您可以单击扩展并单击设置查找关键字tabWidth
  2. 项目级别，您可以从文件.prettierrc中的根项目级别添加/更新
小开

这是lonefy.vscode-js-css-html-formatter的责任。禁用它，然后安装HookyQR.beautify。

现在，保存您的标签不会被转换。

小开

User3550138是正确的。lonefy.vscode-js-css-html-formatter覆盖了其他答案中提到的所有设置。但是，您不必禁用或卸载它，因为它可以配置。

通过打开扩展侧边栏并单击此扩展可以找到完整的说明，它将在编辑器工作区中显示配置说明。至少在Visual Studio Code版本1.14.1中对我来说是这样。

小开

如果这是针对Angular 2的，并且CLI正在生成您希望格式不同的文件，您可以编辑这些文件以更改生成的内容：

npm_modules/@angular/cli/blueprints/component/files/__path__/*

不建议大量推荐，因为npm更新会删除您的工作，但它节省了我很多时间。

小开

@alex-dima 2015年的解决方案将更改所有文件的选项卡大小和空间，@Tricky 2016年的解决方案似乎只更改当前文件的设置。

截至2017年，我找到了另一个适用于每种语言的解决方案。Visual Studio Code没有为长生不老药使用正确的选项卡大小或空间设置，因此我发现我可以更改所有Elixir文件的设置。

我点击了状态栏中的语言（在我的情况下是“Elixir”），选择了“配置'Elixir'基于语言的设置…”，并编辑了Elixir特定的语言设置。我只是从左侧的默认设置中复制了“editor.tab大小”和“editor.insert空间”设置（我很高兴显示了这些设置），然后在右侧进行了修改。

它工作得很好，现在所有Elixir语言文件都使用正确的选项卡大小和空间设置。

小开

菜单文件→偏好→设置

添加到用户设置：

"editor.tabSize": 2,"editor.detectIndentation": false

然后右键单击您的文档（如果您已经打开了一个），然后单击格式文档以使您现有的文档遵循这些新设置。

小开

我尝试将编辑器.tabSize更改为4，但.editorConfig覆盖了我指定的任何设置，因此无需更改用户设置中的任何配置。您只需要编辑. editorConfig文件：

set indent_size = 4
小开

使用TypeScript时，默认制表符宽度始终为2，无论工具栏中的内容如何。您必须在用户设置中设置“prettier.tab宽度”才能更改它。

Ctrl+P、类型→用户设置，添加：

"prettier.tabWidth": 4
小开

如果这篇文章中接受的答案不起作用，试试这个：

我在编辑器中安装了Visual Studio Code的编辑器配置，它一直覆盖我的用户设置，这些设置设置为使用空格缩进文件。每次我在编辑器选项卡之间切换时，即使我已经将缩进转换为空格，我的文件也会自动使用选项卡缩进！！！

卸载此扩展后，缩进不再切换编辑器选项卡之间的变化，我可以更舒适地工作，而不是每次切换文件时都必须手动将选项卡转换为空格-这很痛苦。

小开

在Visual Studio代码版本1.31.1或更高版本中（我认为）：像SedAlex Dima一样，您可以通过以下设置轻松自定义

  • Windows在菜单文件→偏好→用户设置或使用短键Ctrl+Shift+P
  • Mac在菜单代码→偏好→设置或中，

在此处输入图片描述

在此处输入图片描述

小开

如果您在Visual Studio Code中使用更漂亮的扩展，请尝试将其添加到settings.json文件中：

"editor.insertSpaces": false,"editor.tabSize": 4,"editor.detectIndentation": false,
"prettier.tabWidth": 4,"prettier.useTabs": true  // This made it finally work for me
小开

在右下角，你有空格：空间：2

您可以根据需要更改缩进：缩进选项

小开

我必须像以前的答案一样做很多设置编辑，所以我不知道是什么让它在经过大量修改后发挥作用。

在我关闭并打开IDE之前，一切都不起作用，但我做的最后三件事是禁用lonefy.vscode-js-css-html-formatter、"html.format.enable": true,并重新启动Visual Studio。

{"editor.suggestSelection": "first","vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue","workbench.colorTheme": "Default Light+","[html]": {"editor.defaultFormatter": "vscode.html-language-features","editor.tabSize": 2,"editor.detectIndentation": false,"editor.insertSpaces": true},"typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,"editor.tabSize": 2,"typescript.format.insertSpaceAfterConstructor": true,"files.autoSave": "afterDelay","html.format.indentHandlebars": true,"html.format.indentInnerHtml": true,"html.format.enable": true,"editor.detectIndentation": false,"editor.insertSpaces": true,}
小开

我们心爱的社区成员已经提供了很多很好的答案。我实际上想添加C#代码tabSize并找到了这个线程。我找到了许多解决方案，官方代码文档很棒。我只想分享我的C#设置：

"[csharp]": {"editor.insertSpaces": true,"editor.tabSize": 4},

只需将上述代码复制并粘贴到您的settings.json文件并保存。谢谢

小开
  1. CTRL+逗号
  2. 使用制表符搜索缩进
  3. 去改变编辑器：标签大小

在此处输入图片描述

就这些了

小开

从的评论：

有没有办法改变每种语言的tabsize？例如，在同一个工作区（例如Ruby、JavaScript、CSS等）中使用不同语言编辑多个文件时——Ruby将是2个空格，但CSS将是4个……通常

这就是为什么在VSCode 1.63（2021年11月）中，您有：

多语言特定的编辑器设置

您现在可以一次为多种语言配置特定于语言的编辑器设置。
以下示例显示了如何同时自定义javascript和打字脚本语言的设置：

"[javascript][typescript]": {"editor.maxTokenizationLineLength": 2500}

在您的案例中：

"[ruby][html]": {"editor.insertSpaces": true,"editor.tabSize": 2},"[csharp][typescript]": {"editor.insertSpaces": true,"editor.tabSize": 4},
小开

在Visual Studio Code版本1.14.1中

  • 选择文件>首选项>设置/按[Ctrl+，]

转到设置

  • 选择用户>常用
  • 设置Tab大小为4

更改选项卡大小


提交答案