如何自定义制表符到空间的转换因子?


852

使用Visual Studio Code时如何自定义制表符到空间的转换因子?

例如,现在在HTML中,每按一下就会产生两个空格TAB,而在TypeScript中会产生4个空格。

Answers:


1358

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

1
嗨,古斯,您愿意将我指向错误猜测的文件吗?另外,请分享您如何配置这两个设置(tabSize和insertSpaces)以及期望获得的结果。谢谢!:)
Alex Dima

5
我将两个设置都配置为“自动”,并且行为与我预期的不一样(尽管我不会称其为“错误”)。我不知道应该改变什么文件来支持我的约定,但我开了一个UserVoice的票是,作为答案建议问题#30057721
摊铺

4
是否还有一个选项可以为新的空白文件设置默认值?在那种情况下没有什么可猜测的,我认为VSCode将默认使用空格(我不喜欢)...
Stijn de Witt

首先,还有一个“ 工作场所设置”选项,因此您可以通过项目设置一个覆盖用户设置的其他行为。2美分
鲁芬,

1
谢谢,鲁芬。有没有一种方法可以更改tabSize每种语言?例如,在同一工作区中使用不同语言(例如Ruby,JavaScript,CSS等)编辑多个文件时-Ruby是2空格,但CSS 4通常是...。
雅各布·巴纳德

692

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

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

我的空间显示→

在此处输入图片说明

  1. 单击空格(或Tab大小
  2. 选择缩进使用空格缩进使用制表符
  3. 选择所需的空格或制表符数量。

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


#3怎么做?选择#2之后,似乎没有一种方法可以“选择所需的空格数量”。谢谢。
克里斯

我一直以为:“这不可能以某种方式……”这解释了如何。
vlz

189

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

 

在此处输入图片说明


105

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

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}

57

我们可以使用EditorConfig及其VS Code扩展的EditorConfig来按文件类型控制选项卡的大小。然后,我们可以做出+ + 具体到每个文件类型。AltShiftF

安装

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


ext您在说什么(请通过编辑答案来回答,而不是在注释中(适当时在此处))?一些Node.js麻烦吗?什么平台?
彼得·莫滕森

12

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

8

Visual Studio Code版本1.31.1或更高版本中(我认为):与sed Alex Dima一样,您可以通过以下设置轻松地自定义此设置

  • Windows,位于菜单中的文件首选项用户设置,或使用快捷键Ctrl+ Shift+P
  • 苹果在菜单代码首选项设置或者

在此处输入图片说明

在此处输入图片说明


7

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


7

那就lonefy.vscode-js-css-html-formatter怪了。禁用它,然后安装HookyQR.beautify

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



4

使用TypeScript时,默认选项卡宽度始终为2,无论其在工具栏中的含义如何。您必须在用户设置中设置“ prettier.tabWidth”才能进行更改。

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

"prettier.tabWidth": 4

4

如果此帖子上的可接受答案无效,请尝试以下操作:

我在编辑器中安装了Visual Studio Code的EditorConfig,它始终覆盖我的用户设置,这些用户设置使用空格缩进文件。每次我在编辑器选项卡之间切换时,即使将缩进转换为空格,我的文件也会自动与选项卡缩进!

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


4

我们心爱的社区成员已经提供了很多很好的答案。我实际上想添加C#代码tabSize并找到此线程。我发现了许多解决方案,并且官方VS Code文档很棒。我只想分享我的C#设置:

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

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


1
是的,如果要为特定语言设置不同的格式,这是一种方法。我喜欢使用tabWidth = 2的选项卡,但是autopep8只是讨厌它。
Abhishek Kasireddy

2

菜单文件首选项设置

添加到用户设置:

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

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


2

@ alex-dima从2015年开始的解决方案将更改所有文件的标签大小和空格,而@Tricky从2016年开始的解决方案似乎仅更改当前文件的设置。

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

我单击状态栏中的语言(在我的情况下为“ Elixir”),选择“配置基于'Elixir'语言的设置...”,然后编辑Elixir特定的语言设置。我只是从左侧的默认设置中复制了“ editor.tabSize”和“ editor.insertSpaces”设置(很高兴显示了这些设置),然后在右侧对其进行了修改。

效果很好,现在所有Elixir语言文件都使用正确的选项卡大小和空间设置。


1

我必须像以前的答案一样进行许多设置编辑,所以我不知道在进行大量修改后哪个设置可以正常工作。

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

0

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

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

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


0

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

set indent_size = 4

-1

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

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.