如何在Visual Studio Code中更改缩进?


339

对于每个打字稿文件,Visual Studio代码都使用8个空格的自动缩进。这对我来说有点太多了,但是我找不到在哪里更改。

也许它可以作为设置使用,但使用其他名称,因为我找不到与缩进有关的任何内容。

更新

我当前使用的是Prettier代码格式化程序,它通过保存时自动格式化来解决所有格式化问题(如果没有语法错误)

Answers:


106

您可以在全局User级别或Workspace级别中进行更改。

打开设置:使用快捷ctrl + ,或点击File> Preferences> Settings如下所示。

VS Code菜单上的设置

然后,进行以下2项更改:(tabSize在搜索栏中键入)

  1. 取消选中以下复选框 Detect Indentation
  2. 将制表符大小更改为2/4(尽管我强烈认为2对JS是正确的:)

在此处输入图片说明


1
请使用4个空格进行缩进。
Bohdan Kuts,

2
@BohdanKuts哈哈,这将是无休止的争论
Xin

是的:)我做了一些搜索,发现为什么它变成了2个空格。对我来说,原因似乎已经过时,因此,我建议您肯定使用4个空格。
Bohdan Kuts

这是主观的,没有真正的优势,我为某些文件类型(如js,html和css)保留2个空格,为代码保留3个空格(仅出于可读性)。在具有4个空格的HTML和XML中,您需要很快滚动到右侧。
Pablo Pazos

574

在右下角的工具栏中,您将看到一个类似于以下内容的项目:在此处输入图片说明 单击它之后,您将获得使用空格或制表符缩进的选项。选择缩进类型后,您可以选择更改缩进的大小。在上面的示例中,缩进设置为每个缩进4个空格字符。如果选择制表符作为缩进字符,那么您将看到制表符大小而不是空格

如果你想拥有这适用于所有的文件,而不是一个idividual文件的基础上,覆盖Editor: Tab SizeEditor: Insert Spaces设置在任何用户设置工作区设置根据您的需要

编辑1

要获取用户或工作空间设置,请转到“首选项” -> “设置”。根据需要验证您是否位于“ 用户”或“ 工作区”选项卡上,并使用搜索栏找到设置。您可能还想禁用,Editor: Detect Indentation因为此设置将覆盖您设置的内容 Editor: Insert Spaces以及Editor: Tab Size启用时间


图像链接已断开。

34
更改editor.tabSpaces不会在所有文件更改间距。它仅更改将来创建的文件。仍然没有一种解决方案可以一次修复所有文件。
Jacob Stamm

3
哇。精神震撼。有时事物只是藏在不可见的地方
pingo

4
这是超直观的。我已经设置了缩进以使用空格。为什么需要单击空格选项进入第二个隐藏菜单来设置空格数?我使用的所有其他编辑器都是单击状态栏中的缩进详细信息,并且有多个空格选项。在VS Code中,我需要在Stack Overflow上进行查找,因为我想要的菜单隐藏在我不想更改的选项后面。
ian.pvd

1
每次创建新文件时,它似乎总是恢复为默认的4个空间?!?!
oldboy

141

