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

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

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

我的显示空间，→

https://i.stack.imgur.com/9MROp.png

单击空格（或制表符大小） 选择使用空格缩进或使用制表符缩进 选择您喜欢的空格或制表符的数量。

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

---

笔记

如果您正在谈论 tabSize 的 prettier，请转到此答案的第 2 部分

第 1 节：VS Code 方式

好吧，如果您喜欢开发人员的方式，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 中），你可以：

左下齿轮→设置→右上角打开设置

https://i.stack.imgur.com/UR6K9.png

第 2 部分：如果使用 prettier

如果您使用 prettier，情况可能会再次不同，prettier 有 2 个级别的设置：

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

---

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

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}

---

我们可以使用 EditorConfig 及其 EditorConfig for VS Code 扩展名按文件类型控制标签大小。然后我们可以使 Alt + Shift + F 特定于每个文件类型。

安装

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

ext install EditorConfig

示例配置

.editorconfig

[*]
indent_style = space

[*.{js,ts,json}]
indent_size = 2

[*.java]
indent_size = 4

[*.go]
indent_style = tab

设置.json

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

---

如果您在 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

---

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

Windows 菜单文件 → 首选项 → 用户设置或使用快捷键 Ctrl + Shift + P

Mac 在菜单代码 → 首选项 → 设置或⌘，

https://i.stack.imgur.com/lIaep.png

https://i.stack.imgur.com/KfspU.png

---

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

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

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

---

CTRL + comma 使用制表符搜索缩进 Go and change Editor: Tab Size

https://i.stack.imgur.com/3yyHF.png

就这样

---

在您的右下角，您有空间：Spaces: 2

在那里您可以根据需要更改缩进：Indentation Options

---

那是lonefy.vscode-js-css-html-formatter的罪魁祸首。禁用它，然后安装 HookyQR.beautify。

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

---

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

---

如果这个帖子上接受的答案不起作用，试试这个：

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

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

---

使用 TypeScript 时，无论工具栏中显示什么，默认选项卡宽度始终为 2。您必须在用户设置中设置“prettier.tabWidth”才能更改它。

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

"prettier.tabWidth": 4

---

菜单文件→首选项→设置

添加到用户设置：

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

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

---

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

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

我点击了状态栏中的语言（在我的例子中是“Elixir”），选择了“Configure 'Elixir' language based settings...”，然后编辑了 Elixir 特定的语言设置。我只是从左侧的默认设置中复制了“editor.tabSize”和“editor.insertSpaces”设置（我很高兴显示了这些设置），然后在右侧进行了修改。

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

---

我必须像以前的答案一样进行很多设置编辑，所以我不知道经过大量修改后哪个使它起作用。

在我关闭并打开我的 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,
}

---

从 the comments：

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

这就是为什么使用 VSCode 1.63（2021 年 11 月），您可以：

多语言特定编辑器设置您现在可以一次为多种语言配置特定语言编辑器设置。以下示例显示了如何同时自定义 javascript 和 typescript 语言的设置： "[javascript][typescript]": { "editor.maxTokenizationLineLength": 2500 }

在你的情况下：

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

---

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

set indent_size = 4

---

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

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

不强烈推荐，因为 npm 更新会删除你的工作，但它为我节省了很多时间。

---

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

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

---