设为"indent"才对齐:上一行缩进多少,续行就补多少;需同时开启editor.wordwrap为"on"或"bounded",否则无效;jsx/tsx属性折行错位是因该设置不感知语法结构。

editor.wrappingIndent设成什么值才对齐
自动换行(软换行)后的续行缩进不齐,根本不是格式化问题,而是editor.wrappingIndent默认值"same"只复制首字符位置,不继承实际缩进量。日常写代码最稳的是设为"indent":上一行缩了 4 空格,续行就补 4 空格;缩了 2 Tab,续行也按 Tab 规则对齐。
可选值只有四个:"none"(完全不缩进)、"same"(顶格或偏移极小)、"indent"(推荐)、"deepIndent"(额外加一层,适合超长链式调用,但多数场景冗余)。
注意:editor.wordWrap必须是"on"或"bounded",否则editor.wrappingIndent根本不生效。
JSX/TSX里属性折行还是错位?语言专属配置漏了
JSX 标签内属性一多就折行乱飞,是因为 VSCode 的通用editor.wrappingIndent不感知语法结构——它压根不知道className和onClick该对齐到<div>的缩进层级。
<p>必须给<code>[javascriptreact]和[typescriptreact]单独配,否则改了全局设置也没用:
{
"[javascriptreact]": {
"editor.wrappingIndent": "indent"
},
"[typescriptreact]": {
"editor.wrappingIndent": "indent"
}
}
别漏掉[typescriptreact]——用 TS 写 React 时,[javascriptreact]配置完全不触发。
如果用了 Prettier,确认它没覆盖editor.wordWrap或editor.wrappingIndent(Prettier 不管软换行缩进)。
改了配置为什么没反应?重载窗口和优先级检查
改完editor.wrappingIndent没效果,90% 是因为没重载窗口——仅重启 VSCode 不够,必须执行Ctrl+Shift+P → Developer: Reload Window。
剩下 10% 是被更高优先级配置覆盖:
- 工作区
.vscode/settings.json会覆盖用户级设置 - 文件语言专属配置(如
[typescriptreact])优先级高于全局 - 某些扩展(如旧版 Prettier 插件)可能劫持编辑器渲染逻辑
调试方法:打开开发者工具(Ctrl+Shift+P → Developer: Toggle Developer Tools),在 Console 里粘贴:vscode.workspace.getConfiguration('editor').get('wrappingIndent'),看返回值是否是你设的值。
软换行缩进和代码格式化缩进是两回事
很多人混淆这两者:editor.wrappingIndent只管“行太长时怎么续行”,而prettier或eslint的tabWidth控制的是“保存时怎么重排结构”。前者不影响后者,后者也改不了前者。
所以:
– 续行缩进不对,调editor.wrappingIndent;
– 保存后大括号换行缩进错,查prettier的tabWidth和bracketSameLine;
– JSX 属性换行后缩进多了一级,大概率是prettier的jsxBracketSameLine已废弃,该用新版bracketSameLine。
真正容易被忽略的是:语言模式识别失败时,editor.wrappingIndent直接退化为"same"——比如右下角显示Plain Text,哪怕你正在写.tsx文件,这个设置也形同虚设。











