如果您厭倦了繁瑣和重複的編碼任務并希望優化您的效率，那麼您來對地方了。借助 ChatGPT 的強大功能，您可以簡化工作流程、減少錯誤，甚至獲得有關改進代碼的見解。
在這篇博文中，我們将為您提供 50 多個提示和政策，幫助您使用 ChatGPT 加快 Web 開發工作流程。從作為初學者學習概念到準備面試，您将找到作為 Web 開發人員充分利用 AI 所需的一切。
但首先，了解 ChatGPT 的局限性很重要。雖然它是一個強大的工具，但 ChatGPT 不能替代您自己的知識和技能。您還應該對它為您所做的任何研究進行事實核查，因為 ChatGPT 無法驗證事實。此外，它的訓練資料隻到 2021 年，是以它可能不知道目前的趨勢或事件。考慮到這些注意事項，讓我們深入了解 AI 驅動的 Web 開發的激動人心的世界！
您可以在https://chat.openai.com/上運作所有提示
代碼生成
ChatGPT 可以為各種 Web 開發任務生成代碼，進而節省您的時間并幫助您提高效率。它可以幫助您生成語義 HTML 和 CSS 代碼、JavaScript 函數，甚至資料庫查詢。
提示：生成由[元件部分]組成的語義和可通路的 HTML 和（架構）CSS [UI 元件]。[組成部分]應該是[布局]。
示例：生成由使用者名、電子郵件、問題類型和消息組成的語義 HTML 和 Tailwind CSS“聯系支援”表單。表單元素應垂直堆疊并放置在卡片内。
提示：編寫一個 JavaScript 函數。它接受 [input] 并傳回 [output]。
示例：編寫一個 JavaScript 函數。它接受全名作為輸入并傳回頭像字母。
提示：為[功能]編寫/一個[架構] API。它應該利用[資料庫]。
示例：編寫一個 Express.js API 來擷取目前使用者的個人資料資訊。它應該使用 MongoDB。
提示：資料庫有[逗号分隔的表名]。編寫一個 [資料庫] 查詢來擷取 [需求]。
示例：資料庫有學生表和課程表。編寫 PostgreSQL 查詢以擷取至少注冊了 3 門課程的學生清單。
代碼完成
借助 AI 的強大功能，ChatGPT 還可以建議符合您的上下文和風格的代碼完成。
提示：完成代碼 [代碼片段]
示例：完成代碼：
const animals = ["dogs", "cats", "birds", "fish"];
let animal = animals[Math.floor(Math.random() * animals.length)];
switch (animal) {
case "dogs":
console.log(
"Dogs are wonderful companions that bring joy and loyalty into our lives. Their wagging tails and wet noses never fail to make us smile."
);
break;
}
通常最好以冒号結束提示并将代碼塊粘貼到新行中。用三重反引号```[code]``` 或三引号“”[code]”””分隔代碼塊也是一個不錯的選擇。
代碼轉換
作為開發人員，您可能不得不使用以不同語言或架構編寫的代碼。使用 ChatGPT，您可以輕松地将代碼片段從一種語言或架構轉換為另一種語言或架構。
提示：将下面的代碼片段從[語言/架構]轉換為[語言/架構]：[代碼片段]
示例：将以下代碼片段從 JavaScript 轉換為 TypeScript
function nonRepeatingWords(str1, str2) {
const map = new Map();
const res = [];
// Concatenate the strings
const str = str1 + " " + str2;
// Count the occurrence of each word
str.split(" ").forEach((word) => {
map.has(word) ? map.set(word, map.get(word) + 1) : map.set(word, 1);
});
// Select words which occur only once
for (let [key, val] of map) {
if (val === 1) {
res.push(key);
}
}
return res;
}
提示：使用 [CSS 架構] 将以下代碼轉換為使用 [CSS 架構]： [代碼片段]
示例：使用 Bootstrap 将以下代碼轉換為使用 Tailwind CSS：[代碼片段]
代碼解釋
ChatGPT 可以通過提供解釋或回答有關代碼的具體問題來幫助您了解代碼。這在處理其他人編寫的代碼或試圖了解複雜的代碼片段時特别有用。
提示：解釋以下[語言]代碼片段：[代碼塊]
提示：此代碼的作用：[接受來自堆棧溢出的答案代碼]
代碼審查
代碼審查是軟體開發的一個重要方面，當您獨自工作時，通常很難發現每一個潛在的問題。在 ChatGPT 的幫助下，您可以識别代碼中的代碼氣味和安全漏洞，使其更加高效和安全。
提示：檢視以下 [語言] 代碼的代碼異味并提出改進建議：[代碼塊]
提示：識别以下代碼中的任何安全漏洞：[代碼片段]
代碼重構
您是否曾經寫過//todo: refactor this code評論但從未發表過評論？ChatGPT 可以通過建議重構和改進代碼的方法來幫助減少這種情況，而無需花費太多時間或精力。
提示：重構給定的[語言]代碼以改進其錯誤處理和彈性：[代碼塊]
提示：重構給定的[語言]代碼以使其更加子產品化：[代碼塊]
提示：重構給定的[語言]代碼以提高性能：[代碼塊]
提示：重構以下元件代碼以跨移動裝置、平闆電腦和桌面螢幕響應：[代碼塊]
提示：建議變量和函數的描述性和有意義的名稱，以便更容易了解代碼中每個元素的用途：[代碼片段]
提示：建議簡化複雜條件并使它們更易于閱讀和了解的方法：[代碼片段]
錯誤檢測和修複
作為開發人員，我們知道捕獲代碼中的所有錯誤并不總是那麼容易。但是，借助 ChatGPT 提示，我們可以輕松識别并解決那些可能導緻問題的讨厭錯誤。
提示：查找以下代碼中的任何錯誤：[代碼片段]
提示：我從以下代碼片段中收到錯誤 [error]：[code snippet]。我該如何解決？
系統設計和架構
ChatGPT 可以提供關于如何使用特定技術堆棧設計系統或将設計和架構與不同技術堆棧進行對比的寶貴見解和建議。無論您是建構 Web 應用程式、移動應用程式還是分布式系統，ChatGPT 都可以幫助您設計滿足您需求的可擴充、可靠且可維護的架構。
提示：您是系統設計和架構方面的專家。告訴我如何設計一個[系統]。技術棧是[逗号分隔的技術清單]。
示例：您是系統設計和架構方面的專家。告訴我如何設計酒店預訂系統。技術棧是 Next.js 和 Firebase。
提示：将設計和架構與 [comma-separated list of technologies] 作為技術堆棧進行對比。
示例：将設計和架構與 React 和 Supabase 作為技術棧進行對比。
搜尋引擎優化
ChatGPT 可以為您提供提示和最佳實踐，以針對搜尋引擎優化您的網站。
提示：如何提高着陸頁的搜尋引擎優化？
提示：舉一個例子 <head> HTML代碼的部分，該部分針對[網站]的搜尋引擎優化（SEO）進行了優化
示例：舉一個針對運動員社交網站的搜尋引擎優化 (SEO) 優化的 HTML 代碼的 <head> 部分示例
模拟資料生成
無論是用于測試還是示範目的，擁有真實且具有代表性的資料都是至關重要的。ChatGPT 可以幫助您快速生成各種域和格式的模拟資料。
提示：為[域]生成[數字][實體]的示例[資料格式]
示例：為服裝電子商務網站生成 5 種産品的示例 JSON
提示：您還可以在每次響應後輸入提示，以進行更細粒度的控制
- 給我一個電子商務網站上 [entity] 的 [number] 字段清單
- 添加一個“id”字段，該字段對每個 [entity] 都是唯一的。将 [現有字段] 替換為 [新字段]
- 生成具有實際值的 [number] 此類 [entity] 的示例 [data format]
測試
ChatGPT 可以幫助您編寫單元測試、生成測試用例清單以及選擇合适的測試架構或庫。
提示：使用[測試架構/庫]為以下[庫/架構]元件[元件代碼]編寫單元測試
提示：生成測試用例清單以手動測試網絡/移動應用程式中的使用者注冊。
提示：我應該為 React Native 應用程式選擇哪些測試架構或庫？
文檔
無論您是在處理個人項目還是團隊項目，良好的文檔都可以節省您的時間并避免麻煩的發生。
提示：為以下代碼寫評論：[代碼片段]
提示：為以下 JavaScript 函數編寫 JSDoc 注釋：[代碼片段]
外殼指令
作為開發人員，您不僅限于編寫代碼。ChatGPT 可以使用 Git 協助執行 shell 指令和版本控制
提示：寫一個 shell 指令到 [requirement]
示例：編寫 shell 指令以删除“logs”檔案夾中所有擴充名為“.log”的檔案
提示：寫一個 git 指令到 [requirement]
示例：編寫一個 git 指令來撤消之前的送出
提示：解釋以下指令[command]
示例：解釋以下指令 [git switch -c feat/qwik-loaders]
常用表達
使用 ChatGPT，您可以了解複雜的正規表達式并生成與文本中特定模式比對的正規表達式。
提示：解釋這個正規表達式：[regex]
示例：用 JavaScript 解釋這個正規表達式：const regex = /^[A-Za-z0–9._%+-]+@[A-Za-z0–9.-]+\\.[A-Za-z]{2,}$/;
提示：您的角色是生成比對文本中特定模式的正規表達式。您應該以一種可以輕松複制并粘貼到支援正規表達式的文本編輯器或程式設計語言中的格式提供正規表達式。生成比對 [text] 的正規表達式。
内容
借助 ChatGPT，您可以根據您的特定需求為各種目的生成内容。
Prompt：生成電子商務網站的常見問題清單
提示：為課程登陸頁面生成内容。該課程是“[課程名稱]”。它至少應包括以下部分：課程内容、主要閱聽人是誰、他們将如何受益、課程部分和結構、教學方法、作者簡介和定價部分。對于定價部分，提供三個等級供使用者選擇。
履歷和求職信
制作引人注目且精美的履歷和求職信可能是一項艱巨的任務，但在 ChatGPT 的幫助下，它不必如此。ChatGPT 也将嚴格遵守任何字元或單詞限制。
提示：使用我的履歷寫一個 LinkedIn 關于部分：[履歷]。使用關鍵字 [逗号分隔的關鍵字]。以第一人稱書寫并使用友好的語氣。不要超過 2,600 個字元。
提示：我想讓你擔任求職信作者。我将向您提供我的履歷，您将生成一封求職信來補充它。我希望求職信具有更多 [形容詞] 語氣，因為我将申請一家 [公司類型] 公司。以下是我的履歷 [resume]。以下是職位描述[job description]。
提示：[你的履歷] 根據 [公司] 的這個 [職位] 職位完善我的履歷，并包括顯示影響和名額 [職位描述] 的要點成就。注意：您可以要求 ChatGPT 以 LaTex 标記生成輸出。
面試準備
在 ChatGPT 的幫助下，您可以為即将到來的工作面試做好充分準備。
提示：我因 [職位] 而接受了 [公司名稱] 的面試。幫助我回答以下問題：
- 有關公司、行業及其競争對手的資訊
- 公司文化
- 我可以在面試結束時問的問題
提示：我正在面試一個 [job title] 角色。請列出[職位]職位的 10 個最常被問到的面試問題。
示例：我正在面試進階 React 開發人員角色。請列出進階 React 開發人員職位的 10 個最常被問到的面試問題。
提示：我正在面試一個 [job title] 角色。請生成 10 個特定于下面釋出的工作角色的面試問題 [工作角色]
提示：随機問我一個簡單/中等/困難的 Leetcode 問題，并根據正确性、時間和空間複雜性評估我的解決方案。
學習
在 Web 開發中，學習永遠不會停止。無論是學習新的程式設計語言、了解最佳實踐，還是提高網站性能，ChatGPT 都能滿足您的需求。
提示：我是一名網絡開發人員，正在學習 [語言/技術]。建議關注前 5 個 [社交媒體] [帳戶/管道/個人資料]。
提示：建立登入表單時的最佳做法是什麼？
提示：解釋網絡可通路性的重要性并列出三種確定網站可通路性的方法
提示：在[語言/架構]中編寫幹淨且可維護的代碼的最佳實踐是什麼？
提示：建立具有以下要求的 [技術/架構] 部落格應用程式的步驟是什麼？
- 所有文章的清單頁面
- 您可以在其中閱讀文章的詳細資訊頁面
- 關于我的頁面
- 連結到社交媒體資料
- 高性能
提示：[語言/架構]中[相似概念清單]之間有什麼差別
示例：JavaScript 中的 var、let 和 const 關鍵字有什麼差別
提示：用現實世界的類比解釋[語言/架構] [概念]
示例：用真實世界的類比來解釋 JavaScript promises
提示：提高網站性能的不同方法有哪些？
結論
如果您是 Web 開發人員，使用 ChatGPT 可以提供提示和政策來簡化編碼任務，進而幫助優化您的工作流程并提高效率。雖然 ChatGPT 是一個強大的工具，但請務必牢記它的局限性并将其用作您的知識和技能的補充。通過事實核查研究并緊跟目前趨勢，您可以充分利用 AI 在 Web 開發中的優勢。将 ChatGPT 作為寶貴的資源，您可以自信地駕馭 Web 開發世界并提高您的技能。
作者:VISHWAS GOPINATH
出處:https://www.builder.io/blog/ai-prompts-for-web-developers-chatgpt