如何更改 Visual Studio Code 中的缩进？答案

【问题标题】：How to change indentation in Visual Studio Code?如何更改 Visual Studio Code 中的缩进？
【发布时间】：2016-03-14 10:54:24
【问题描述】：

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

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

更新

我目前正在使用Prettier code formatter，它通过保存时自动格式化解决了所有格式化问题（如果没有语法错误）

【问题讨论】：

另见：How can I customize the tab-to-space conversion factor?

标签： formatting visual-studio-code

【解决方案1】：

以下搜索和替换正则表达式将现有文件中每个缩进级别的空格数从 4 个更改为 2 个。它相对容易理解、可靠，并且不需要安装任何东西。

说明

按 CtrlH（或在 macOS 上按 ⌥⌘F）。
通过单击搜索弹出窗口中的 .* 按钮或按 AltR（或 ⌥⌘R 在 macOS 上）。
在查找字段中，输入^(?:( ) )?(?:( ) )?(?:( ) )?(?:( ) )?(?:( ) )?(?:( ) )?(?:( ) )?(?:( ) )?(?:( ) )?
在替换字段中，输入$1$2$3$4$5$6$7$8$9
最后按 CtrlEnter（或 macOS 上的 ⌘Enter）应用到当前文件。

您也可以在左侧的“搜索”窗格中使用它来对项目中的所有文件执行此操作。但是，请注意，每个文件只能运行一次。它会弄乱已经使用 2 个空格的文件的缩进。

额外积分：它是如何工作的

正则表达式的工作方式是在每行的开头^ ... 一次匹配四个空格的组(?: ... )，只捕获前两个空格( ... )。每个缩进级别都是可选的... ?，因此它适用于与模式重复并且每行中有多少缩进级别一样多的缩进级别。然后它只用捕获的空格$1、$2、...替换整个模式，有效地将每个四空格缩进级别替换为两个空格。

这种模式最多只能使用 9 个缩进级别（我不确定$10 是否可以使用，但如果可以，可以无限扩展）。

额外的额外学分：扩展

您可以调整该模式以将文件中每个缩进级别的空格数从任何原始数字减少到另一个较低的目标数字。

将 target 个空格放在内括号内。然后，将剩余的original个空格放在外括号中，这样模式中的空格总数就是original。

例如，如果您想将缩进级别从 6 更改为 4，请重复此搜索模式多次：

^(?:( ) )? 或 ^(?:( {4}) {2})?

并在替换模式中使用相同数量的$1、$2。

【讨论】：

【解决方案2】：

您可以在全局User 级别或Workspace 级别中更改此设置。

打开设置：使用快捷键Ctrl,或者点击File>Preferences>Settings如下图。

然后，进行以下 2 项更改：（在搜索栏中输入 tabSize）

取消选中Detect Indentation的复选框
将选项卡大小更改为 2/4（虽然我强烈认为 2 对 JS 是正确的 :)）

【讨论】：

对于那些想知道的人，这将自动重新格式化您项目中的所有文件，而不仅仅是您创建的新文件。您可能需要重新启动 vs 代码才能使更改生效。
这两个设置都可以在我的安装中继续使用（选中框，设置我喜欢的空间；这是一个全新的角度项目，所以没有复制/粘贴代码来搞砸事情up），但它仍然没有，至少对于打字稿文件。我添加了上面 Martin Schneider 描述的语言特定设置，所以希望它会起作用。
更新我之前的评论：似乎 Angular 生成了一个我以前没有注意到的“.editorconfig”文件。在那个文件中，当我想要 4 时，属性“indent_size”被设置为 2。这可能是最初的罪魁祸首。我已将其设置为 4 并删除了特定于语言的设置。

【解决方案3】：

第一步：在 vscode 中打开settings.json

第 2 步：为编程语言添加如下行（示例如下）

对于打字稿和javascript

"editor.detectIndentation": false,
"[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
}

【讨论】：

Open settings.json in vscode 这样做的方法是 ctrl+shit+p 并在 Mac 上键入设置或 cmd+shift+p。有一个全局 settings.json 和一个工作区 settings.json。我更喜欢使用 prettier.js 作为我的格式化程序，因为它有更多的样式设置。

【解决方案4】：

基于编程语言更改缩进：

打开命令面板（CtrlShiftP | macOS：⇧⌘P)
键入并选择：首选项：配置语言特定设置...（命令 ID：workbench.action.configureLanguageBasedSettings）
选择一种编程语言（例如 TypeScript）

添加此代码：

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

编辑 1

要访问您的用户或工作区设置，请转到首选项 -> 设置。根据您的需要，确认您在 User 或 Workspace 标签上，并使用搜索栏找到设置。您可能还想禁用Editor: Detect Indentation，因为此设置将覆盖您在启用时为Editor: Insert Spaces 和Editor: Tab Size 设置的内容

【讨论】：

@yildizm85 图片对我来说没有问题。图片是直接上传到 SO，所以如果它坏了，这可能是他们的问题。
更改editor.tabSpaces 不会不会更改所有文件中的间距。它只会为将来创建的文件更改它。仍然没有解决方案可以一次性修复所有文件。
不响应如何更改缩进大小的问题。
这太不直观了。我已经将缩进设置为使用空格。为什么我需要单击空格选项才能进入第二个隐藏菜单来设置空格数？我使用的所有其他编辑器都是单击状态栏中的缩进详细信息，并且有许多空格选项。在 VS Code 中，我需要在 Stack Overflow 上查找它，因为我想要的菜单隐藏在我不想更改的选项后面。
每次我创建一个新文件时，它似乎总是恢复到默认的 4 个空格？！？！

【解决方案11】：

要将所有现有文件和新文件的空间标识设置为 2，只需将其放入您的 settingns.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 插件，因为它负责间距和其他重新对齐长线以及其他大多数事情。

【解决方案12】：

代码格式化快捷键：

Windows 上的 VSCode - Shift + Alt + F

MacOS 上的 VSCode - Shift + Option + F

Ubuntu 上的 VSCode - Ctrl + Shift + I

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

用键盘选择列 Ctrl + Shift + Alt + 箭头

【讨论】：

Shift + Alt + F 将文件中的所有缩进从 8 个空格更改为默认的 4 个空格。正是我想要的:)

【解决方案13】：

问题：接受的答案实际上并没有修复当前文档中的缩进。

解决方案：运行Format Document 以根据当前（新）设置重新处理文档。

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

解决方案：将它们切换为语法“HTML”，格式化它们，然后切换回“Django HTML”。

问题：HTML 格式化程序不知道如何处理 Django 模板标签，并且撤消了我仔细应用的大部分嵌套。

解决方案：安装Indent 4-2 扩展，它严格执行缩进，而不考虑当前的语言语法（这是我在这种情况下想要的）。

【讨论】：

【解决方案14】：

补充：是的，您可以使用右下角的 UI 来配置空间设置。但是，如果您有未格式化为新间距的现有代码，则可以右键单击文件中的任意位置，然后单击Format Document。我花了一段时间才弄清楚这一点，直到我偶然发现了this issue。

Format Document menu

【讨论】：

好的，我按照描述安装了 Ruby、Ruby Formatter 和 Rufo。从 2 个空格更改为 4 个空格。然后右键单击并格式化。对我来说没有任何改变。

【解决方案15】：

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

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

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

为了重新缩进我当前的文件，我使用了这个：

gg

=

G

【讨论】：

【解决方案16】：

在我的例子中，“EditorConfig for VS Code”扩展覆盖了 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

【讨论】：

【解决方案17】：

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

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

【讨论】：