我是如何使用ChatGPT和CoPilot作為編碼助手的

來源：CSDN博客 | 2023-07-27 17:17:25 |

這篇文章主要討論了如何使用AI（特別是ChatGPT和Github Copilot）來提高編碼速度和效率。文章中提到了AI在編寫功能性代碼、自動完成代碼、解決問題和澄清代碼等方面的應用。作者分享了他在工作中使用這些工具的一些實際案例，包括生成 CSS、編寫函數(shù)、重復模式的代碼、編寫 ReactJS 組件等。同時，文章也指出了 AI 輔助編碼的一些限制和挑戰(zhàn)。

原文鏈接：https://notes.drdroid.io/how-i-use-ai-for-code-assistance

(資料圖片)

未經(jīng)允許，禁止轉(zhuǎn)載！

作者 | Dipesh Mittal ? ? ?譯者?| 明明如月

責編 | 夏萌

出品 | CSDN（ID：CSDNnews）

我已經(jīng)探索過一些在編寫高質(zhì)量、功能性代碼方面的 AI 實踐應用，它們能在你編程時提供諸多便利。我一直在工作中使用 ChatGPT 網(wǎng)頁工具和 Copilot（我們可以將 Copilot 視為 GPT 的一個變體，因為它們都基于同一核心技術(shù)構(gòu)建）。

核心概括

GitHub Copilot：用于提升代碼自動完成的速度，可以將其視作一個為初級軟件工程師的職位面試做了充分準備的應聘者，你可以把需要編寫的代碼任務(wù)交給它處理。

我欣賞的特性：

它提供了 VSCode、IntelliJ、Sublime 插件

它能夠很好地預測我想編寫什么，盡管并非完美無瑕，但已經(jīng)可以幫助我快速編寫了一些常見的代碼片段

ChatGPT：獲取解決問題的端對端指令集，或者編寫覆蓋多個類和函數(shù)的完整用例的代碼。此外，它還會解釋生成的代碼，這是 Copilot 在自動完成時所無法提供的。

接下來，我將介紹在編程時運用 AI 的六種方法：

CSS 生成 (Github Copilot)

在構(gòu)建 Dr Droid 的過程中，我設(shè)定了一個自行編寫 ?reactjs 應用并創(chuàng)建新的組件的目標。盡管我們使用 Figma 制作了原型，但是要將其嵌入到頁面設(shè)計中，依然需要一些技巧。我主要從事后端開發(fā)，因此編寫 CSS 來處理網(wǎng)格、移動適配性和間距對我來說有些困難。我創(chuàng)建了一個包含 HTML 元素的類，并在提示中描述了我們 Figma 原型中的元素。Copilot 為這個類添加了 CSS，它基于一些實際測量做出了預測，我稍后可以對其進行調(diào)整，但它已經(jīng)解決了我在選擇使用哪些 CSS 樣式上的疑惑。

輸入：

輸出：

.parentDiv { flex-direction: "inherit"; display: "flow-root"; padding: "2px";}.leftDiv { width: "30%"; height: "100%"; background: "white"; float: "left"; border: "1px solid black"; text-align: "left";}.rightDiv { width: "70%"; height: "100%"; background: "white"; float: "right"; border: "1px solid black"; text-align: "right";}

利用 Copilot 編寫函數(shù)：專注于排序和數(shù)據(jù)操作

在 Dr Droid 平臺上，我們需要進行大量的數(shù)據(jù)轉(zhuǎn)換來實現(xiàn)各種功能。根據(jù)測試，Copilot 在基于提示編寫這些轉(zhuǎn)換函數(shù)時表現(xiàn)出很強的實力。它也很擅長參考老字段描述新字段，編寫將兩個數(shù)據(jù)對象合并為一個具有不同模式的單一對象的函數(shù)。

比如，我需要一個函數(shù)來在數(shù)組中合并 JSON 對象，基于它們的兩個字符串鍵，給出第三個數(shù)字鍵的不同統(tǒng)計。Copilot 能在你的代碼環(huán)境中進行編寫，無需重命名變量，而且你可以告訴它用哪個庫來執(zhí)行。

輸入：

輸出：

Co-pilot 的代碼編寫：識別并運用重復模式

我正在為測試環(huán)境編寫一個跨多個數(shù)據(jù)庫表進行操作的數(shù)據(jù)刪除腳本。這些表都有時間戳列，但名稱各不相同。我在注釋中以逗號分隔的方式列出了所有的表名，然后編寫了第一張表的刪除 SQL 查詢，以及整個刪除命令的連接光標使用。完成這些后，Co-pilot 開始自動建議為這些表中的每一個迭代選擇代碼塊，同時還根據(jù)其中的時間戳列的名稱修改它們的列名。然而，它無法理解那個刪除可能的順序，它只按照模型文件中書寫的順序進行。

我在 IntelliJ 和 Sublime Text 中使用了 Co-pilot 插件。我發(fā)現(xiàn) IntelliJ 插件在推薦上更具智能，尤其是在處理其他文件中的類定義的上下文時。

通過描述需求使用 ChatGPT 生成整個 React.js 組件，只需進行少量變量調(diào)整

我在使用名為 react-flow 的 React.js 庫時，想要定制部分組件替換庫中的原有部分。我的目標是為其添加個性化的視覺效果，以及在組件頂部增添一些附加的文字。盡管文檔詳細地介紹了如何用新組件替換原有組件，但并沒有明確地提到如何在保留原功能的情況下進行擴展。

于是，我向 ChatGPT 提出了問題：

以下是我收到的答復：

