前言
不會(huì)現(xiàn)在還有哪位碼農(nóng)沒用過AI輔助編程工具吧？
網(wǎng)上各種當(dāng)生意一樣教直接使用的，但是這種方式是不合規(guī)的，這里不推薦。為了不再被封，本文會(huì)避免使用無關(guān)的關(guān)鍵詞。
雖然因?yàn)榉N種原因，無法直接使用。但現(xiàn)如今，已經(jīng)有的很多合規(guī)方式可以讓我們穩(wěn)定使用了。主要就是使用第三方應(yīng)用/工具/插件，光明正大、間接使用。另外，國產(chǎn)大模型例如文心一言、訊飛星火等也都可以去體驗(yàn)下
注意：基于個(gè)人使用經(jīng)驗(yàn)以及開發(fā)習(xí)慣，AI對(duì)話是個(gè)很不錯(cuò)的“工具人”，它的水平很大程度上不取決于它自身，而取決于你的水平、你描述問題的清晰與準(zhǔn)確程度。雖然它可以非常強(qiáng)大，但不要過分沉迷于它。嘗試獲取某個(gè)問題的解決方案時(shí)，查閱權(quán)威的技術(shù)文檔等常規(guī)措施也是必不可少的。
實(shí)踐表明，AI真的只是AI，聊天時(shí)，你的心態(tài)不能是讓它給你把活干了，應(yīng)該是給你出謀劃策、demo演示，對(duì)錯(cuò)仍需自行分辨。經(jīng)歷過語法錯(cuò)誤、方法過時(shí)、自造語法等等…
更新下文檔吧，根據(jù)專業(yè)性、使用體驗(yàn)調(diào)整下優(yōu)先級(jí)
一、Copilot
編程助手，真正意義上的助手。在你擅長(zhǎng)的領(lǐng)域，它可能顯得馬虎，總犯小錯(cuò)，甚至經(jīng)常一本正經(jīng)得胡說八道。但在網(wǎng)上一搜全是復(fù)制粘貼的情況下、或者處于你的知識(shí)盲區(qū)時(shí)，你完全可以把它供起來，虔誠得請(qǐng)求(精準(zhǔn)描述)它給你指路(解決方案)
GitHub Copilot
GitHub Copilot - 維基百科
GitHub Copilot
GitHub Copilot VSCode插件 - Your AI pair programmer
相對(duì)于什么都可以問的AI對(duì)話，GitHub Copilot 的定位就是“結(jié)對(duì)編程助手”，具體介紹、使用方法參照官方介紹。它可以在 JetBrains IDEs (Beta)，Neovim，Visual Studio，Visual Studio Code中安裝拓展使用。
使用方式非常絲滑~
可免費(fèi)使用60天，訂閱價(jià)十刀/月起，百刀/年起。
缺點(diǎn)在此，收費(fèi)，貴！不過不用擔(dān)心，它有免費(fèi)平替款，往后看。
示例
GitHub Copilot是個(gè)人用的最多的，它的使用方式使它能最大程度的參與日常開發(fā)中。沒使用過的可以看看效果，看看助手能干什么
1. js方法
2. vue單文件組件
開發(fā)一個(gè)有一定復(fù)雜度，包含一系列邏輯的組件，在這個(gè)過程中，copilot 能真正體現(xiàn)什么叫AI結(jié)對(duì)編程助手
測(cè)試代碼
<script setup>
import { ref, provide } from 'vue'
import UserViewComp from './UserView/index.vue'
import OrderViewComp from './OrderView/index.vue'
// 當(dāng)前顯示的視圖 [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指向當(dāng)前記錄, 可前進(jìn)后退
* 當(dāng)有新記錄時(shí), currentRecordIndex+1, 后面的記錄將被清空
*
* @prop {string} type 記錄類型 [user|order]
* @prop {string} no 記錄編號(hào)
*/
const records = ref([])
// 當(dāng)前記錄索引
const currRecordIndex = ref(-1)
const forwardDisabled = computed(() => currRecordIndex.value >= records.value.length - 1)
const backDisabled = computed(() => currRecordIndex.value <= 0)
// 監(jiān)聽records, 當(dāng)長(zhǎng)度超過20時(shí), 刪除前面的記錄
watch(records, (newVal) => {
if (newVal.length > 20) {
records.value.splice(0, newVal.length - 20)
currRecordIndex.value = 19
}
})
// 前進(jìn)
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) {
// 如果新記錄與當(dāng)前記錄相同, 則不添加
if (currRecordIndex.value > -1 && records.value[currRecordIndex.value].type === type && records.value[currRecordIndex.value].no === no) {
return
}
// 如果新紀(jì)錄與前一條記錄相同, 則前進(jìn)一步
if (currRecordIndex.value > 0 && records.value[currRecordIndex.value - 1].type === type && records.value[currRecordIndex.value - 1].no === no) {
forward()
return
}
// 如果新紀(jì)錄與后一條記錄相同, 則后退一步
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，它可以參與到前端開發(fā)最基本的 html/js/css 內(nèi)，提供全方位協(xié)助
再說一遍，使用絲滑~
誰用誰知道
當(dāng)然，它的問題在于可能會(huì)直接拷貝別人的代碼過來，涉及到侵權(quán)問題，介意勿用。
它提供的建議仍然不能直接運(yùn)用到生產(chǎn)，需要自行采納、完善，畢竟，它只是個(gè)助手
codeium
畢竟 github copilot 是收費(fèi)的，過了免費(fèi)體驗(yàn)期，就要付費(fèi)了，十刀每月還是挺貴的。這里推薦一個(gè)免費(fèi)的替代品，它不光包含前者的功能，還可以進(jìn)行對(duì)話，提供代碼重構(gòu)、解釋、注釋生成等快捷功能。codeium
二、國產(chǎn)
訊飛星火
訊飛星火：國產(chǎn)認(rèn)知大模型，根據(jù)個(gè)人使用經(jīng)驗(yàn)，感覺技術(shù)方案上比codeium差點(diǎn)，但也不錯(cuò)了。另外，它的優(yōu)點(diǎn)在于功能很全面，可用于各方各面。此前需要申請(qǐng)，隔天便可通過。現(xiàn)在注冊(cè)即可使用
還有很多其它國產(chǎn)大模型，但沒使用過，就不寫了。
三、最新發(fā)現(xiàn)
Code Llama
Code Llama: 網(wǎng)頁免費(fèi)使用，專為代碼服務(wù)。簡(jiǎn)單體驗(yàn)了下，好像只會(huì)用英文回答，但專業(yè)性上確實(shí)不錯(cuò)。
四、免費(fèi)瀏覽器插件
插件
Chrome插件：Chrome應(yīng)用 內(nèi)搜索 Monica、Sider
微軟插件：Edge 外接程序 搜索 Sider
可分別在Edge Chrome瀏覽器上安裝使用，免費(fèi)版每天30個(gè)問題。省著點(diǎn)，夠用了。深度使用或者不差錢的可以花錢升套餐，價(jià)格十刀/月起，百刀/年起
上面兩個(gè)插件都提供常見“話術(shù)”，并支持自定義及保存。
最關(guān)鍵的是它們很穩(wěn)定，很多完全免費(fèi)的，要么后期收費(fèi)要么人多就卡起來了。
五、其它
Claude
Slack中選擇添加應(yīng)用即可，然后直接和它對(duì)話，免費(fèi)且無限制
Slack可以網(wǎng)頁瀏覽，可以下載APP到PC及手機(jī)，使用很方便
Slack可以使用Goole賬號(hào)注冊(cè)，蘋果手機(jī)注冊(cè)登陸甚至無需科學(xué)上網(wǎng)
日常使用無需科學(xué)上網(wǎng)
Claude已經(jīng)不讓用了（科學(xué)上網(wǎng)可用），可以使用關(guān)鍵詞搜索并添加其它的同類應(yīng)用
Bito
VSCode插件: Bito AI – Be a 100x dev and save an hour a day!
功能強(qiáng)大！相比瀏覽器插件，提供了更方便的使用方式(IDE內(nèi))，類似于codeium，提供多種代碼功能、快捷菜單。
越來越多人知道并開始使用了，現(xiàn)在響應(yīng)很慢 ?_?
不過，還有非常多的同類應(yīng)用
以下是從上面鏈接中機(jī)翻的關(guān)于它的介紹
Bito AI是做什么的?
BITO通過將AI算法帶入您的IDE和CLI來幫助開發(fā)人員極大地加速其影響。Bito每天可以節(jié)省一個(gè)小時(shí)！BITO AI使編寫代碼，了解語法，編寫測(cè)試用例，解釋代碼，評(píng)論代碼，檢查安全性甚至解釋高級(jí)概念變得容易。
Bito的AI助手有什么幫助？問任何技術(shù)問題
- 生成代碼：示例：“ Java中的代碼將一個(gè)數(shù)字從一個(gè)基礎(chǔ)轉(zhuǎn)換為另一個(gè)基礎(chǔ)”，“在GO中實(shí)現(xiàn)簡(jiǎn)單的REST API的代碼”
- 命令語法：“如何設(shè)置git config變量”，“使用AWS CLI創(chuàng)建加密的S3存儲(chǔ)桶”
- 測(cè)試用例：“生成此代碼的測(cè)試用例<插入代碼>”
- 解釋概念：“解釋b+樹，以代碼為例”，“解釋銀行家的算法”
單擊快捷方式，因此您不必輸入任何內(nèi)容：文章來源：http://www.zghlxwxcb.cn/news/detail-470214.html
- 解釋代碼：解釋您不熟悉的代碼
- 評(píng)論方法：評(píng)論方法和方法中
- 提高性能：輕松找到績(jī)效問題
- 檢查安全性：確保您沒有安全漏洞
- 該工具遠(yuǎn)非完美。使用之前進(jìn)行編譯和驗(yàn)證！
BITO提供了許多其他工具提供的其他功能:文章來源地址http://www.zghlxwxcb.cn/news/detail-470214.html
- 自動(dòng)將BITO在DIFF視圖中生成的任何新代碼與現(xiàn)有代碼進(jìn)行比較。這使您只能集成您想要的行或部分。
- 提出后續(xù)問題以完善輸出，而AI助手認(rèn)為聊天歷史記錄上下文。這可以幫助您獲得更準(zhǔn)確和相關(guān)的結(jié)果。
- 在幾秒鐘內(nèi)獲取閃電般的結(jié)果，使您可以以最小的延遲訪問所需的信息。
- 將您經(jīng)常使用的提示作為自定義快捷方式保存，并輕松執(zhí)行。
- 使用鍵盤快捷鍵在BITO中執(zhí)行命令。在我們的“新事物”頁面上閱讀有關(guān)鍵盤快捷鍵的更多信息。
- 通過Slack，Email或Twitter與您的同事分享結(jié)果，使協(xié)作更加容易。
到了這里，關(guān)于分享：前端開發(fā)使用的各類 AI Copilot 輔助開發(fā)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
