如何自定义制表符到 space 的转换系数？

Question

如何在使用 Visual Studio 代码时自定义制表符到 space 的转换系数？

例如，现在在 HTML 中，每次按下 TAB 似乎会产生两个 space，但在 TypeScript 中它会产生 4 个。

Answer 1

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

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

您可以通过菜单 File → Preferences 中 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

Answer 2

我是运行 1.21 版，但我认为这也适用于其他版本。

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

的内容

我的显示空格，→

单击 Spaces（或 Tab-Size）
选择使用空格缩进或使用制表符缩进
Select 您喜欢的空格或制表符的数量。

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

Answer 3

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

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}

Answer 4

我们可以通过扩展名为 EditorConfig and its 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

settings.json

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

不需要改

Answer 5

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

Answer 6

备注

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

第 1 节：VS 代码方式

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

左下档 →
设置→右上角打开设置

第 2 部分：如果使用 prettier

如果您使用的是 prettier，情况可能又有所不同，prettier 对此有 2 级设置：

用户级别，可以点击扩展点击设置找到关键词tabWidth
项目级别，您可以从文件 .prettierrc

Answer 7

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

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

Answer 8

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

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

中对我有用

Answer 9

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

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

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

Answer 10

@alex-dima 2015 年的解决方案将更改所有文件的制表符大小和 spaces，@Tricky 2016 年的解决方案似乎只更改当前文件的设置。

截至 2017 年，我发现了另一种适用于每种语言的解决方案。 Visual Studio 代码没有为 Elixir 使用正确的制表符大小或 space 设置，所以我发现我可以更改所有 Elixir 文件的设置。

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

效果很好，现在所有 Elixir 语言文件都使用正确的制表符大小和 space 设置。

Answer 11

菜单文件→首选项→设置

添加到用户设置：

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

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

Answer 12

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

set indent_size = 4

Answer 13

使用 TypeScript 时，无论工具栏中显示什么，默认制表符宽度始终为两个。您必须在用户设置中设置 "prettier.tabWidth" 才能更改它。

Ctrl + P, Type → 用户设置, 添加:

"prettier.tabWidth": 4

Answer 14

如果已接受的关于此 post 的答案不起作用，请试一试：

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

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

Answer 15

在Visual Studio代码版本1.31.1或更高版本（我认为）：像sed Alex Dima，你可以通过

的这些设置轻松自定义

Windows 在菜单 File → Preferences → User Settings 或使用快捷键 Ctrl + Shift + P
Mac 菜单代码 → 首选项 → 设置或 ⌘,

Answer 16

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

"editor.insertSpaces": false,
"editor.tabSize": 4,
"editor.detectIndentation": false,

"prettier.tabWidth": 4,
"prettier.useTabs": true  // This made it finally work for me

Answer 17

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

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

Answer 18

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

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

Answer 19

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

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

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

Answer 20

CTRL + 逗号
使用制表符搜索缩进
去更改编辑器：标签大小

就是这样

Answer 21

来自：

Is there a way to change tabSize per language? e.g. when editing multiple files with different languages in the same Workspace (e.g. Ruby, JavaScript, CSS, etc.) - Ruby would be 2 spaces, but CSS would be 4... usually

因此，对于 VSCode 1.63（2021 年 11 月），您有：

Multiple language specific editor settings

You can now configure language specific editor settings for multiple languages at once.
Following example shows how you can customise settings for javascript and typescript languages together:
"[javascript][typescript]": {
  "editor.maxTokenizationLineLength": 2500
}

你的情况：

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

如何自定义制表符到 space 的转换系数？

How can I customize the tab-to-space conversion factor?

visual-studio-code

vscode-settings

安装

示例配置

.editorconfig

settings.json

备注

第 1 节：VS 代码方式

第 2 部分：如果使用 prettier

Multiple language specific editor settings