如果您厭倦了繁瑣和重復(fù)的編碼任務(wù)并希望優(yōu)化您的效率，那么您來對(duì)地方了。借助 ChatGPT 的強(qiáng)大功能，您可以簡(jiǎn)化工作流程、減少錯(cuò)誤，甚至獲得有關(guān)改進(jìn)代碼的見解。

在這篇博文中，我們將為您提供 50 多個(gè)提示和策略，幫助您使用 ChatGPT 加快 Web 開發(fā)工作流程。從作為初學(xué)者學(xué)習(xí)概念到準(zhǔn)備面試，您將找到作為 Web 開發(fā)人員充分利用 AI 所需的一切。

但首先，了解 ChatGPT 的局限性很重要。雖然它是一個(gè)強(qiáng)大的工具，但 ChatGPT 不能替代您自己的知識(shí)和技能。您還應(yīng)該對(duì)它為您所做的任何研究進(jìn)行事實(shí)核查，因?yàn)?ChatGPT 無法驗(yàn)證事實(shí)。此外，它的訓(xùn)練數(shù)據(jù)只到 2021 年，因此它可能不知道當(dāng)前的趨勢(shì)或事件。考慮到這些注意事項(xiàng)，讓我們深入了解 AI 驅(qū)動(dòng)的 Web 開發(fā)的激動(dòng)人心的世界！

您可以在https://chat.openai.com/上運(yùn)行所有提示

代碼生成

ChatGPT 可以為各種 Web 開發(fā)任務(wù)生成代碼，從而節(jié)省您的時(shí)間并幫助您提高效率。它可以幫助您生成語義 html 和 css 代碼、JAVAScript 函數(shù)，甚至數(shù)據(jù)庫查詢。

提示：生成由[組件部分]組成的語義和可訪問的 HTML 和（框架）CSS [UI 組件]。[組成部分]應(yīng)該是[布局]。

示例：生成由用戶名、電子郵件、問題類型和消息組成的語義 HTML 和 Tailwind CSS“聯(lián)系支持”表單。表單元素應(yīng)垂直堆疊并放置在卡片內(nèi)。

提示：編寫一個(gè) JavaScript 函數(shù)。它接受 [input] 并返回 [output]。

示例：編寫一個(gè) JavaScript 函數(shù)。它接受全名作為輸入并返回頭像字母。

提示：為[功能]編寫/一個(gè)[框架] API。它應(yīng)該利用[數(shù)據(jù)庫]。

示例：編寫一個(gè) Express.js API 來獲取當(dāng)前用戶的個(gè)人資料信息。它應(yīng)該使用 MongoDB。

提示：數(shù)據(jù)庫有[逗號(hào)分隔的表名]。編寫一個(gè) [數(shù)據(jù)庫] 查詢來獲取 [需求]。

示例：數(shù)據(jù)庫有學(xué)生表和課程表。編寫 PostgreSQL 查詢以獲取至少注冊(cè)了 3 門課程的學(xué)生列表。

代碼完成

借助 AI 的強(qiáng)大功能，ChatGPT 還可以建議符合您的上下文和風(fēng)格的代碼完成。

提示：完成代碼 [代碼片段]

示例：完成代碼：

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;
}

通常最好以冒號(hào)結(jié)束提示并將代碼塊粘貼到新行中。用三重反引號(hào)```[code]``` 或三引號(hào)“”[code]”””分隔代碼塊也是一個(gè)不錯(cuò)的選擇。

代碼轉(zhuǎn)換

作為開發(fā)人員，您可能不得不使用以不同語言或框架編寫的代碼。使用 ChatGPT，您可以輕松地將代碼片段從一種語言或框架轉(zhuǎn)換為另一種語言或框架。

提示：將下面的代碼片段從[語言/框架]轉(zhuǎn)換為[語言/框架]：[代碼片段]

示例：將以下代碼片段從 JavaScript 轉(zhuǎn)換為 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 框架] 將以下代碼轉(zhuǎn)換為使用 [CSS 框架]： [代碼片段]

示例：使用 Bootstrap 將以下代碼轉(zhuǎn)換為使用 Tailwind CSS：[代碼片段]

代碼解釋

ChatGPT 可以通過提供解釋或回答有關(guān)代碼的具體問題來幫助您理解代碼。這在處理其他人編寫的代碼或試圖理解復(fù)雜的代碼片段時(shí)特別有用。

