docs: aI 编程全景：从辅助补全到自主工程

Author: fonghehe

docs/.vitepress/theme/ArchiveYear.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { data as allPosts } from "../../posts.data";
+import { data as allPosts, type Post } from "../../posts.data";
 import { computed } from "vue";
 import { useRoute, withBase } from "vitepress";
 
@@ -19,7 +19,7 @@ const yearPosts = computed(() => {
 const postsGroupedByMonth = computed(() => {
   const groups: Record<string, typeof yearPosts.value> = {};
 
-  yearPosts.value.forEach((post) => {
+  yearPosts.value.forEach((post: Post) => {
     const date = new Date(post.date);
     const month = String(date.getMonth() + 1).padStart(2, "0");
     const key = month;

docs/.vitepress/theme/Giscus.vue

@@ -58,7 +58,7 @@ watch(
 );
 
 // 切换深色/浅色主题时同步通知 giscus iframe
-watch(isDark, (dark) => {
+watch(isDark, (dark: boolean) => {
   const iframe = container.value?.querySelector<HTMLIFrameElement>(
     "iframe.giscus-frame",
   );

docs/posts.data.ts

@@ -1,6 +1,6 @@
 import { createContentLoader } from "vitepress";
 
-interface Post {
+export interface Post {
   title: string;
   url: string;
   date: string;

docs/posts/2026/05/ai-coding-landscape-2026.md

@@ -0,0 +1,180 @@
+---
+title: "AI 编程全景：从辅助补全到自主工程"
+date: 2026-05-09 14:31:26
+tags:
+  - 工程化
+  - JavaScript
+---
+
+2026 年 5 月，AI 编程已经从"Tab 补全"进化到了能够独立完成复杂工程任务的阶段。GitHub Copilot Agent Mode、Cursor Composer、Claude Code、Windsurf 等工具正在重塑每一个开发者的日常工作流。本文梳理当前 AI 编程的技术格局、实践方法和需要警惕的陷阱。
+
+## 编程 AI 的三个阶段
+
+回顾过去四年，编程 AI 经历了清晰的三个阶段：
+
+```
+2022-2023  ┃  补全时代    ┃  行级/块级代码补全，被动触发
+2024-2025  ┃  对话时代    ┃  Chat + Apply，对话驱动修改
+2026-      ┃  Agent 时代  ┃  自主规划、多文件编辑、自我验证
+```
+
+2026 年的标志性变化是 **Agent 模式成为默认工作方式**——开发者给出意图，AI 自行搜索代码库、制定计划、执行修改、运行测试，最后提交一个可审查的变更集。
+
+## 当前主流工具对比
+
+| 工具                        | 核心能力                                   | 适用场景               |
+| --------------------------- | ------------------------------------------ | ---------------------- |
+| GitHub Copilot (Agent Mode) | VS Code 深度集成，多文件自主编辑，终端操作 | 日常开发全流程         |
+| Cursor                      | Composer 多文件编辑，强大的上下文理解      | 快速原型、大规模重构   |
+| Claude Code                 | 终端原生，超长上下文，复杂推理             | 架构分析、遗留代码迁移 |
+| Windsurf (Cascade)          | 流式协作，主动感知代码变更                 | 持续迭代开发           |
+| Devin / OpenHands           | 全自主 SWE Agent，端到端完成 Issue         | 独立修复 Bug、添加功能 |
+
+所有工具都在向同一个方向收敛：**让 AI 理解整个项目的上下文，而不仅仅是当前文件。**
+
+## Agent 模式的实际工作流
+
+以一个典型的前端需求为例——"给博客系统添加标签云组件"：
+
+```typescript
+// 你只需要给出清晰的意图描述：
+// "在文章列表页添加一个标签云组件，
+//  点击标签筛选文章，支持多选，
+//  标签大小按文章数量加权"
+
+// Agent 会自行完成以下步骤：
+// 1. 搜索现有代码，理解项目结构和组件风格
+// 2. 分析 posts.data.ts 了解数据源格式
+// 3. 创建 TagCloud.vue 组件
+// 4. 修改 PostList.vue 集成标签云
+// 5. 添加样式，保持与现有主题一致
+// 6. 运行构建验证无报错
+```
+
+Agent 模式的核心优势不是"写代码更快"，而是**降低了上下文切换的认知负担**。开发者不再需要在"思考要改什么"和"去改它"之间反复切换。
+
+## Prompt 工程在编程中的进化
+
+2024 年我们还在纠结怎么写 prompt，2026 年最重要的实践变成了**如何组织项目级的指令文件**：
+
+```markdown
+<!-- .github/copilot-instructions.md -->
+
+## 代码规范
+
+- 使用 Vue 3 Composition API + <script setup lang="ts">
+- 样式使用 scoped CSS，变量引用 VitePress 主题 token
+- 组件文件名 PascalCase，composable 文件名 use\*.ts
+
+## 项目约定
+
+- 博客文章放在 docs/posts/YYYY/MM/ 下
+- frontmatter 必须包含 title、date、tags
+- 所有日期格式 YYYY-MM-DD HH:mm:ss
+
+## 测试要求
+
+- 工具函数必须有单元测试
+- 组件需要有快照测试
+```
+
+这类指令文件让 AI 在每次交互中自动对齐项目规范，比每次手动描述高效得多。
+
+## 类型系统是 AI 编程的最佳搭档
+
+一个反直觉的发现：**TypeScript 的严格类型在 AI 时代变得更重要了，而不是更不重要。** 原因有三：
+
+1. **类型是最好的 prompt**——接口定义告诉 AI 数据的形状，比自然语言精确
+2. **类型是自动验证**——AI 生成的代码如果类型不过，立刻就能发现
+3. **类型是文档**——AI 读类型比读注释更可靠
+
+```typescript
+// 好的类型定义 = 好的 AI 编程体验
+interface BlogPost {
+  title: string;
+  date: string; // ISO 8601 格式
+  tags: string[];
+  url: string;
+  excerpt?: string; // 可选摘要
+  readingTime?: number; // 分钟
+}
+
+// AI 看到这个类型定义，就能生成正确的：
+// - 列表渲染组件
+// - 排序/筛选逻辑
+// - 日期格式化函数
+// - RSS feed 生成器
+```
+
+## AI 生成代码的审查清单
+
+AI 写的代码不等于正确的代码。以下是我日常审查 AI 生成代码时重点关注的方面：
+
+```typescript
+const AI_CODE_REVIEW_CHECKLIST = {
+  // 1. 安全性 —— AI 经常忽略输入验证
+  security: [
+    "用户输入是否做了转义/清洗？",
+    "是否有 XSS、注入风险？",
+    "API 密钥是否硬编码？",
+  ],
+
+  // 2. 边界条件 —— AI 倾向于处理 happy path
+  edgeCases: [
+    "空数组/null/undefined 是否处理？",
+    "并发请求是否有竞态条件？",
+    "网络失败时的降级策略？",
+  ],
+
+  // 3. 性能 —— AI 不了解你的数据规模
+  performance: [
+    "是否有不必要的重渲染？",
+    "大列表是否需要虚拟滚动？",
+    "是否有 N+1 查询？",
+  ],
+
+  // 4. 可维护性 —— AI 倾向于一次性方案
+  maintainability: [
+    "逻辑是否可以复用？",
+    "命名是否与项目风格一致？",
+    "是否引入了不必要的依赖？",
+  ],
+};
+```
+
+## 2026 年需要警惕的反模式
+
+### 1. "AI 能写就不用理解"
+
+最危险的心态。AI 降低了写代码的门槛，但没有降低理解代码的门槛。不理解的代码就是技术债。
+
+### 2. 过度依赖单次生成
+
+复杂功能不应该期望一次 prompt 就完美生成。正确的做法是**分步迭代**：先生成骨架，review 后再补充细节。
+
+### 3. 忽视测试因为"AI 看起来对"
+
+AI 生成的代码通过肉眼审查≠通过测试。尤其是涉及异步逻辑、状态管理的代码，必须跑测试。
+
+### 4. 所有场景都用 Agent
+
+简单的改动（改一个 CSS 值、修一个 typo）直接手动改比等 Agent 搜索分析要快得多。
+
+## 对前端工程师的实际影响
+
+AI 编程最显著的影响不是"取代工程师"，而是**重新分配了时间**：
+
+```
+AI 之前                          AI 之后
+├── 40% 写实现代码               ├── 10% 写实现代码
+├── 20% 查文档/搜索              ├── 5%  查文档/搜索
+├── 15% 调试                     ├── 25% 审查 AI 生成的代码
+├── 15% 设计/思考                ├── 30% 设计/思考/架构
+└── 10% 写测试                   └── 30% 写测试和验证
+```
+
+核心趋势很清楚：**实现的时间在减少，设计和验证的时间在增加**。能做好架构设计和代码审查的工程师，在 AI 时代的价值反而更高了。
+
+## 写在最后
+
+AI 编程工具在 2026 年已经成为和 Git、IDE 一样的基础设施。抵触它没有意义，盲目依赖它同样危险。最好的策略是：把 AI 当作一个非常勤奋但缺乏判断力的队友——让它多干活，但关键决策你来做。

package.json

@@ -9,6 +9,7 @@
     "docs:preview": "vitepress preview docs"
   },
   "devDependencies": {
-    "vitepress": "^1.6.2"
+    "vitepress": "^1.6.2",
+    "vue": "^3.5.34"
   }
 }