import React from "react";const CustomEdge = ({ id, sourceX, sourceY, targetX, targetY, style = {} }) => { const edgePath = `M ${sourceX},${sourceY} L ${targetX},${targetY}`; // 計算箭頭的角度 const angle = Math.atan2(targetY - sourceY, targetX - sourceX); const arrowLength = 10;// 箭頭的長度// 計算箭頭頭部的點 const arrowPoints = [ [targetX - arrowLength * Math.cos(angle - Math.PI / 6), targetY - arrowLength * Math.sin(angle - Math.PI / 6)], [targetX, targetY], [targetX - arrowLength * Math.cos(angle + Math.PI / 6), targetY - arrowLength * Math.sin(angle + Math.PI / 6)], ]; return ( <> p.join(",")).join(" ")} fill="violet" stroke="violet" strokeWidth="1" /> );};export default CustomEdge;// 在你的 React Flow 圖中使用自定義邊緣組件import ReactFlow from "react-flow-renderer";import CustomEdge from "./CustomEdge";const elements = [// ... 你的節(jié)點和邊];const App = () => { return (

);};export default App;

對于這段代碼，我只需要對選定的 CSS 樣式進行一些微調(diào)。這段代碼幫我節(jié)省了大約 30 分鐘的編碼時間，并且代碼也能順利運行。

向 ChatGPT 請求代碼片段，若運行未能成功，反饋錯誤信息，ChatGPT 將根據(jù)反饋進行修正直至問題解決

ChatGPT 擅長根據(jù)詳盡的反饋來優(yōu)化其答案。然而，反饋不只是請求再次生成或?qū)ふ腋玫慕鉀Q方案，你也可以在反饋中提供上下文信息。例如，我想在 react-flow 圖中實現(xiàn)節(jié)點的自動布局，我發(fā)現(xiàn)有一個叫做 cola 的布局能夠?qū)崿F(xiàn)這個目標。由于在網(wǎng)絡(luò)上難以找到具體實現(xiàn)的示例，我向 ChatGPT 提問：

輸出：

import React from "react";import ReactFlow, { ReactFlowProvider, addEdge, removeElements, Controls } from "react-flow-renderer";import { ColaLayout } from "react-flow-renderer/dist/layoutCola";const MyFlowComponent = () => { const initialElements = [ { id: "1", type: "input", data: { label: "Input Node" }, position: { x: 0, y: 0 } }, { id: "2", data: { label: "Node 2" }, position: { x: 200, y: 50 } }, { id: "3", data: { label: "Node 3" }, position: { x: 400, y: 100 } }, { id: "e1-2", source: "1", target: "2" }, { id: "e2-3", source: "2", target: "3" }, ]; const onLoad = (reactFlowInstance) => { reactFlowInstance.fitView(); // 使圖形適應視口 }; const layout = { type: "cola", edgeLength: 180, animate: true, randomize: false, maxSimulationTime: 1500, }; return (

);};export default MyFlowComponent;// 使用 npm 安裝 cola:npm install react-flow react-flow-renderer

然而，即便我按照提示進行了安裝，代碼仍然無法運行，出現(xiàn)了一個錯誤。

于是，我再次向 ChatGPT 提問：

輸出：

然后，ChatGPT 提供了替代的代碼塊，并且推薦我安裝一個新的庫：

# 使用 npmnpm install react-flow react-flow-renderer react-flow-dagre

但這次安裝過程中出現(xiàn)了錯誤：

現(xiàn)在，ChatGPT 已經(jīng)明白我的需求，即使我沒主動提問，它也開始提出其他建議，指導我實現(xiàn)節(jié)點布局的初衷。最后，盡管并未使用 cola 布局，我還是達成了我的目標，我的問題得到了解決。

近期，我打算在 Kafka 集群和 OpenSearch 服務(wù)之間建立消息連接。雖然 Kafka 提供了相應的連接器，但我對這方面的知識了解不夠。我在網(wǎng)上尋找了一些配置示例，盡管我找到了詳細的配置 Kafka 連接到 S3 桶的示例，但我并未找到使用 OpenSearch 作為數(shù)據(jù)接收端的示例。于是，我詢問了 ChatGPT 該如何操作，它提供了一套完整的指導步驟來幫助我完成這個操作。我在網(wǎng)上搜索了這個答案，想要弄清楚它是 ChatGPT 自我生成的，還是基于其他示例推導的，但結(jié)果發(fā)現(xiàn)并無類似的文章。

局限性與挑戰(zhàn)

盡管 AI 編程輔助工具極大地提高了編程效率，但我們也必須清醒地認識到，它并非完美無缺。我們不能完全依賴它生成的代碼，而應該逐步檢查和測試它的輸出結(jié)果。

我在使用過程中，也發(fā)現(xiàn)了一些局限性：

有時，Copilot 會生成一些在當前代碼上下文中不存在的變量。這可能是因為雖然編碼過程中考慮到了變量命名的邏輯性，但并不能保證代碼的正確運行。

當向 ChatGPT 查詢某些工具或技術(shù)的操作指南時，可能由于其訓練數(shù)據(jù)庫的時效性問題，輸出的結(jié)果有時會顯得過時。有些工具可能已經(jīng)進行了更新，界面也發(fā)生了改變，與 ChatGPT 提供的結(jié)果不一致。我在使用 AWS 的一些服務(wù)時就遇到過這樣的情況。

你是否已經(jīng)在工作中用 ?AI 來輔助編程？你有什么看法和經(jīng)驗？

推薦閱讀：

?微信：有零錢的微信號不會被系統(tǒng)注銷；拼多多旗下 Temu 在美起訴 Shein；Rust 1.71.0 發(fā)布|極客頭條

?谷歌、亞馬遜、Meta等多家科技公司被爆員工「假工作」，裁員成最終歸宿！

?Stability AI 把繪畫門檻打為 0！

關(guān)鍵詞：

我是如何使用ChatGPT和CoPilot作為編碼助手的