· 内联编辑与心流

一、修改代码时的上下文切换#

心理学家米哈里·契克森米哈赖（Csikszentmihalyi）把”心流”定义为这样一种状态：

完全沉浸在任务中，忘记时间流逝；
注意力集中在当前任务上，较少被无关操作打断。

但程序员的心流极其脆弱，因为它有一个最大的敌人——上下文切换。传统开发中，为了完成一次小修改，你需要：切到文档 → 搜到位置 → 确认上下文 → 找到调用方 → 改完还要切回来验证……每切换一次，大脑就要重新”加载”一遍状态。

心流的本质 = 连续性 × 效率。连续性一旦断裂，再高的个人效率也补不回来。

二、Inline Edit：把修改留在当前上下文里#

Inline Edit（行内编辑） 的核心价值只有一句话：

在当前上下文中完成修改——不切换文件、不切换窗口。

AI 直接在你光标所在的位置或选中区域里工作，改完即看 Diff、即点 Accept，整个动作发生在同一条代码上下文里。这正是对抗”上下文切换”最直接的工具。

三、基本操作#

操作	快捷键	说明
唤起行内编辑	`Cmd+K`（Mac）/ `Ctrl+K`（Windows）	在光标位置或选中区域唤起 AI 编辑
接受修改	点击 Accept	应用 AI 建议
拒绝修改	点击 Reject	撤销 AI 建议
查看 Diff	自动展示	红=删除，绿=新增

四、三种使用模式#

模式 1：无选中 → 生成新代码 光标放在空行，按 Cmd+K 输入指令，例如：

1
创建一个 useDebounce Hook，接受 value 和 delay 参数

模式 2：选中代码 → 修改现有代码 选中一段代码，按 Cmd+K 输入指令，例如：

1
添加错误处理和 loading 状态

AI 会基于选中代码生成修改版本并展示 Diff。

模式 3：选中代码 → 解释 / 转换 选中代码后输入意图，例如：

解释这段代码的逻辑
把这段 Class Component 转成 Hooks
优化这段代码的性能

五、Diff 预览的正确用法#

AI 每次给出修改都会展示 Diff 视图，红色代表删除、绿色代表新增。接受之前，用一份清单快速审查：

检查项	关注点
逻辑正确性	是否改动了原有业务逻辑，或引入错误逻辑？
完整性	需要修改的内容是否全部覆盖？
副作用	是否误改了与任务无关的代码？
风格一致性	是否与现有代码风格和命名规范一致？

改动较大时，建议”选中更小的代码块 + 单一指令”，准确率会大幅提升。

六、高频实战技能#

1. 局部重构#

提取函数：选中重复逻辑，指令 将选中的逻辑提取为一个 formatUserName 工具函数
简化条件：选中嵌套 if-else，指令 用 early return + 策略模式简化这段条件逻辑
类型安全：给这个函数添加完整的 TypeScript 类型注解，包括参数、返回值与错误类型

2. 代码解释#

接手陌生代码时，选中后让 AI：用中文逐行解释这段代码的逻辑，说明数据流向、状态变化和可能的边界情况

3. 注释生成#

函数级：生成 JSDoc 风格的中文注释，包含 @param / @returns / @throws / @example
模块级：在文件顶部让 AI 生成模块职责、核心导出、依赖关系和使用示例

七、例子：逐步拆分一个 300 行组件#

假设你接手了一个 300 行的 Dashboard.tsx，数据获取、筛选、表格、图表、弹窗、导出全堆在一个文件里。用 Vibe Coding 三步拆解：

Step 1：让 AI 分析结构

1
@Files src/components/Dashboard.tsx
2
这个组件里哪些逻辑适合抽成 Hook，哪些界面适合拆成子组件？
3
先列一下建议的文件名和职责，这一步先别改代码。

Step 2：按方案逐步拆分（配合 Inline Edit）

抽 Hook：将选中的数据获取逻辑提取为 useDashboardData Hook
拆子组件：将表格 UI 提取为 DashboardTable，Props 包含 data/onSort/onFilter
拆工具函数：将数据转换逻辑提取到 dashboard-utils.ts，并加类型注解与中文注释

Step 3：验证结果

1
帮我检查拆分后的代码：import 有没有遗漏，原来的交互有没有变化？
2
如果还有超过 50 行的函数，也标出来，我再判断要不要继续拆。

重构前后对比一目了然：

1
重构前：Dashboard.tsx（300 行）—— 六个功能全部堆叠
2
重构后：Dashboard.tsx（60 行）—— 只负责组合和布局
3
├── hooks/       useDashboardData.ts / useDashboardFilter.ts
4
├── components/  DashboardTable / DashboardChart / DashboardForm
5
└── lib/         dashboard-utils.ts

八、“3 分钟迭代环”：把反馈周期压到最短#

短周期迭代是让 AI 成为”结对程序员”的关键习惯。常用指令速查表：

场景	快速指令
加载状态	`给这个组件加上 loading 骨架屏`
错误处理	`添加 try-catch 和错误提示 UI`
响应式	`让这个布局在移动端也能正常显示`
性能优化	按 useMemo / useCallback / React.memo 最小改动优化并说明依据
动画	`给这个列表加上进入/退出动画`
国际化	`把硬编码的中文提取为 i18n 字符串`
无障碍	`添加 ARIA 属性和键盘导航支持`
暗色模式	`添加 dark mode 支持`

性能优化速记：

useMemo：计算成本高、依赖不频繁变化的值（大列表过滤、复杂排序、聚合统计）；
useCallback：把函数传给子组件（尤其子组件已 React.memo）时保持引用稳定；
React.memo：纯展示型 / 稳定输入的组件，避免父组件更新引发的不必要重渲染。

九、何时用 Chat，何时用 Inline Edit？#

Inline Edit 适合”局部、单文件”的修改；而跨文件的统一修改，用 Chat 模式批量处理，例如：

给多个组件统一加 ErrorBoundary 包裹；
统一改造多个 API 文件的错误处理策略（ApiError 结构、401 跳登录、5xx 上报）；
多个组件统一做 i18n 文案提取，缺失 key 给出兜底；
批量补齐 TypeScript 类型、消除 any。

一条成熟指令的套路通常是：@Files 指明文件 → 明确要求（规则清单）→ 限定边界（不改变签名/行为）→ 要求输出清单。

十、实践建议#

如果想把这一讲内化成能力，可以从三个练习开始：

速度挑战：让 AI 生成一个 Todo List 初版，再用 Inline Edit 连续完成 8 项增强（状态切换、删除、编辑、优先级、拖拽排序、筛选、本地存储、批量操作），目标 30 分钟内完成；
屎山重构：找一个项目中最臃肿的组件，用第三部分的流程重构，并记录重构前后的行数变化；
建立指令库：整理自己最常用的 10 个指令，形成个人”快速指令手册”。

写在最后#

行内编辑适合已经明确边界的小改动：选中相关代码、描述修改、检查 Diff，再运行验证。需要跨文件理解业务或调整架构时，还是应该先讨论方案，不能为了少切换窗口而省掉这些步骤。

音乐