代码保存后被压成一行是因prettier或eslint格式化配置冲突所致,典型原因包括printwidth过小、多插件互斥、未禁用eslint自动修复等。

为什么保存后代码突然被压成一行?
这不是 VSCode 本身的锅,而是你装的格式化工具(比如 Prettier 或 ESLint)在“帮你整理”时搞错了节奏。典型表现是:写好一段 Vue/React 的 import 或对象字面量,一按 Ctrl+S,整块直接缩成一行;注释也被强行吞掉或错位——本质是 printWidth 设得太小,或者多个格式化插件互相打架。
-
printWidth默认是 80,但如果你项目里设成了 200 甚至off,Prettier 可能反而放弃换行,选择“能塞下就塞” - 同时启用
ESLint+Prettier且没配eslint-config-prettier,会导致 ESLint 强制换行、Prettier 立刻又合并回去 -
.editorconfig里写了max_line_length=120,但 Prettier 没读它——EditorConfig 和 Prettier 不自动同步配置
怎么立刻把一行代码手动拆开?
不依赖格式化,纯靠编辑器操作,适合紧急修 bug 或临时调整。关键不是“拆”,而是“在哪儿断”——得符合语法,否则直接报错。
技术上面应用了三层结构,AJAX框架,URL重写等基础的开发。并用了动软的代码生成器及数据访问类,加进了一些自己用到的小功能,算是整理了一些自己的操作类。系统设计上面说不出用什么模式,大体设计是后台分两级分类,设置好一级之后,再设置二级并选择栏目类型,如内容,列表,上传文件,新窗口等。这样就可以生成无限多个二级分类,也就是网站栏目。对于扩展性来说,如果有新的需求可以直接加一个栏目类型并新加功能操作
- 光标停在逗号、括号、冒号或运算符(如
+、&&)后面,按Enter就行;VSCode 通常会自动补缩进 - 想批量断开(比如把一长串数组元素全分开),用
Ctrl+H打开替换,查找,,替换为,\n(Windows/Linux)或,\r\n(Mac),再点Ctrl+Alt+Enter全部替换 - 别在字符串内部硬断——比如
"a,b,c"里替,,会破坏语义;先确认上下文是不是 JS/TS 的结构体
如何让格式化真正“懂你要换行”?
靠改配置,而不是每次手调。核心是统一源头:只留一个格式化主力,关掉其他干扰项。
- 在项目根目录加
.prettierrc,明确写:{"printWidth": 100,"semi": true,"singleQuote": true,"bracketSpacing": true} - VSCode 设置里搜
formatOnSave,确保只启用Prettier;禁用ESLint的 auto-fix on save(除非你已配好eslint-config-prettier) - 删掉工作区
settings.json里重复的editor.wordWrap或editor.formatOnType,这些和“代码是否合并”无关,只会添乱
自动换行(word wrap)不是代码换行
很多人点 Alt+Z 发现“好像换行了”,结果 Git 提交时根本没变化——因为那是纯显示效果,文件里还是那一整行。真要改源码结构,必须动格式化配置或手动断行。
-
editor.wordWrap设为on:只是视觉折行,不影响保存内容,也不影响 ESLint 报错 - 设为
wordWrapColumn并填120:依然只是显示,不是插入真实\n - 如果看到控制台报错
Line 1 exceeds the maximum line length of 100,那说明 ESLint 在 lint 阶段检查的是真实换行,不是显示换行
ESLint 的 max-len 规则还在偷偷合并。先看输出面板里格式化日志输出的是谁,再动手。









