如果您厌倦了繁琐和重复的编码任务并希望优化您的效率，那么您来对地方了。借助 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