0


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

前言

现在谁还没听过 ChatGPT,通没通网我不确定,但一定不是搞开发的
网上各种教注册OpenAI账号的、卖key的,然后就可以去各类基于ChatGPT api的插件、应用使用。但是这类都属于不合规的方式,这里不推荐

虽然因为种种原因,无法直接使用。但现如今,已经有的很多合规方式可以让我们稳定使用了。不要再冒风险买key,非科学上网了

一、免费浏览器插件

都知道有token就可以上 ChatGPT,但不稳定不说,指不定什么时候号就被封了。目前有很多基于它的服务/应用,注册他们的账号即可使用

插件

Chrome插件:Monica — Your ChatGPT Copilot in Chrome
Sider - ChatGPT 侧边栏, 支持GPT-4
微软插件:Sider – AI Sidebar

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

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

小结

基于个人使用经验以及开发习惯,ChatGPT是个很不错的“工具人”,它的水平很大程度上不取决于它自身,而取决于你的水平、你描述问题的清晰与准确程度。上面两个插件都提供常见“话术”,并支持自定义及保存。

虽然它可以非常强大,但不要过分沉迷于它。尝试获取某个问题的解决方案时,查阅权威的技术文档等常规措施也是必不可少的。

二、GitHub Copilot

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

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

使用方式非常丝滑

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

示例

GitHub Copilot是个人用的最多的,它的使用方式使它能最大程度的参与日常开发中

1. js方法

在这里插入图片描述

2. vue单文件组件

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

测试代码

<scriptsetup>import{ ref, provide }from'vue'import UserViewComp from'./UserView/index.vue'import OrderViewComp from'./OrderView/index.vue'// 当前显示的视图 [order|user]const activeView =ref('')const orderViewEl =ref()const userViewEl =ref()// 切换到user视图functionshowUserView(no, record =true){
  userViewEl.value.showView(no)
  activeView.value ='user'
  record &&addRecord('user', no)}// 切换到order视图functionshowOrderView(no, record =true){
  orderViewEl.value.showView(no)
  activeView.value ='order'
  record &&addRecord('order', no)}// 提供方法:组件间切换视图provide('showUserView', showUserView)provide('showOrderView', showOrderView)/**
 * 记录
 * 记录切换视图的操作, currentRecordIndex指向当前记录, 可前进后退
 * 当有新记录时, currentRecordIndex+1, 后面的记录将被清空
 * 
 * @prop {string} type 记录类型 [user|order]
 * @prop {string} no 记录编号
 */const records =ref([])// 当前记录索引const currRecordIndex =ref(-1)const forwardDisabled =computed(()=> currRecordIndex.value >= records.value.length -1)const backDisabled =computed(()=> currRecordIndex.value <=0)// 监听records, 当长度超过20时, 删除前面的记录watch(records,(newVal)=>{if(newVal.length >20){
    records.value.splice(0, newVal.length -20)
    currRecordIndex.value =19}})// 前进functionforward(){if(currRecordIndex.value < records.value.length -1){
    currRecordIndex.value++const record = records.value[currRecordIndex.value]if(record.type ==='user'){showUserView(record.no,false)}else{showOrderView(record.no,false)}}}// 后退functionback(){if(currRecordIndex.value >0){
    currRecordIndex.value--const record = records.value[currRecordIndex.value]if(record.type ==='user'){showUserView(record.no,false)}else{showOrderView(record.no,false)}}}// 添加记录functionaddRecord(type, no){// 如果新记录与当前记录相同, 则不添加if(currRecordIndex.value >-1&& records.value[currRecordIndex.value].type === type && records.value[currRecordIndex.value].no === no){return}// 如果新纪录与前一条记录相同, 则前进一步if(currRecordIndex.value >0&& records.value[currRecordIndex.value -1].type === type && records.value[currRecordIndex.value -1].no === no){forward()return}// 如果新纪录与后一条记录相同, 则后退一步if(currRecordIndex.value < records.value.length -1&& records.value[currRecordIndex.value +1].type === type && records.value[currRecordIndex.value +1].no === no){back()return}
  currRecordIndex.value++
  records.value.splice(currRecordIndex.value, records.value.length - currRecordIndex.value,{ type, no })}</script><template><OrderViewCompv-show="activeView === 'order'"ref="orderViewEl"/><UserViewCompv-show="activeView === 'user'"ref="userViewEl"/></template>

3. vue组件

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

小结

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

当然,它的问题在于可能会直接拷贝别人的代码过来,涉及到侵权问题,个人开发无需在意。
它提供的建议仍然不能直接运用到生产,需要自行采纳、完善,毕竟,它只是个助手

三、Bito - GPT-4 and ChatGPT to write code, explain code, create tests

