VSCode - 如何设置制表空间样式？

Question

一个简单的问题:使用Visual Studio Code时是否可以自定义制表符到空格的转换因子？

例如,现在在HTML中,每次按下它会产生两个空格TAB,但在TypeScript中它产生4个空格.

Answer 1

默认情况下,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

Answer 2

我正在运行1.21版,但我认为这也适用于早期版本.

看一下屏幕的右下角.你应该看到一些说Spaces或的东西Tab-Size.

我显示空间, - >

1. 点击Spaces(或Tab-Size)
2. 选择Indent Using Spaces或Indent using Tabs
3. 选择您喜欢的空格或标签数量.

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

Answer 3

嗯,新版本的Visual Studio Code允许您为tabSize指定不同的文件类型.以下是我tabSize的默认4空格和JavaScript/JSON 2空格的示例:

{
  // I want my default to be 4, but JS/JSON to be 2
  "editor.tabSize": 4,
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[json]": {
    "editor.tabSize": 2
  }
}

PS:嗯,如果你不知道如何打开这个文件,你可以:点击左下角齿轮 - >然后设置

Answer 4

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

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}

Answer 5

我们可以使用EditorConfig及其Visual Studio Code扩展来按文件类型控制选项卡大小.然后,我们可以对每种文件类型进行+ + 特定.AltShiftF

安装

ext install EditorConfig

示例配置

.editorconfig

[*]
indent_style = space

[*.{cs,js}]
indent_size = 4

[*.json]
indent_size = 2

settings.json

EditorConfig会覆盖编辑器的所有settings.json配置.没有必要改变editor.detectIndentation.

Answer 6

1. CTRL + 逗号
2. 使用制表符搜索缩进
3. 去更改编辑器：选项卡大小

就这样

Answer 7

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

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

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

Answer 8

自 2023 年起，出现了一个新设置editor.indentSize，可以将缩进大小与制表位大小分开设置。

这对于编辑依赖 8 个空格制表符但使用较少空格进行缩进的遗留代码特别有用。

以下是4空格缩进的示例配置，同时将实际 TAB 对齐8空格：

  "editor.insertSpaces": true,
  "editor.indentSize": 4,
  "editor.tabSize": 8,

Answer 9

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

Answer 10

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

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

Answer 11

如果您在vscode中使用了漂亮的扩展名，请尝试将其添加到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 12

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

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

Answer 13

在 Visual Studio Code 版本 1.14.1 中

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

• 选择用户 > 常用
• 将选项卡大小设置为 4

Answer 14

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

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

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

Answer 15

在VSC版本1.31.1或更高版本中（我认为）。就像sed Alex Dima一样。您可以通过以下设置轻松地对此进行自定义

• Windows菜单中的文件？优先 ？用户设置或使用快捷键ctr + shift + p
• Mac在菜单Code中？优先 ？设置或？，

Answer 16

来自评论：

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

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

多语言特定编辑器设置

您现在可以同时为多种语言配置特定于语言的编辑器设置。
以下示例展示了如何一起自定义 javascript 和 typescript 语言的设置：

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

在你的情况下：

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

您还可以使用 VSCode 1.75 (2023 年 1 月) 更改终端中的选项卡大小。

Answer 17

@lang:一种更简单的方法是使用Visual Studio Code 提供的内置通配符过滤器。

脚步

1. 单击设置图标（左下角）
2. 选择设置
3. 在搜索设置输入框中输入@lang:javascript tabsize

这将过滤所有设置并留下tabSize仅适用于 javascript 的选项。输入您想要的制表符系数，它将应用于该语言。

请注意

• 要将这些设置应用于您的用户配置文件，请确保User选择该选项卡。如果Workspace选择该选项卡，VSCode.vscode将在您的项目文件夹中创建一个包含settings.json文件的文件夹；这意味着您所做的任何更改仅适用于当前工作区（项目文件夹）
• 您可以将其用于任何其他语言，例如@lang:php tabsize