Prettier缩进设置问题：HTML树形结构缩进间距过窄

核心设置调整（针对VS Code） #

当前仅设置"editor.tabSize": 2不足以实现宽间距缩进，需配合以下关键配置：

• 关闭自动缩进检测，避免编辑器自动覆盖自定义设置：

  "editor.detectIndentation": false
  

• 选择缩进方式并调整宽度：
  • 若使用空格缩进（推荐HTML场景）：

    "editor.insertSpaces": true,
    "editor.tabSize": 4  // 可按需改为6、8等更大数值
    

  • 若使用制表符缩进：

    "editor.insertSpaces": false,
    "editor.tabSize": 4  // 调整制表符的显示宽度
    

针对HTML文件的单独配置 #

若全局设置未生效，可能是语言特定配置优先级更高，可单独为HTML文件设置：

"[html]": {
  "editor.tabSize": 4,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false
}

处理插件冲突（如Prettier） #

如果使用Prettier格式化工具，它的配置会优先于VS Code默认设置，需同步调整：

"prettier.tabWidth": 4,
"prettier.useEditorConfig": false

增强可读性的额外设置 #

若想让缩进层次更直观，可开启空白字符显示：

"editor.renderWhitespace": "all"

内容的提问来源于stack exchange，提问作者yerbaMatte