如果您厭倦了繁瑣和重復的編碼任務并希望優化您的效率，那么您來對地方了。借助 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