VSCode 格式被覆盖答案

【问题标题】：VSCode formatting being overridedVSCode 格式被覆盖
【发布时间】：2018-06-29 02:57:44
【问题描述】：

我正在使用 Angular 进行开发，经过近一年的完美格式化后，我的 vscode 处于崩溃状态。更具体地说，当我单击格式文档时。它缩进了 2 个空格而不是 4 个。我该如何解决这个问题，或者检查什么覆盖了我的设置？

我的用户和工作区设置（它们是相同的）：

{
  "editor.fontSize": 16,
  "editor.tabSize": 4,
  "editor.insertSpaces": true,
  "editor.wordWrap": "off",
  "workbench.iconTheme": "material-icon-theme",
  "editor.detectIndentation": true,
  "prettier.bracketSpacing": true,
  "prettier.eslintIntegration": true,
  "prettier.singleQuote": true,
  "prettier.tabWidth": 4,
  "prettier.useTabs": false,
}

我的扩展列表：

Angular Essentials（注意 prettier 是一个依赖，其他所有的 dep 都安装好了）

Bracket Pair Colorizer language-vscode-javascript-angular2

编辑：

此外，它在我的编辑器底部显示缩进 2 个空格，当我单击它并单击 4 个空格时，它显示已配置的标签大小。如果它是默认的，为什么不是为每个文件都设置这个？

【问题讨论】：

我相信detectIndendation 设置会尝试确定当前文件的缩进设置并匹配这些设置。这会影响具有两个空格缩进的现有文件。
对，但这些是在我正在创建的文件上...除非每个没有文件都预先缩进？
我认为该设置不会影响新文件。有.editorconfig 文件吗？这可以覆盖基于“项目”的设置。
这就是我在上面粘贴的，我的编辑器配置。但我将工作区和用户设置设置为相同
什么是"editor.tabSize"？你没有表现出来。

标签： angular visual-studio-code

【解决方案1】：

这似乎是两件事的结果：

编辑器配置

首先，在 cmets 中提到的 .editorconfig 文件是 Angular 生成的单独文件（与 VSCode 无关）。它可以作为任何编辑器阅读和遵守的指南，允许开发人员以相同的风格处理同一个项目，但可以选择多个 IDE/编辑器。它应该看起来像这样：

# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false

正如评论已经指出的，更多信息可以在https://editorconfig.org找到。

在您的情况下，您可能希望将 indent_size = 2 行更改为 indent_size = 4。

Angular CLI

如果这不起作用，也可能是 Angular CLI 正在生成带有 2 个空格的文件，而 VSCode 正在根据您的 "editor.detectIndentation": true 设置检测该缩进。这是here一时的热门话题，本应由this解决，但基于this comment似乎没有帮助。

我在 VSCode 中使用 Language Specific Settings 修复了这个问题。我选择将标签大小强制为 4，并禁用 Angular 生成的所有文件类型的缩进检测。您可以将其放在您的 VSCode 用户设置中或关注 these instructions) 以获取“正确”路线。

{
    "[typescript]": {
        "editor.tabSize": 4,
        "editor.detectIndentation": false
    },
    "[javascript]": {
        "editor.tabSize": 4,
        "editor.detectIndentation": false
    },
    "[html]": {
        "editor.tabSize": 4,
        "editor.detectIndentation": false
    },
    "[json]": {
        "editor.tabSize": 4,
        "editor.detectIndentation": false
    },
    "[jsonc]": {
        "editor.tabSize": 4,
        "editor.detectIndentation": false
    }
}

在任何地方添加"editor.formatOnSave": true 或只是按Ctrl+Shift+I（格式化文档）都可以解决问题。

"editor.formatOnPaste": true 如果您经常粘贴 2 行示例代码，也可能会很有用。

【讨论】：

【解决方案2】：

我认为这是因为 Angular Essentials Prettier 插件默认缩进为 2，因此您必须为 prettier 创建一个单独的配置才能使其工作。

见this github post

【讨论】：