VS Code：把编辑器变成你的第二双手

装什么：一个扩展，就一个

Flutter（Dart-Code.flutter）。它会自动带上 Dart-Code.dart-code，这两个就是全部。装完之后你已经拥有了：语法高亮、补全、跳转、重构、调试、热重载、DevTools、Widget 预览、格式化。

常被推荐但其实不必装的几类：

• 代码片段扩展（Awesome Flutter Snippets 之类）。stless / stful / stanim 这三个最常用的片段来自 Dart 分析服务器本身，装了插件就有。
• Error Lens 之类的错误行内显示。Dart 的分析器本来就把错误标在行内、列在 Problems 面板里；再叠一层容易和 closing labels 打架。
• 格式化插件。Dart 的格式化器在 SDK 里，扩展已经把 editor.defaultFormatter 指向自己了。装 Prettier 那类东西只会互相抢。

另外，扩展装好后会自动给 [dart] 配好这几项，你不用再写：editor.tabSize: 2、insertSpaces: true、detectIndentation: false、defaultFormatter，以及 editor.inlayHints.enabled: "offUnlessPressed"（内联类型提示平时藏着，按住 ⌥ 才浮出来——这个默认值很聪明，别改）。

核心只有一个键：⌘.

Android Studio 那边是 ⌥⏎，VS Code 这边是 ⌘.（Windows / Linux 是 Ctrl+.）。Flutter 开发九成的重构都从这一个键进去。光标放在一个 widget 上按它，弹出来的是这些——下面这份清单是从本机 Flutter 3.44.8 的分析服务器里直接读出来的，不是凭印象写的：

亲手按一下：它到底改了哪些字

光看清单没有感觉。下面这台机器里，左边那些大写开头的 widget 名字都能点——点一个就是把光标放上去，右边立刻列出这个位置真的会弹出来的选项，再点一条就当场改写。

这台改写器不是拿字符串拼的近似品：它的每一条输出都和本机 dart language-server 通过 LSP 给出的编辑逐字符核对过（连「Wrap with Builder 生成的代码在 } 后面漏了一个逗号」这种真实的小毛病也照抄了）。

玩过之后有两件事值得记住。第一，Wrap with Center 放得下就放一行，Wrap with Padding 不管放不放得下都拆行——这是模板写死的，不是格式化器决定的。第二，光标放在类名上时，菜单里只剩一条 Convert to StatefulWidget，但它是全书出现频率最高的一条：这就是第 25 章说「默认写无状态、需要时再升级」几乎零成本的原因。

热重载与热重启：分界线在哪

这是每天要按几百次的两个动作，分清楚能省掉大量「改了怎么没反应」的困惑。

官方文档明确列出的热重载看不到效果、必须热重启的情况：

• 改了 main() 或 initState() 里的代码（它们不会被重跑）；
• 改了全局变量或静态字段的初始值；
• 把枚举改成普通类、或者反过来；
• 改了泛型类型声明；
• 改了原生代码（Kotlin / Java / Swift / Objective-C）——这个连热重启都不够，要完整重跑；
• 代码有编译错误（这时候什么都不会生效，先看 Problems 面板）；
• 改了 CupertinoTabView 的 builder。

还有一条不在官方列表里、但你一定会撞上的：改了 pubspec.yaml 或换了依赖，要停掉重跑。

格式化：Dart 3.7 之后，尾逗号不用你摆了

这条更新对 Flutter 的日常影响比任何插件都大，但很多人还在用老习惯。

以前：格式化器的行为由你手摆的尾逗号控制——参数列表末尾有逗号就一个参数一行，没有就尽量挤在一行。于是「加逗号 / 删逗号」变成了一种手动排版。

Dart 3.7 起：格式化器换成了新的 tall style，它自己按行宽决定加还是删尾逗号。放得下就收成一行并删掉尾逗号，放不下就拆开并补上。你不需要再管这件事。

两个配置项都在 analysis_options.yaml 里（不再是 VS Code 设置——dart.lineLength 已经被官方标成 LEGACY）：

# analysis_options.yaml
include: package:flutter_lints/flutter.yaml

formatter:
  page_width: 100          # 默认 80。Flutter 代码嵌套深，100 舒服很多
  trailing_commas: preserve # 3.8 起可用：想要回手动控制就写这个

linter:
  rules:
    - prefer_const_constructors      # 帮你把 const 加满（第 4 章那个性能开关）
    - prefer_const_literals_to_create_immutables
    - use_key_in_widget_constructors # 提醒你别忘了收 key
    - avoid_print                    # 用 debugPrint 或日志库
    - use_build_context_synchronously # await 之后用 context 会被拦住

