代码格式美化插件在VSCode中的缩进设置-VSCode-PHP中文网

prettier、eslint与vscode缩进设置必须统一：vscode需设"editor.insertspaces": true和"editor.tabsize": 2，pretterrc中"tabwidth": 2且不启用usetabs，eslint的indent规则参数也须为2，并关闭editor.detectindentation以防自动探测干扰。

代码格式美化插件在vscode中的缩进设置

格式美化插件（如 Prettier、ESLint）和 VSCode 自身缩进设置必须对齐，否则会互相覆盖——不是插件不工作，而是它在按自己的规则改，而编辑器在按另一套规则显示。

为什么 Shift+Alt+F 格式化后缩进反而错乱？

根本原因是 Prettier 的 tabWidth 和 VSCode 的 editor.tabSize 不一致，或 editor.insertSpaces 与 Prettier 的 useTabs 冲突。

比如 VSCode 设置了 editor.tabSize: 2 且 editor.insertSpaces: true，但 Prettier 配置里写了 "tabWidth": 4 或 "useTabs": true，结果就是：编辑器显示为 2 空格宽，Prettier 却硬写入 4 空格或 Tab 字符
检查方式：按 Ctrl+Shift+P → 输入 Format Document With，看当前默认格式化器是否是你要用的那个（如 esbenp.prettier-vscode）
临时验证：打开一个 JS 文件，右下角点击 Spaces: 2 → 选 Convert Indentation to Tabs，再格式化——如果缩进立刻“跳变”，说明插件正把 Tab 当作单位处理

如何让 Prettier / ESLint 和 VSCode 缩进真正同步？

关键不是“配对插件”，而是统一三处参数：VSCode 显示层、VSCode 编辑行为、插件写入行为。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

在项目根目录的 .vscode/settings.json 中强制关闭自动探测："editor.detectIndentation": false
固定缩进风格："editor.insertSpaces": true + "editor.tabSize": 2（或 4，按团队规范）
Prettier 配置（.prettierrc 或 package.json 中的 prettier 字段）必须匹配："tabWidth": 2 且不设 "useTabs": true
ESLint 用户额外注意：若用了 indent 规则，需确保 "tabWidth" 和 "indent" 的第二个参数一致，例如 ["error", 2]

HTML / CSS / JSON 文件缩进被忽略？

VSCode 默认只对部分语言启用格式化，HTML/CSS/JSON 需显式开启语言专属配置，否则 Shift+Alt+F 会静默跳过。

在 .vscode/settings.json 中添加语言块："[html]": {"editor.formatOnSave": true, "editor.tabSize": 2}
同理补充 "[css]"、"[json]"，避免某些文件类型“格式化失能”
如果用了 Prettier，还需确认它支持该语言：Prettier v3+ 原生支持 HTML/CSS/JSON；旧版需装 prettier-plugin-xml 等扩展
右下角语言标识显示为 Plain Text 时，Shift+Alt+F 必然无效——点击它手动选成 HTML 或 CSS

缩进看起来对齐，但 Python 运行报 `IndentationError`？

问题几乎总是空格和 Tab 混用，而 VSCode 默认不显示它们——你看到的“对齐”是视觉欺骗。

立即开启空白符可视化：Ctrl+Shift+P → 输入 Toggle Render Whitespace，空格变成 ·，Tab 变成 →
特别注意：Python 文件开头若有注释行混了 Tab，editor.detectIndentation 会误判整份文件用 Tab 缩进，后续所有空格插入都变成异常
修复前先 git add -p 或提交当前状态——执行 Convert Indentation to Spaces 会重写全部缩进字符，Git 将标记每一行变更
建议在 .vscode/settings.json 中加一行："files.trimTrailingWhitespace": true，避免末尾空格干扰缩进判断