基于编程语言更改缩进:

  1. 打开命令调色板(CtrlShiftP| MacOS的:P
  2. 首选项:配置语言特定设置...(命令ID: workbench.action.configureLanguageBasedSettings
  3. 选择编程语言(例如TypeScript)
  4. 添加此代码:

    "[typescript]": {
        "editor.tabSize": 2
    }
    

另请参阅:VS代码文档


一个人如何(在哪里)使用命令ID?我在“文件首选项”下看不到“配置特定于语言的设置”。
艾伦·巴尔吉

@AlanBaljeu可以将命令ID用于键盘快捷键,扩展名等。因此,您可以转到“ 文件” > “首选项” >“ 键盘快捷键”,将ID粘贴到输入中,然后将Ctrl + K Ctrl + L分配给命令。
马丁·施耐德

55

editor.detectIndentation除了Elliot-J的答案之外,您可能还希望将其设置为false。

如果VSCode 检测到文件具有不同的制表符或空格缩进模式,它将覆盖每个文件的editor.tabSizeeditor.insertSpaces设置。如果将现有文件添加到项目中,或者使用诸如Angular Cli之类的代码生成器添加文件,则可能会遇到此问题。上面的设置阻止了VSCode这样做。


44

代码格式化快捷方式:

Windows上的VSCode-Shift + Alt + F

MacOS上的VSCode-Shift + Option + F

Ubuntu上的VSCode-Ctrl + Shift + I

如果需要,您还可以使用首选项设置来自定义此快捷方式。

用键盘选择列 Ctrl + Shift + Alt + Arrow


1
Shift + Alt + F将文件中的所有缩进从8个空格更改为默认的4个空格。我一直在寻找:)
Harry12345 '19

24

就我而言,“ VS的EditorConfig ”扩展覆盖了VSCode设置。如果已安装,请检查项目根文件夹中的.editorconfig文件。

这是一个示例配置。“ indent_size”设置选项卡的空格数。

# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

7

谷歌搜索“在VS Code中更改缩进”图片的简化说明

步骤1:点击“偏好设置”>“设置”

在此处输入图片说明

第2步:要查找的设置是“检测缩进”,开始输入。点击“编辑器:标签大小”

在此处输入图片说明

第3步:向下滚动到“编辑器:标签大小”,然后输入2(或您需要的任何值)。

在此处输入图片说明



更改将自动保存

在此处输入图片说明

我的变更示例

在此处输入图片说明


6

要将所有现有文件和新文件的空间标识设置为2,只需将其放入您的settingsns.json(位于json的根目录中):

"[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features",
        "editor.tabSize": 2,
        "editor.insertSpaces": true,
        "editor.detectIndentation":false
 }

您可以添加配置的语言类型:

"[javascript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation":false
} 

这些天来,我使用prettier.js和js插件,因为它关心间距和其他重新对齐长行以及大多数其他内容。
HMR

1
谢谢,很棒的答案,对我来说是最好的方法。
Swetabja Hazra

5

如何在VS Code中将所有文件中的4个空格缩进到2个空格

  • 打开文件搜索
  • 打开正则表达式
  • ( {2})(?: {2})(\b|(?!=[,'";\.:\*\\\/\{\}\[\]\(\)]))在搜索字段中输入:
  • $1在替换字段中输入:

如何在VS Code中将所有文件中的2个空格缩进到4个空格

  • 打开文件搜索
  • 打开正则表达式
  • ( {2})(\b|(?!=[,'";\.:\\*\\\/{\}\[\]\(\)]))在搜索字段中输入:
  • $1$1在替换字段中输入:

注意:您必须先打开PERL Regex。这是这样的:

  • 打开设置并转到JSON文件
  • 将以下内容添加到JSON文件中 "search.usePCRE2": true

希望有人看到这一点。


特别是对于VS Code,还有一个扩展,可以将4转换为2个空格。
tanius

4

问题:接受的答案实际上并未解决当前文档中的缩进问题。

解决方案:运行Format Document以根据当前(新)设置重新处理文档。

问题:我的项目中的HTML文档的类型为“ Django HTML”而不是“ HTML”,并且没有可用的格式化程序。

解决方案:将它们切换为语法“ HTML”,对其进行格式设置,然后再切换回“ Django HTML”。

问题:HTML格式化程序不知道如何处理Django模板标签,并且撤消了许多我仔细应用的嵌套。

解决方案:安装Indent 4-2扩展名,该扩展名严格执行缩进,而不考虑当前的语言语法(在这种情况下,这就是我想要的)。


2

我想将现有 HTML文件的缩进从4个空格更改为2个空格。

我单击状态栏中的“空格:4”按钮,然后在下一个对话框中将它们更改为两个。

我使用'vim'扩展名。没有vim我不会重新缩进

要重新缩进当前文件,我使用了以下方法:

gg

=

G

0

添加:是的,您可以使用右下角的UI来配置空间设置。但是,如果您现有的代码未格式化为新的间距,则可以右键单击文件中的任何位置,然后单击“设置文档格式”。花了我一会儿才解决这个问题,直到我偶然发现这个问题

格式化文档菜单

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.