前端 AI 辅助编程
前端 AI 辅助编程
AI 辅助编程工具
AI 辅助编程目前主要是两种方式：
- 代码补全：通过 AI 模型分析上下文，自动补全代码片段。
- 代码生成：根据自然语言描述生成完整的代码。
目前有许多工具和插件可以实现这些功能。
编辑器
Cursor
是目前最好用的 AI 编辑器。
- 官网：Cursor
- 优点：是目前使用下来体验最好的 AI 编辑器，代码补全能力是最强的，可以跨行补全 (这是我体验下来觉得最能提高工作效率的)，支持 Claude 模型。
- 缺点：目前想要免费试用越来越困难，需要付费，价格 20 刀一个月。
Trae
是字节跳动推出的 AI 编辑器。
- 官网：Trae
- 优点：免费，界面友好，在 VSCode 的基础上进行了一些页面的美化，支持免费使用 Claude 模型。
- 缺点：代码补全能力不如 Cursor，不能跨行补全。
VSCode 插件
GitHub Copilot
是 GitHub 推出的 AI 代码、代码生成补全插件。
- 优点：微软推出的，在 VSCode 上使用非常方便，最近更新了 NES 功能，也支持跨行补全了，但是体验没有 Cursor 好。可以免费使用。可以使用 Claude 模型。
- 缺点：代码补全能力不如 Cursor；免费试用有门槛 (需使用外币卡预付 10 刀)。
Augment
最近很火的 AI 代码补全和代码生成插件。
- 优点：可以扫描整个仓库来建立索引，支持跨行补全，支持 Claude 模型。
- 缺点：价格较高，30 刀一个月，而且使用下来跨行补全不太好用。
Cline
开源的 AI 代码生成插件。
- 优点：开源，免费，支持多种模型。
- 缺点：不能代码补全，只能生成代码；调用模型需要付费。
总结
如果侧重代码补全，推荐使用免费试用 Cursor，如果有渠道使用 Copilot，使用 Copilot 也不错。
如果侧重代码生成，推荐使用 Cline、Trae。
AI 辅助编程模型
目前在代码能力上，推荐使用 Claude3.7、Claude3.5、DeepSeekV3(0324)。这几个模型在代码能力上可以说是最强的。
Claude 另一个优势是支持图片输入。
推荐使用 CherryStudio 统一管理和调用模型。
OpenRouter 可以免费使用 DeepSeekV3(0324) 模型。
对前端开发的帮助
代码补全
目前开发中我使用最多的功能是代码补全，它可以减少我重复的输入，跨行补全还可以猜测我下一步想要修改的内容。比如我要修改一个变量，它可以自动补全其他我要修改变量的地方。
代码生成
目前代码生成在项目中使用较少，使用较多且不容易出错的地方如下。
- 生成一些常用的函数，如数组处理和字符串操作。
- 生成表单验证函数 (编写正则表达式)。
- 通过输入图片生成 Echarts 图表配置。
- 仿写页面，比如有两个页面，A 页面已经修改完成，B 页面与 A 页面相似，我可以让 AI 帮我把 B 页面仿照 A 页面来修改。
- 生成请求函数，把后端给我们的 Swagger 文档转换成请求函数。
快速查阅文档和个人笔记
在开发中，我们常常需要查阅文档，我们可以通过 CherryStudio 搭建个人的本地知识库，将文档和个人笔记搭建成知识库，然后通过 AI 快速查阅。
代码重构
在开发中，可能需要重构代码，我使用较多的地方是让它帮我把 Vue 选项式风格的代码重构成 Vue 组合式风格的代码。
UI 设计
在开发中，可能需要设计一些 UI 界面，我们可以通过 AI 生成一些 UI 界面。它可以根据原型来快速生成漂亮的 UI 设计稿 (以 HTML 的形式)，这可以方便我们快速搭建页面。
组件生成
在开发中，一些设计业务较少且重复的组件，我们可以让 AI 帮我们生成。比如我们需要一个表格组件，我们可以给它一些提示词 (比如，帮我生成一个表格组件，使用 ElementPlus 组件库，使用 Vue3 的组合式 API，符合 ElementPlus 整体设计风格，支持分页和排序功能)，然后我们把这段话丢给提示词优化工具，用优化好的提示词给 AI，它就可以帮我们生成一个表格组件。
如何让 AI 更好地理解我们
- 可以使用提示词优化来让 AI 更好地理解我们。推荐工具：prompt-optimizer。
- 尽可能分模块的描述需求，让 AI 一部分一部分的生成代码。(比如我要生成一个页面的增删改查，如果我们一开始就给 AI 说要生成一个增删改查的页面，AI 可能会生成一个很大的代码块，我们可以把它拆分成几个小的模块来描述。我们可以先让 AI 生成一个新增的模块，告诉它需要的字段、数据类型、表单形式 (下拉框、输入框之类的)，然后再根据生成的代码进行微调，调整好以后就可以让它在这个基础上继续生成，这个过程可以提高生成代码的准确性。)
- 可以使用图片来描述需求，AI 可以通过图片来理解我们想要的效果。(比如我们想要修改页面某个区域的样式，我们可以先截图，然后用红色框框选这部分区域，然后给可以视觉识别的 AI 模型，AI 就可以理解我们想要修改的区域。)
- 限制 AI 的行为，不能光给 AI 说让它干什么，还需要给它说不要它干什么。(比如我在重构代码的时候，我会告诉 AI 我需要重构的代码是 Vue 选项式风格的代码，然后告诉它我需要重构成 Vue 组合式风格的代码，告诉它不要修改代码逻辑、不要使用 reactive。)