译文面向 Web 开发人员的 50 多个 ChatGPT 提示 _ChatGPT

文章插图

如果您厌倦了繁琐和重复的编码任务并希望优化您的效率，那么您来对地方了。借助 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 stringsconst str = str1 + " " + str2;// Count the occurrence of each wordstr.split(" ").forEach((word) => {map.has(word) ? map.set(word, map.get(word) + 1) : map.set(word, 1);});// Select words which occur only oncefor (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 可以通过建议重构和改进代码的方法来帮助减少这种情况，而无需花费太多时间或精力。