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

Question

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

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

score 1775 · Accepted Answer

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

score 867 · Accepted Answer

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

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

我的显示空间，→

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

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

score 257 · Accepted Answer

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

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

score 119 · Accepted Answer

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

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}

score 77 · Accepted Answer

我们可以使用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。

score 18 · Accepted Answer

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

score 17 · Accepted Answer

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

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

score 13 · Accepted Answer

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

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

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

score 10 · Accepted Answer

10

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

就这样

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

score 9 · Accepted Answer

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

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

score 8 · Accepted Answer

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

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

score 7 · Accepted Answer

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

score 6 · Accepted Answer

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

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

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

score 4 · Accepted Answer

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

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

"prettier.tabWidth": 4

score 3 · Accepted Answer

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

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

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

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

score 3 · Accepted Answer

菜单文件→首选项→设置

添加到用户设置：

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

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

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

从评论：

有没有办法改变每种语言的 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
},

score 1 · Accepted Answer

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

set indent_size = 4

score 0 · Accepted Answer

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

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

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

score -1 · Accepted Answer

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

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

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

21 回答 21

安装

示例配置

.editorconfig

设置.json

多语言特定编辑器设置

Related

Reference