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

前言

现在谁还没用过AI辅助编程工具,通没通网不确定,但一定不是搞开发的。
网上各种当生意一样教直接使用的,但是这种方式是不合规的,这里不推荐。为了不再被封,本文会避免使用无关的关键词。

虽然因为种种原因,无法直接使用。但现如今,已经有的很多合规方式可以让我们稳定使用了。主要就是使用第三方应用/工具/插件,光明正大、间接使用。

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

另外,国产竞品例如文心一言、讯飞星火等也在快速跟进中,可以期待一下

一、免费浏览器插件

插件

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

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

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

上面两个插件都提供常见“话术”,并支持自定义及保存。
最关键的是它们很稳定,很多完全免费的,要么后期收费要么人多就卡起来了。

二、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结对编程助手
在这里插入图片描述

测试代码

<script setup>
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视图
function showUserView(no, record = true) {userViewEl.value.showView(no)activeView.value = 'user'record && addRecord('user', no)
}
// 切换到order视图
function showOrderView(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}
})// 前进
function forward() {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)}}
}
// 后退
function back() {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)}}
}
// 添加记录
function addRecord(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><OrderViewComp v-show="activeView === 'order'" ref="orderViewEl" /><UserViewComp v-show="activeView === 'user'" ref="userViewEl" />
</template>

3. vue组件

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

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

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

codeium

毕竟 github copilot 是收费的,过了免费体验期,就要付费了,十刀每月还是挺贵的。这里推荐一个免费的替代品,它不光包含前者的功能,还可以进行对话,提供代码重构、解释、注释生成等快捷功能。codeium

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

三、Claude

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

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

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

日常使用无需科学上网

Claude已经不让用了(科学上网可用),可以使用关键词搜索并添加其它的同类应用

四、其它

Bito

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

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

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


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

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

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

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


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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/3883.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入浅出解析ChatGPT引领的科技浪潮【AI行研商业价值分析】

Rocky Ding 写在前面 【AI行研&商业价值分析】栏目专注于分享AI行业中最新热点/风口的思考与判断。也欢迎大家提出宝贵的意见或优化ideas&#xff0c;一起交流学习&#x1f4aa; 大家好&#xff0c;我是Rocky。 2022年底&#xff0c;ChatGPT横空出世&#xff0c;火爆全网&…

ChatGPT重量级竞品Claude2对外发布使用

美国时间7月11日&#xff0c;Anthroic公司对外发布了 Claude 2&#xff0c;新版本在安全性、性能、使用体验方面都有了极大的提升&#xff0c;今天我带你就 Claude 2 进行开箱体验。Claude 的能力与 ChatGPT 一直处于你追我赶的胶着状态&#xff0c;此次公开发布&#xff0c;对…

亚马逊联手AI初创公司开发ChatGPT竞品;百度公布2022年财报;高通推出付费云软件服务丨每日大事件...

‍ ‍数据智能产业创新服务媒体 ——聚焦数智 改变商业 企业动态 百度2022年营收为1237亿元 2月22日&#xff0c;百度发布2022年第四季度财报和2022年全年财报。财报显示&#xff0c;百度四季度实现营收330.77亿元&#xff0c;归属百度的净利润&#xff08;非美国通用会计准则…

赶时间发布 ChatGPT 竞品后,Google 遭员工反讽:太仓促、拙劣、非 Google Style

整理 | 屠敏 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 如果说微软在 Bing 搜索引擎、Edge 浏览器中引入 ChatGPT&#xff0c;打响了新时代「搜索引擎」之战的第一枪&#xff0c;那么 Google 在更早一天发布的 AI 对话式聊天机器人 Bard 便是加快这枪响的导火…

微信文章底部增加淘宝入口;Google 推出 ChatGPT 竞品 Bard;苹果或推出无接口设计iPhone|极客头条...

「极客头条」—— 技术人员的新闻圈&#xff01; CSDN 的读者朋友们早上好哇&#xff0c;「极客头条」来啦&#xff0c;快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 梦依丹 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 一分钟速览新闻点&#…

ChatGPT - 使用chatgpt + mindshow 快速生成PPT

文章目录 PromptStep 1Step2Step3 Prompt Step 1 请使用markdown格式生成一份《系统架构师修炼笔记》的PPT… … … Step2 请把以上内容转换成markdown的Code内容如下&#xff1a; # 系统架构师修炼笔记## 1. 概述系统架构师是负责设计和构建复杂系统架构的专业人员。他们…

利用ChatGPT快速制作PPT

目录 前言 一、ChatGPT是什么&#xff1f; 二、操作步骤 1.通过ChatGPT生成大纲 2.将word导入到ChatPPT中即可快速生成PPT 3.结果展示 总结 前言 目前制作PPT成为许多大学生、以及职场汇报的一个必要技能&#xff0c;大多数人都会选择套用模板&#xff0c;但是我们想一想…

OpenAI ChatGPT走红,DeepMind不甘示弱,推出剧本写作AI,一句话生成一个剧本

来源&#xff1a;机器学习研究组订阅 Dramatron似乎在一定程度上克服了AI大模型写长剧本前后不连贯的问题。 你是否有过这种体验&#xff1a;某一天逛街的时候&#xff0c;脑子里突然冒出来一个好玩的故事&#xff0c;但你一时想不到更多的细节&#xff0c;也没有一块完整的时间…

宅男福利来了,调教的ChatGPT虚拟女友,你喜欢吗

废话不多说&#xff0c;专门为男同胞准备的宅男福利&#xff1b;已经调教好的ChatGPT虚拟好友&#xff0c;直接可以看看效果&#xff1b;你们以后也可以直接自己调教&#xff0c;打造一个自己专属的虚拟女友&#xff1b; 说下步骤&#xff1a; 1、打开ChatGPT4&#xff1b; …

基于Unity集成ChatGPT虚拟角色智能化

本文转载自 Unity 中文社区季度博主 AnimeKing&#xff0c;阅读博主分享的更多 Unity 学习心得、技术干货&#xff0c;请访问 AnimeKing 在 Unity 中文社区的个人主页&#xff1a; https://developer.unity.cn/u/animeking-1 我们都知道&#xff0c;随着人工智能的蓬勃发展&am…

在unity中如何使用chatGPT让虚拟IP动起来

1、导入chatGpt 解决AI智能回答 请根据上一篇文章进行导入&#xff1a;如何使用ChatGPT在unity中进行低代码快速开发&#xff1f;_向视科技&#xff0c;让您看见未来&#xff08;nbhctec&#xff09;的博客-CSDN博客 2、文本也有转换工具 可导入unity 插件-RT-Voice PRO 2.…

ChatGPT 最强竞争对手 Claude 2 推出公开 Beta 版,我们上手实测了一把!

整理 | 屠敏 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 叮叮叮&#xff0c;又一款聊天机器人——Claude 2 来了&#xff0c;它可以编写代码、分析文本和撰写文章&#xff0c;当然也支持中文&#xff01; 其实&#xff0c;Claude 2 的聊天机器和 OpenAI 也颇有…

玩转ChatGPT:Show Me插件尝鲜

一、写在前面 之前&#xff0c;不少人问我GPT能否画技术路线图&#xff0c;然后看到了这个插件&#xff1a;Show Me&#xff1a; 简单问GPT这个插件的使用方法&#xff1a; 二、尝鲜过程 &#xff08;1&#xff09;用TA提供的例子试一试&#xff1a; 咒语&#xff1a;请用图…

【ChatGPT实战】9.使用ChatGPT-+-Midjourney-帮忙做了个App

在当今数字化的时代&#xff0c;手机App已经成为人们生活的重要组成部分。开发一个优秀的手机App需要付出大量的时间和精力&#xff0c;特别是在设计和开发阶段。但是现在我们可以借助工具和技术来协助自己简化这个过程。 在这篇教程中&#xff0c;我将介绍如何使用ChatGPT和M…

Unity接入ChatGPT基于Python.Runtime的实现

目录 前言 编译Python.Runtime.dll Unity接入ChatGPT 1.第一步 准备环境 2.第二步 python代码的书写 3.第三步 C#调用python代码 前言&#xff1a; 相信各位游戏人都用过ChatGPT吧&#xff0c;那么怎么在unity里接入ChatGPT呢&#xff1f;本文章会通过一种极其简单的方式…

2023全新ChatGPT网页程序源码V4.2版本+支持用户付费套餐/有后台模块

正文: 4.2版本来了&#xff0c;优化新增了不少东西&#xff0c;安装简单 安装教程: 搭建宝塔 解析域名 上传程序至根目录 配置数据库信息:lib/config.php 导入数据库 PHP选择:7.3 访问网页即可&#xff01; 配置APIKEY&#xff0c;登录网站后台自定义配置&#xff0c…

基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例

uni-chatgpt 一款uniappvite4uview-plus多端ChatGPT模板实例。 全新首发的一款多端仿制chatgpt智能对话实战项目&#xff0c;基于uniAppVue3PiniauViewUIMarkdownIt等技术开发搭建项目。支持编译到h5小程序APP端&#xff0c;支持markdown语法解析及代码高亮。 功能特点 全屏沉…

论文查重平台对比

备注 普通本科、计算机专业软件开发论文学校要求维普查重论文包括文字、数据文字&#xff08;不是图片&#xff09;、图片、表、代码Word显示字数1.42W&#xff0c;实际字符数&#xff08;计空格&#xff09;为2.66W论文内容包括&#xff1a;摘要、绪论、系统需求分析、系统总…

什么查重软件比较好用?

原创性论文不仅是新的阐释空间&#xff0c;也是新理论的生长空间。 由于创新要素的聚集&#xff0c;必然会产生一系列原创性成果&#xff0c;成为新思想、新知识、新技术、新产品和新模式的发源地。但是&#xff0c;在保持研究热度的同时&#xff0c;我们必须追求实质性的理论…

使用ChatGPT写代码写论文教程小白免费使用教程

使用教程请看https://blog.csdn.net/qq_38735017/article/details/128874172?spm1001.2014.3001.5501