提示：解釋以下[語言]代碼片段：[代碼塊]

提示：此代碼的作用：[接受來自堆棧溢出的答案代碼]

代碼審查

代碼審查是軟件開發(fā)的一個(gè)重要方面，當(dāng)您獨(dú)自工作時(shí)，通常很難發(fā)現(xiàn)每一個(gè)潛在的問題。在 ChatGPT 的幫助下，您可以識(shí)別代碼中的代碼氣味和安全漏洞，使其更加高效和安全。

提示：查看以下 [語言] 代碼的代碼異味并提出改進(jìn)建議：[代碼塊]

提示：識(shí)別以下代碼中的任何安全漏洞：[代碼片段]

代碼重構(gòu)

您是否曾經(jīng)寫過//todo: refactor this code評(píng)論但從未發(fā)表過評(píng)論？ChatGPT 可以通過建議重構(gòu)和改進(jìn)代碼的方法來幫助減少這種情況，而無需花費(fèi)太多時(shí)間或精力。

提示：重構(gòu)給定的[語言]代碼以改進(jìn)其錯(cuò)誤處理和彈性：[代碼塊]

提示：重構(gòu)給定的[語言]代碼以使其更加模塊化：[代碼塊]

提示：重構(gòu)給定的[語言]代碼以提高性能：[代碼塊]

提示：重構(gòu)以下組件代碼以跨移動(dòng)設(shè)備、平板電腦和桌面屏幕響應(yīng)：[代碼塊]

提示：建議變量和函數(shù)的描述性和有意義的名稱，以便更容易理解代碼中每個(gè)元素的用途：[代碼片段]

提示：建議簡(jiǎn)化復(fù)雜條件并使它們更易于閱讀和理解的方法：[代碼片段]

錯(cuò)誤檢測(cè)和修復(fù)

作為開發(fā)人員，我們知道捕獲代碼中的所有錯(cuò)誤并不總是那么容易。但是，借助 ChatGPT 提示，我們可以輕松識(shí)別并解決那些可能導(dǎo)致問題的討厭錯(cuò)誤。

提示：查找以下代碼中的任何錯(cuò)誤：[代碼片段]

提示：我從以下代碼片段中收到錯(cuò)誤 [error]：[code snippet]。我該如何解決？

系統(tǒng)設(shè)計(jì)和架構(gòu)

ChatGPT 可以提供關(guān)于如何使用特定技術(shù)堆棧設(shè)計(jì)系統(tǒng)或?qū)⒃O(shè)計(jì)和架構(gòu)與不同技術(shù)堆棧進(jìn)行對(duì)比的寶貴見解和建議。無論您是構(gòu)建 Web 應(yīng)用程序、移動(dòng)應(yīng)用程序還是分布式系統(tǒng)，ChatGPT 都可以幫助您設(shè)計(jì)滿足您需求的可擴(kuò)展、可靠且可維護(hù)的架構(gòu)。

提示：您是系統(tǒng)設(shè)計(jì)和架構(gòu)方面的專家。告訴我如何設(shè)計(jì)一個(gè)[系統(tǒng)]。技術(shù)棧是[逗號(hào)分隔的技術(shù)列表]。

示例：您是系統(tǒng)設(shè)計(jì)和架構(gòu)方面的專家。告訴我如何設(shè)計(jì)酒店預(yù)訂系統(tǒng)。技術(shù)棧是 Next.js 和 Firebase。

提示：將設(shè)計(jì)和架構(gòu)與 [comma-separated list of technologies] 作為技術(shù)堆棧進(jìn)行對(duì)比。

示例：將設(shè)計(jì)和架構(gòu)與 React 和 Supabase 作為技術(shù)棧進(jìn)行對(duì)比。

搜索引擎優(yōu)化

ChatGPT 可以為您提供提示和最佳實(shí)踐，以針對(duì)搜索引擎優(yōu)化您的網(wǎng)站。

提示：如何提高著陸頁的搜索引擎優(yōu)化？

提示：舉一個(gè)例子 <head> HTML代碼的部分，該部分針對(duì)[網(wǎng)站]的搜索引擎優(yōu)化（seo）進(jìn)行了優(yōu)化

示例：舉一個(gè)針對(duì)運(yùn)動(dòng)員社交網(wǎng)站的搜索引擎優(yōu)化 (SEO) 優(yōu)化的 HTML 代碼的 <head> 部分示例

