VSCode的editor.wordWrap仅控制视觉换行,不影响保存内容;真正决定代码保存时是否断行的是Pretterrc中的printWidth配置。

VSCode的editor.wordWrap和Prettier换行是两回事
保存后代码“被换行”不是Prettier干的,而是VSCode编辑器自己视觉换行惹的祸。你看到的长行折成多行,只是显示效果,不影响实际保存内容——editor.wordWrap控制这个,和格式化完全无关。
真正决定代码是否在保存时被拆成多行的,是Prettier自己的printWidth配置。比如设为80,那超过80字符的函数调用、对象字面量或JSX元素就会被自动断行;设成9999就几乎不折行(但别真这么干,可读性会崩)。
-
editor.wordWrap: "off"→ 不视觉换行,拖动水平滚动条 -
editor.wordWrap: "bounded"→ 只在视口内折行,不影响文件内容 - 想改保存行为?去改
.prettierrc.json里的printWidth,别碰wordWrap
Prettier根本不支持CSS属性值对齐
CSS里想让color:、font-size:、margin:这些冒号后面“竖着对齐”,Prettier明确不干。这是它的设计原则:用统一空格代替视觉对齐,避免因编辑器缩进差异或后续增删导致整块错位。
它能做的只有保证基础风格一致,比如统一单引号、分号开关、括号位置。如果你硬要对齐,得靠其他工具:
- 装插件
Align by Regex,选中CSS块,执行命令,正则填:,对齐方式选Left - 或者用
Beautify这类传统格式化插件,它支持css.format.enable等老派配置 - 注意:Prettier和Beautify不能共存于同一文件类型,否则保存时互相覆盖
为什么保存后缩进看起来“乱了”?检查tabWidth和insertSpaces是否打架
Prettier按tabWidth和useTabs生成缩进,而VSCode按editor.insertSpaces和editor.tabSize渲染输入。两者不一致,就会出现“保存后缩进变空格/变Tab”“光标跳位”“状态栏右下角提示Indentation: Tab/Space不一致”等问题。
最稳的做法是全部统一用空格:
-
.prettierrc.json里写"tabWidth": 2, "useTabs": false - VSCode设置里确保
"editor.insertSpaces": true且"editor.tabSize": 2 - 顺手关掉
"editor.detectIndentation",防止打开旧文件时被自动切到Tab模式
如果项目里已有大量Tab缩进,.prettierrc.json加"useTabs": true也行,但务必同步改VSCode的insertSpaces为false,否则编辑时混入空格,Git diff会疯。
TS/JSX文件没对齐?大概率是parser或trailingComma没配对
TypeScript和JSX的换行逻辑比纯JS更敏感。printWidth相同,但trailingComma设成"none"还是"es5",会导致对象解构、函数参数、JSX属性列表的换行策略完全不同。
尤其JSX,如果没显式指定parser,低版本Prettier可能误当普通JS处理,导致className="a"和onClick={handleClick}挤在一行不换行:
- 确保
.prettierrc.json里有"parser": "typescript"(TS)或"parser": "babel"(JSX) -
trailingComma建议用"es5",它对函数参数、对象属性、数组元素都生效,换行更“懂人话” - 若用
bracketSameLine: true,JSX开标签的>会贴在最后一行属性后,此时printWidth必须留足余量,否则Prettier宁愿把整个属性挤进一行也不愿拆
这类问题不会报错,只表现为“格式化结果不像预期”。最直接的验证方式:打开开发者工具(Ctrl+Shift+I),切到Console,看有没有Prettier config not found或Failed to load module 'prettier'——前者说明配置文件路径或格式不对,后者说明本地prettier包根本没装。











