首页 > 分享 > 分享:前端开发使用的各类 AI Copilot 辅助开发

分享:前端开发使用的各类 AI Copilot 辅助开发

前言

现如今,已经有的很多合规方式可以让我们稳定使用各类AI辅助编程工具了。各类第三方应用/工具/插件,另外,国产大模型也已经能胜任辅助编程助手的任务了。

注意:基于个人使用经验以及开发习惯,AI对话是个很不错的“工具人”,它的水平很大程度上不取决于它自身,而取决于你的水平、你描述问题的清晰与准确程度。虽然它可以非常强大,但不能轻信、沉迷于它。尝试获取某个问题的解决方案时,查阅权威的技术文档等常规措施仍是必不可少的。

实践表明,AI真的只是AI,聊天时,你的心态不能是让它给你把活干了,应该是给你出谋划策、demo演示,对错仍需自行分辨。经历过语法错误、方法过时、自造语法等等…

看到一个实用的AI工具集,本文仅列举个人使用过的工具,说明使用方法、场景

更新下文档吧,根据专业性、使用体验调整下优先级

一、Copilot

编程助手,真正意义上的助手。在你擅长的领域,它可能显得马虎,总犯小错,甚至经常一本正经得胡说八道。但在网上一搜全是复制粘贴的情况下、或者处于你的知识盲区时,你完全可以把它供起来,虔诚得请求(精准描述)它给你指路(解决方案)

GitHub Copilot

单列,不差钱的可以无脑选它!

GitHub Copilot - 维基百科
GitHub Copilot
GitHub Copilot VSCode插件 - Your AI pair programmer

相对于什么都可以问的AI对话,GitHub Copilot 的定位就是“结对编程助手”,具体介绍、使用方法参照官方介绍。它可以在 JetBrains IDEs (Beta),Neovim,Visual Studio,Visual Studio Code中安装拓展使用。

使用方式非常丝滑~

可免费使用60天,订阅价十刀/月起,百刀/年起。

缺点在此,收费,且贵!不过不用担心,它有免费平替款,往后看。

示例

GitHub Copilot 的使用方式使它能最大程度的参与日常开发中。没使用过的可以看看效果,看看助手能干什么

1. js方法

在这里插入图片描述

2. vue单文件组件

开发一个有一定复杂度,包含一系列逻辑的组件,在这个过程中,copilot 能真正体现什么叫AI结对编程助手
在这里插入图片描述

3. vue组件

不仅是js,它可以参与到前端开发最基本的 html/js/css 内,提供全方位协助
在这里插入图片描述

再说一遍,使用丝滑~
谁用谁知道

它提供的建议仍然不能直接运用到生产,需要自行采纳、完善,毕竟,它只是个助手

其它可集成至IDE的Copilot

毕竟 github copilot 是收费的,过了免费体验期,就要付费了,十刀每月还是挺贵的。这里推荐一些免费的替代品,对话、代码自动补全这两个核心功能,以及代码重构、解释、注释生成、测试用例生成等快捷功能基本都具备

通义灵码豆包MarsCode: 代码自动补全功能每日有上限codeiumCodeGeeX代码小浣熊Raccoon: 更多附加功能很多,问答质量貌似一般Cody: 问答次数每月有上限Bito

二、国产

豆包

可网页访问,可下载APP使用

通义

通义官网

阿里通义提供了一系列产品

通义灵码:类似于 Github Copilot, Codeium,可在各主流编程IDE中安装使用

通义千问

可网页访问,也可接入钉钉,好像还有APP

钉钉接入通义千问,打工人使用比较方便,但钉钉上的输出速度是真的

通义效率

在这里插入图片描述
网页阅读示例,可概括总结、提炼要点,绘制脑图,还可做笔记,弯道超车遥遥领先~

讯飞星火

还有很多其它国产大模型,但没使用过,就不写了。

三、浏览器插件

Chrome插件:Chrome应用 内搜索 Monica、Sider
微软插件:Edge 外接程序 搜索 Sider

可分别在Edge Chrome浏览器上安装使用,免费版每天30个问题。日常问答够用了,深度使用或者不差钱的可以花钱升套餐,价格十刀/月起,百刀/年起

四、其它

国外的工具需要科学上网,部分工具直接大陆禁用

Poe

聚合了很多AI模型机器人,每日3000积分,普通模型可以问答一两百次,高级模型每天也够体验几次了

Coze

有国际版、国内版,都可以试试

Slack

Slack中可以使用关键词搜索相关应用,选择含免费套餐的添加应用即可

Chrome浏览器

地址栏输入@可与Gemini对话,与新必应类似

使用场景总结

前端开发中,AI助力场景大致如下:

IDE集成(Github Copilot, Cursor, 通义灵码, Codeium, …) 代码生成代码补全解释代码优化建议生成单元测试调式和错误检测生成文档和注释 即时问答(Chat-GPT, Claude, …) 技术问答技术方案Web信息检索:类库推荐、介绍、对比;社区资源推荐;等等 浏览器辅助 kimi.ai-Chrome插件:提供基于网页上下文的即使问答kimi.ai:提供基于上传pdf、doc、xlsx、ppt、txt、图片等文件的即使问答秘塔AI搜索:可一定程度上取代搜索引擎。无广,包含引用源,自动生成大纲、思维导图 机器人(Poe, Coze, 豆包, kimi.ai, …),可自定义机器人、设置知识库

相关知识

AI应用开发实战
从前端到后端——完整的Web开发指南
web前端开发爱尚鲜花.rar资源
快速上手web前端开发(超详细教程)
「职位对比」花儿绽放 前端开发工程师怎么样
响应式婚礼网站:前端开发实战指南
前端开发项目中使用字体库
植物资源开发
Vue.js实现动态图标渲染:前端开发中的创意实践
20行Python代码开发植物识别 app

网址: 分享:前端开发使用的各类 AI Copilot 辅助开发 https://m.huajiangbk.com/newsview949315.html

所属分类:花卉
上一篇: 个人主页Vue2 实战:从零构建
下一篇: Web3全栈开发指南