模擬數(shù)據(jù)生成

無論是用于測(cè)試還是演示目的，擁有真實(shí)且具有代表性的數(shù)據(jù)都是至關(guān)重要的。ChatGPT 可以幫助您快速生成各種域和格式的模擬數(shù)據(jù)。

提示：為[域]生成[數(shù)字][實(shí)體]的示例[數(shù)據(jù)格式]

示例：為服裝電子商務(wù)網(wǎng)站生成 5 種產(chǎn)品的示例 JSON

提示：您還可以在每次響應(yīng)后輸入提示，以進(jìn)行更細(xì)粒度的控制

給我一個(gè)電子商務(wù)網(wǎng)站上 [entity] 的 [number] 字段列表
添加一個(gè)“id”字段，該字段對(duì)每個(gè) [entity] 都是唯一的。將 [現(xiàn)有字段] 替換為 [新字段]
生成具有實(shí)際值的 [number] 此類 [entity] 的示例 [data format]

測(cè)試

ChatGPT 可以幫助您編寫單元測(cè)試、生成測(cè)試用例列表以及選擇合適的測(cè)試框架或庫。

提示：使用[測(cè)試框架/庫]為以下[庫/框架]組件[組件代碼]編寫單元測(cè)試

提示：生成測(cè)試用例列表以手動(dòng)測(cè)試網(wǎng)絡(luò)/移動(dòng)應(yīng)用程序中的用戶注冊(cè)。

提示：我應(yīng)該為 React Native 應(yīng)用程序選擇哪些測(cè)試框架或庫？

文檔

無論您是在處理個(gè)人項(xiàng)目還是團(tuán)隊(duì)項(xiàng)目，良好的文檔都可以節(jié)省您的時(shí)間并避免麻煩的發(fā)生。

提示：為以下代碼寫評(píng)論：[代碼片段]

提示：為以下 JavaScript 函數(shù)編寫 JSDoc 注釋：[代碼片段]

外殼命令

作為開發(fā)人員，您不僅限于編寫代碼。ChatGPT 可以使用 Git 協(xié)助執(zhí)行 shell 命令和版本控制

提示：寫一個(gè) shell 命令到 [requirement]

示例：編寫 shell 命令以刪除“logs”文件夾中所有擴(kuò)展名為“.log”的文件

提示：寫一個(gè) git 命令到 [requirement]

示例：編寫一個(gè) git 命令來撤消之前的提交

提示：解釋以下命令[command]

示例：解釋以下命令 [git switch -c feat/qwik-loaders]

常用表達(dá)

使用 ChatGPT，您可以理解復(fù)雜的正則表達(dá)式并生成與文本中特定模式匹配的正則表達(dá)式。

提示：解釋這個(gè)正則表達(dá)式：[regex]

示例：用 JavaScript 解釋這個(gè)正則表達(dá)式：const regex = /^[A-Za-z0–9._%+-]+@[A-Za-z0–9.-]+\.[A-Za-z]{2,}$/;

提示：您的角色是生成匹配文本中特定模式的正則表達(dá)式。您應(yīng)該以一種可以輕松復(fù)制并粘貼到支持正則表達(dá)式的文本編輯器或編程語言中的格式提供正則表達(dá)式。生成匹配 [text] 的正則表達(dá)式。

內(nèi)容

借助 ChatGPT，您可以根據(jù)您的特定需求為各種目的生成內(nèi)容。

Prompt：生成電子商務(wù)網(wǎng)站的常見問題列表

提示：為課程登陸頁面生成內(nèi)容。該課程是“[課程名稱]”。它至少應(yīng)包括以下部分：課程內(nèi)容、主要受眾是誰、他們將如何受益、課程部分和結(jié)構(gòu)、教學(xué)方法、作者簡(jiǎn)介和定價(jià)部分。對(duì)于定價(jià)部分，提供三個(gè)等級(jí)供用戶選擇。

簡(jiǎn)歷和求職信

制作引人注目且精美的簡(jiǎn)歷和求職信可能是一項(xiàng)艱巨的任務(wù)，但在 ChatGPT 的幫助下，它不必如此。ChatGPT 也將嚴(yán)格遵守任何字符或單詞限制。

提示：使用我的簡(jiǎn)歷寫一個(gè) LinkedIn 關(guān)于部分：[簡(jiǎn)歷]。使用關(guān)鍵字 [逗號(hào)分隔的關(guān)鍵字]。以第一人稱書寫并使用友好的語氣。不要超過 2,600 個(gè)字符。

