1153

使用 Visual Studio Code 时如何自定义制表符到空格的转换系数？

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

4

21 回答 21

1775

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

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

您可以通过菜单File → Preferences → User Settings中的Windows和Mac菜单Code → Preferences → Settings中的这三个设置轻松自定义此设置或：⌘,

// 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
于 2015-04-30T16:02:19.610 回答
867

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

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

我的显示空间，→

在此处输入图像描述

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

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

于 2016-06-28T18:18:17.000 回答
257

好吧，如果您喜欢开发人员的方式，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. 设置→右上角打开设置

 

在此处输入图像描述

于 2017-05-10T03:28:43.550 回答
119

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

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}
于 2016-08-08T13:32:32.180 回答
77

我们可以使用EditorConfig及其用于 VS Code扩展的 EditorConfig按文件类型控制选项卡大小。然后我们可以使++特定于每种文件类型。AltShiftF

安装

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

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。

于 2016-09-09T02:35:50.810 回答
18

如果您在 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
于 2019-02-23T20:04:19.193 回答
17

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

  • Windows 菜单文件→首选项→用户设置或使用快捷键Ctrl+ Shift+P
  • Mac 在菜单代码→首选项→设置或⌘</kbd>,

在此处输入图像描述

在此处输入图像描述

于 2019-02-16T12:47:10.190 回答
13

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

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

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

于 2020-02-26T05:45:13.507 回答
10
  1. CTRL + 逗号
  2. 使用制表符搜索缩进
  3. 去改变编辑器：标签大小

在此处输入图像描述

就这样

于 2021-02-06T00:31:53.343 回答
9

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

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

于 2019-03-22T13:33:06.423 回答
8

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

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

于 2017-07-04T22:03:18.023 回答
7

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

于 2017-03-22T16:22:20.970 回答
6

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

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

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

于 2018-07-25T23:16:13.113 回答
4

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

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

"prettier.tabWidth": 4
于 2018-07-12T15:16:58.157 回答
3

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

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

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

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

于 2017-11-29T23:16:11.617 回答
3

菜单文件→首选项→设置

添加到用户设置：

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

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

于 2018-01-24T20:39:44.693 回答
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,
}
于 2019-12-10T02:26:48.127 回答
2

从评论：

有没有办法改变每种语言的 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
},
于 2021-12-06T21:01:30.117 回答
1

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

set indent_size = 4
于 2018-06-08T13:32:24.617 回答
0

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

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

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

于 2017-09-29T12:53:05.413 回答
-1

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

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

于 2017-07-15T01:12:42.633 回答