呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
联系频道主:@cosine_yu
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
联系频道主:@cosine_yu
#优质博文 #AI #AST #React #前端 #测试 #工程实践 #ClaudeCode #codemod #course
好文章,关于使用 AI 进行重构迁移的教科书式文章。
Migrating 6000 React tests using AI Agents and ASTs
[以下是方便搜索索引的大纲 (AI 生成),请读原文]
author Elio Capella Sánchez
好文章,关于使用 AI 进行重构迁移的教科书式文章。
Migrating 6000 React tests using AI Agents and ASTs
AI 摘要:作者在 Filestage 的前端项目中使用 AI Agents(特别是 Claude Code)与 AST(Abstract Syntax Tree)技术,将近千个测试文件、六千多条测试从 React Testing Library v13 迁移至 v14。文章展示了从制定迁移指南、分步提交 PR、编写 codemod、自动化验证到改进 AI 提示的完整过程,最后总结出 AI 在大规模代码迁移中的优势与局限,并强调“小步迭代 + 自动化验证”的工程基本功仍然至关重要。
[以下是方便搜索索引的大纲 (AI 生成),请读原文]
1. 项目背景与动机
• 公司使用旧版 React Testing Library 编写了 970 个测试文件,总计 6000 多测试用例。
• 升级至 v14 后 API 完全异步化,行为变化大,手动迁移代价极高。
• 作者决定尝试用 AI 辅助完成大规模迁移。
2. 准备与迁移指南
• 首次直接用 Claude Code CLI 自动迁移失败,暴露出测试失败过多、AI 调试混乱的问题。
• 于是转而使用 Claude Web 模式制作详细的迁移指南,分析版本差异与新 API。
• 确定主要变化:异步 API、测试 setup 模式更新、时序逻辑差异需人工介入。
3. 拆分改动与依赖并行安装
• 利用 NPM 的包别名功能同时运行 v13 与 v14,避免一次性大变更。
• 生成迁移指南并提交第一份 PR,保证团队迭代可控。
4. 编写与测试 codemod 自动化工具
• 使用 jscodeshift 解析代码为 AST,再生成批量修改工具。
• 编写输入输出测试用例以验证 codemod 效果(例如导入路径、 renderWithUserEvent 封装替换)。
• 自动测试 codemod 确保修改一致性和可验证性。
5. 实际迁移与 AI 协作循环
• 通过详细 prompt 指令让 Claude Code 分批迁移 10 个测试文件,执行 lint 检查与单测验证。
• 持续观察失败案例,不断改进 codemod 与迁移指南。
• 迁移指南从最初 4500 字扩充到 7500 字;codemod 从 271 行发展到近千行,测试覆盖更完备。
• 共执行 50 次迁移,形成 50 个独立 PR。
6. AI 性能与局限分析
• Claude Code 在调试测试与识别重复模式方面表现优异。
• 局限包括 context 深度不足、长任务遗忘指令、无法稳定维持覆盖率。
• 通过增加 JSON 格式的覆盖率报告输入,AI 能理解覆盖问题并修复。
• 网络波动与服务超限导致中断,验证仍需人工把关。
7. 工程启示与最终成果
• 整体用一周完成迁移,每个 PR 约半小时。
• 若纯人工迁移,估计需数月。
• 迁移过程机械但 AI 显著提升效率。
• 保持验证自动化、关注 edge case、理解底层工具机制,是让 AI 发挥价值的关键。
• 作者展望未来 AI 将进一步解放开发者,从“重复劳动”转向更有创造力的工作。
author Elio Capella Sánchez
#优质博文 #AI #工程实践 #ClaudeCode #工程化
非常好文章,在 X 上的 yousa:“我把前几天在Trae的分享整理成了文字稿“ 里看到的。
从「写代码」到「验代码」:AI 搭档写走 3 年,我踩出来的协作路线图
[以下是方便搜索索引的大纲(AI 生成),请读原文]
author yousa
非常好文章,在 X 上的 yousa:“我把前几天在Trae的分享整理成了文字稿“ 里看到的。
yousa (@y0usali): 我把前几天在Trae的分享整理成了文字稿
「https://yousali.com/posts/20251124-how-to-coding-with-ai/」
这篇文章写给已经在或准备在真实生产项目里用 AI Coding 的后端 / 全栈工程师和技术管理者。
它不会教你「按钮在哪里」「哪个 prompt 最神」,而是想在大约 15 分钟里,帮你搞清楚三件事:
哪些任务交给 AI 最「划算」;
怎么让项目本身变得更「AI 友好」,提高一次命中率;
当生成不再是瓶颈时,工程师应该如何设计验证流程,把时间花在真正值钱的地方。
从「写代码」到「验代码」:AI 搭档写走 3 年,我踩出来的协作路线图
AI 摘要:作者总结三年 AI 编程经验,指出 AI 写代码的时代关键不在「准不准」而在「值不值」。文章从个人与团队两个视角分析了 AI 生成代码的最佳使用场景(高重复、低风险、易验证)、如何构建「AI 友好」项目,以及工程师心态从「写代码」到「验代码」的转变。核心结论是:生成已不再是瓶颈,验证才是新的核心;AI 的上限取决于给它的上下文(Context)。标准化与自动化是让 AI 值得信赖的关键,而工程师应成为定义任务与设计验证系统的「总工程师」。
[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 两种声音与早期弯路 —— 从试验到思考
• AI 编程存在两极化认知:「神迹」与「玩具」并存。
• 初期盲目尝试,成功靠运气,暴露问题在于目标定义不清。
• 结论:关键在于明确「让 AI 干什么」,而非讨论「准不准」。
2. 从关注准确率到计算性价比 —— 「甜点区」的发现
• 引入「效率增益」公式衡量 AI 协作的价值。
• 四类高性价比任务:高重复、高耗时、低风险、易验证。
• 案例:模块化模板 + few-shot 示例提升生成质量。
• 心态转变:接受 AI 错误,注重系统级可靠性。
• 工程协作比喻:把 AI 当成「聪明但不熟悉项目的实习生」。
3. 团队视角的优化 —— 让项目更「AI 友好」
• 数据显示企业中 20%–30% 新代码由 AI 生成,但效率提升有限。
• 关键差异在于:项目是否标准化与自动化。
• 标准化**:统一接口规范、术语表、文档说明,让人机共享上下文。
• 自动化:降低验证成本,AI 助力 pre-commit、自动测试、CI/CD 等流程。
• 实践公式:讲清规则 → AI 辅助执行 → 人专注高价值审查。
4. 工程师的心理负担与注意力管理
• 高频切换任务使「注意力成本」爆炸,人类像「上下文很小的 LLM」。
• 心流(flow)被碎片化交互打断,导致疲惫与效率下降。
• 自救方法:时间分层、AI 时分复用、三分钟原则、沟通卫生与单线专注。
• 重点转移:保护注意力等于提升系统整体吞吐。
5. 稳定的两条工程原则
• 原则一:生成已非瓶颈,验证是核心
• 聚焦测试、监控、回滚机制。考核应基于 Bug Lead Time 而非代码量。
• 原则二:上下文为王(Context is King)
• 上下文完整度决定 AI 产出质量。
• 推广路径:统一规范 → 写进仓库 → 自动化验证。
• 单句箴言:AI 写代码的水平 = 你提供上下文的水平。
6. 给三类读者的建议
• 新手:从小型任务切入,先找「值不值」感受。
• 重度用户:从优化上下文与验证流程入手。
• 管理者:亲自尝试,引导从「个人提速」走向「团队工程化」。
author yousa