提示：我想讓你擔(dān)任求職信作者。我將向您提供我的簡(jiǎn)歷，您將生成一封求職信來補(bǔ)充它。我希望求職信具有更多 [形容詞] 語氣，因?yàn)槲覍⑸暾?qǐng)一家 [公司類型] 公司。以下是我的簡(jiǎn)歷 [resume]。以下是職位描述[job description]。

提示：[你的簡(jiǎn)歷] 根據(jù) [公司] 的這個(gè) [職位] 職位完善我的簡(jiǎn)歷，并包括顯示影響和指標(biāo) [職位描述] 的要點(diǎn)成就。注意：您可以要求 ChatGPT 以 LaTex 標(biāo)記生成輸出。

面試準(zhǔn)備

在 ChatGPT 的幫助下，您可以為即將到來的工作面試做好充分準(zhǔn)備。

提示：我因 [職位] 而接受了 [公司名稱] 的面試。幫助我回答以下問題：

有關(guān)公司、行業(yè)及其競(jìng)爭(zhēng)對(duì)手的信息
公司文化
我可以在面試結(jié)束時(shí)問的問題

提示：我正在面試一個(gè) [job title] 角色。請(qǐng)列出[職位]職位的 10 個(gè)最常被問到的面試問題。

示例：我正在面試高級(jí) React 開發(fā)人員角色。請(qǐng)列出高級(jí) React 開發(fā)人員職位的 10 個(gè)最常被問到的面試問題。

提示：我正在面試一個(gè) [job title] 角色。請(qǐng)生成 10 個(gè)特定于下面發(fā)布的工作角色的面試問題 [工作角色]

提示：隨機(jī)問我一個(gè)簡(jiǎn)單/中等/困難的 Leetcode 問題，并根據(jù)正確性、時(shí)間和空間復(fù)雜性評(píng)估我的解決方案。

學(xué)習(xí)

在 Web 開發(fā)中，學(xué)習(xí)永遠(yuǎn)不會(huì)停止。無論是學(xué)習(xí)新的編程語言、了解最佳實(shí)踐，還是提高網(wǎng)站性能，ChatGPT 都能滿足您的需求。

提示：我是一名網(wǎng)絡(luò)開發(fā)人員，正在學(xué)習(xí) [語言/技術(shù)]。建議關(guān)注前 5 個(gè) [社交媒體] [帳戶/渠道/個(gè)人資料]。

提示：創(chuàng)建登錄表單時(shí)的最佳做法是什么？

提示：解釋網(wǎng)絡(luò)可訪問性的重要性并列出三種確保網(wǎng)站可訪問性的方法

提示：在[語言/框架]中編寫干凈且可維護(hù)的代碼的最佳實(shí)踐是什么？

提示：創(chuàng)建具有以下要求的 [技術(shù)/框架] 博客應(yīng)用程序的步驟是什么？

所有文章的列表頁面
您可以在其中閱讀文章的詳細(xì)信息頁面
關(guān)于我的頁面
鏈接到社交媒體資料
高性能

提示：[語言/框架]中[相似概念列表]之間有什么區(qū)別

示例：JavaScript 中的 var、let 和 const 關(guān)鍵字有什么區(qū)別

提示：用現(xiàn)實(shí)世界的類比解釋[語言/框架] [概念]

示例：用真實(shí)世界的類比來解釋 JavaScript promises

提示：提高網(wǎng)站性能的不同方法有哪些？

結(jié)論

如果您是 Web 開發(fā)人員，使用 ChatGPT 可以提供提示和策略來簡(jiǎn)化編碼任務(wù)，從而幫助優(yōu)化您的工作流程并提高效率。雖然 ChatGPT 是一個(gè)強(qiáng)大的工具，但請(qǐng)務(wù)必牢記它的局限性并將其用作您的知識(shí)和技能的補(bǔ)充。通過事實(shí)核查研究并緊跟當(dāng)前趨勢(shì)，您可以充分利用 AI 在 Web 開發(fā)中的優(yōu)勢(shì)。將 ChatGPT 作為寶貴的資源，您可以自信地駕馭 Web 開發(fā)世界并提高您的技能。

作者:VISHWAS GOPINATH

出處
:https://www.builder.io/blog/ai-prompts-for-web-developers-chatgpt