配好之后打开 editor.formatOnSave，从此不再想排版的事。全项目一次性修掉能自动修的问题：dart fix --apply（或者命令面板里的 Apply Fix All in Workspace）——它也是把 withOpacity 批量换成 withValues 那种迁移的正规做法。

看得见的辅助：三个开关

① Closing labels（默认开着）

多行调用的收尾括号后面那些灰色的 // CourseTile，就是它。深嵌套时它是唯一能让你知道「这个 ) 关的是谁」的东西。设置项是 dart.closingLabels。

② Flutter UI Guides（默认关着，建议打开）

在 widget 树的缩进处画出竖直的连线，一眼看出层级关系：

"dart.previewFlutterUiGuides": true
"dart.previewFlutterUiGuidesCustomTracking": true   # 减少更新延迟

官方文档提醒：这条线的连贯程度受编辑器行高影响，如果显示成虚线断断续续的，调一下 editor.lineHeight。另外它和 closing labels 同时开会有点挤，可以二选一。

③ Widget Preview（3.35 起内置，2026 年已经好用了）

在任意 widget 上加一个 @Preview 注解，侧边栏就能实时渲染它——不用启动模拟器、不用跑到那个页面去：

import 'package:flutter/widget_previews.dart';

@Preview(name: '课程卡片')
Widget courseTilePreview() => const CourseTile(name: 'INFOSYS 722', room: '401');

命令面板里搜 Flutter: Show Widget Preview。相关设置：dart.flutterWidgetPreview（默认 startLazily，用到才启动）、dart.flutterWidgetPreviewLocation（默认 sidebar）。做设计稿还原和调组件样式时，这个循环比「改代码 → 热重载 → 手动点到那个页面」快一个数量级。

调试：不要用 print 找 UI 问题

DevTools 的入口不止一个：命令面板里有 Dart: Open DevTools Widget Inspector Page 这类直达命令，能一步开到具体某个页面；也可以设 dart.openDevTools（默认绑 ⌃⌥D）。

一份可以直接抄的 settings.json

{
  // —— 编辑体验 ——
  "dart.previewFlutterUiGuides": true,
  "dart.previewFlutterUiGuidesCustomTracking": true,
  "dart.renameFilesWithClasses": "prompt",   // 改类名时问你要不要一起改文件名
  "editor.formatOnSave": true,
  "editor.rulers": [100],                    // 和 formatter 的 page_width 对齐

  // —— 热重载 ——
  "dart.flutterHotReloadOnSave": "manual",   // 默认值，手动 ⌘S 才重载
  "dart.hotReloadProgress": "statusBar",     // 别用通知，太吵

  // —— 少点噪音 ——
  "dart.showTodos": false,                   // 看烦了就关
  "files.exclude": { "**/.dart_tool": true, "**/.flutter-plugins-dependencies": true }
}

剩下值得知道的按键，都是 VS Code 通用的，只是在 Flutter 里格外好用：⌘P 跳文件、⇧⌘O 跳当前文件的符号、⌘T 全项目找类、F2 改名（配上 renameFilesWithClasses 顺手改文件名）、⌥⇧F 格式化整个文档、⌘K ⌘0 全部折叠（看一个巨大的 build 时救命）、⌥Z 切换自动换行。

{
  "configurations": [
    {
      "name": "课表 · 开发环境",
      "request": "launch", "type": "dart",
      "args": ["--dart-define=API_BASE=https://dev.example.com"]
    },
    {
      "name": "课表 · 生产环境",
      "request": "launch", "type": "dart",
      "args": ["--dart-define=API_BASE=https://api.example.com"]
    }
  ],
  "compounds": [
    { "name": "两台一起跑", "configurations": ["课表 · 开发环境", "课表 · 生产环境"] }
  ]
}

和 Compose 的精确对照

这一章的一句话

Flutter 的样板不该手打：stless / stful 起骨架，⌘. 里那二十一条改结构，格式化交给 Dart 3.7 之后的 tall style，UI 问题交给 Inspector 和 Debug Painting——手打的部分越少，你花在「想清楚」上的时间越多。

折完了

二十八章到这里结束。回头看，这本书其实只讲了两件事：那棵你看不见的树（卷 II 到卷 V，为什么），和你手上真的要敲的东西（卷 VI 到卷 VII，怎么做）。

如果只留一句带走：你每帧写的只是一张平摊的纸，框架照着上一帧的折痕把它折成会量会画的东西。你在这本书里学到的每一个具体技巧——const、Key、setState 的范围、BuildContext、两个类的分工——全都是在管那道折痕。

现在去把学校那个 App 做出来。第一行敲 stless。