VSCode插件: Bito AI – Be a 100x dev and save an hour a day!

功能强大!相比第一种浏览器插件,提供了更方便的使用方式(IDE内),提供多种代码功能、快捷菜单。出来不久,目前免费使用

越来越多人知道并开始使用了,现在响应很慢 ಥ_ಥ
不过,还有非常多的同类应用


以下是从上面链接中关于它的介绍

What does Bito AI do?

Bito helps developers dramatically accelerate their impact by bringing GPT-4 and ChatGPT to your IDE and CLI. We use OpenAI’s models, and you don’t have to have an OpenAI key. Bito can save you an hour a day!. Bito AI makes it easy to write code, understand syntax, write test cases, explain code, comment code, check security, and even explain high level concepts.

机翻
Bito AI是做什么的?
BITO通过将GPT-4和CHATGPT带入您的IDE和CLI来帮助开发人员极大地加速其影响。我们使用OpenAi的型号,您不必拥有OpenAI钥匙。Bito每天可以节省一个小时!BITO AI使编写代码,了解语法,编写测试用例,解释代码,评论代码,检查安全性甚至解释高级概念变得容易。

What does Bito’s AI Assistant help with? Ask any technical question

  • Generate Code: Examples: “code in java to convert a number from one base to another”, “code to implement a simple REST API in GO”
  • Command Syntax: “how to set git config variables”, “create an encrypted s3 bucket using the AWS cli”
  • Test Cases: “Generate test cases for this code < insert code >"
  • Explain concepts: “explain B+ trees, give an example with code”, “explain banker’s algorithm”

And One click Shortcuts so you don’t have to type anything for:

  • Explain code: explain code you are unfamiliar with
  • Comment Method: comments methods and within methods
  • Improve Performance: easily find performance issues
  • Check Security: make sure you don’t have security vulnerabilities
  • This tool is far from perfect. Compile and verify before using! 😊

机翻
Bito的AI助手有什么帮助?问任何技术问题

  • 生成代码:示例:“ Java中的代码将一个数字从一个基础转换为另一个基础”,“在GO中实现简单的REST API的代码”
  • 命令语法:“如何设置git config变量”,“使用AWS CLI创建加密的S3存储桶”
  • 测试用例:“生成此代码的测试用例<插入代码>”
  • 解释概念:“解释b+树,以代码为例”,“解释银行家的算法”

单击快捷方式,因此您不必输入任何内容:

  • 解释代码:解释您不熟悉的代码
  • 评论方法:评论方法和方法中
  • 提高性能:轻松找到绩效问题
  • 检查安全性:确保您没有安全漏洞
  • 该工具远非完美。使用之前进行编译和验证!

Bito provides many additional capabilities no other tool provides:

  • Automatically compare any new code generated by Bito in diff view against your existing code. This allows you to integrate only the lines or sections you want easily.
  • Ask follow-up questions to refine the output, and the AI assistant considers the chat history for context. This helps you to get more accurate and relevant results.
  • Get lightning-fast results within seconds, allowing you to access the information you need with minimal delay.
  • Save your frequently used prompts as custom shortcuts and execute them with ease.
  • Use Keyboard shortcuts to execute the commands in Bito. Read more about keyboard shortcuts on our “What’s new” page.
  • Share the results with your colleagues on Slack, email, or Twitter, making collaboration easier.

机翻
BITO提供了许多其他工具提供的其他功能:

  • 自动将BITO在DIFF视图中生成的任何新代码与现有代码进行比较。这使您只能集成您想要的行或部分。
  • 提出后续问题以完善输出,而AI助手认为聊天历史记录上下文。这可以帮助您获得更准确和相关的结果。
  • 在几秒钟内获取闪电般的结果,使您可以以最小的延迟访问所需的信息。
  • 将您经常使用的提示作为自定义快捷方式保存,并轻松执行。
  • 使用键盘快捷键在BITO中执行命令。在我们的“新事物”页面上阅读有关键盘快捷键的更多信息。
  • 通过Slack,Email或Twitter与您的同事分享结果,使协作更加容易。

四、Claude

Slack中选择添加应用即可,然后直接和它对话,免费且无限制

Slack可以网页浏览,可以下载APP到PC及手机,使用很方便

Slack可以使用Goole账号注册,苹果手机注册登陆甚至无需科学上网

日常使用无需科学上网

Claude已经不让用了(科学上网可用),可以添加其它的基于gpt的slack应用

标签: chatgpt copilot 前端

本文转载自: https://blog.csdn.net/ymzhaobth/article/details/130119363
版权归原作者 ymzhaoUSTB 所有, 如有侵权,请联系我们删除。

“分享:前端开发使用基于 ChatGPT 的各类 AI Copilot 辅助开发”的评论:

还没有评论