前言

现在谁还没听过 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结对编程助手
在这里插入图片描述

测试代码

<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 内，提供全方位协助
在这里插入图片描述

小结

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

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

三、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 的各类 AI Copilot 辅助开发

前言