Flutter 2.5在VSCode中代码格式异常，子控件靠左无法区分层级如何解决

开发者阿泽

2026-9-30

问题原因

这个格式化异常是Flutter 2.5对应配套的Dart 2.14版本更新后，官方Dart格式化工具的默认规则调整导致的：新版formatter默认只有在参数末尾带尾随逗号的情况下，才会对嵌套Widget做强制换行缩进处理，否则会尽可能压缩行内容，导致父子控件层级缩进不明显。

修复方案

所有Widget构造函数的最后一个参数末尾统一加尾随逗号，这是官方推荐的适配方案。比如：
错误写法：
```
Container(
  width: 100,
  height: 100,
  child: Text('测试')
)
```
正确写法（最后一个参数后加逗号）：
```
Container(
  width: 100,
  height: 100,
  child: Text('测试'),
)
```
加完尾随逗号后重新格式化，就会自动按照父子层级缩进显示。

调整VSCode Dart扩展的格式化配置，打开VSCode的settings.json配置文件，添加以下配置：

// 调整Dart格式化单行最大字符数，默认80，可根据自己的屏幕宽度调整为120~150
"dart.lineLength": 120,
"dart.enableSdkFormatter": true,
"[dart]": {
    "editor.defaultFormatter": "Dart-Code.dart-code",
    "editor.formatOnSave": true,
    "editor.formatOnType": true
}