如何在使用Visual Studio代码时自定义制表符到空格的转换因子？

Question

如何在使用Visual Studio代码时自定义制表符到空格的转换因子？

例如，现在在HTML中，每按一次TAB就会生成两个空格，但在TypeScript中它会生成4个空格。

Answer 1

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

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

您可以通过菜单文件→首选项→用户设置和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

如果此帖子上接受的答案不起作用，请尝试一下：

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

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

Answer 3

在VSC版本1.31.1或更多（我认为）。像sed Alex Dima一样。您可以通过这些设置轻松自定义

• Windows菜单文件→首选项→用户设置或使用短键ctr + shift + p
• Mac菜单代码→首选项→设置或⌘，

Answer 4

@ alex-dima的2015解决方案将改变所有文件的标签大小和空格，而2016年的@Tricky解决方案似乎只会更改当前文件的设置。

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

我点击状态栏中的语言（在我的情况下为“Elixir”），选择“配置'Elixir'基于语言的设置...”，并编辑Elixir特定的语言设置。我刚从左边的默认设置中复制了“editor.tabSize”和“editor.insertSpaces”设置（我很高兴看到这些设置），然后在右边修改它们。

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

Answer 5

菜单文件→首选项→设置

添加到用户设置：

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

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

Answer 6

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

按Ctrl + P，键入→用户设置，添加：

"prettier.tabWidth": 4

Answer 7

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

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

没有大量推荐作为npm更新将删除你的工作，但它节省了我很多时间。

Answer 8

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

set indent_size = 4

Answer 9

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

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

Answer 10

您只需单击键盘cmd或ctrl，它会打开设置页面然后向下滚动，您应该看到标签大小的位置。

Answer 11

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

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

我的展示空间， - >

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

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

Answer 12

好吧，如果您喜欢开发方式，Visual Studio Code允许您为tabSize指定不同的文件类型。以下是我的settings.json示例，其中包含默认的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 13

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

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}

Answer 14

我们可以使用EditorConfig及其Visual Studio Code extension按文件类型控制选项卡大小。然后，我们可以使Alt + Shift + F特定于每种文件类型。

安装

ext install EditorConfig

示例配置

.editorconfig

[*]
indent_style = space

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

[*.json]
indent_size = 2

settings.json

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

Answer 15

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

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

Answer 16

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

Answer 17

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

在那里你可以根据你的需要改变缩进：Indentation Options

Answer 18

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