50+ 可以帮助提高前端开发效率的 ChatGPT Prompts

原文：程序员成长指南作者：VISHWAS GOPINATH

如有侵权，请联系我们删除。

如果您厌倦了枯燥、重复的编码例程并希望提高效率，那么您来对地方了。 ChatGPT 的功能可帮助您简化工作流程、减少错误，甚至获得见解以改进代码。

本文提供了50 多个使用ChatGPT 来加快Web 开发工作流程的技巧和策略。从学习概念到准备面试，您将找到作为Web 开发人员充分利用AI 所需的一切。

但首先，了解ChatGPT 的局限性也很重要。 ChatGPT 是一个强大的工具，但它不能替代您自己的知识和技能。此外，列出的所有研究数据都必须经过事实核查，因为它本身无法进行事实核查。此外，训练数据仅更新到2021 年，因此您可能不了解当前的趋势或事件。考虑到这些因素，让我们深入了解人工智能驱动的Web 开发的激动人心的世界。

所有提示均可在https://chat.openai.com/上获取。

代码生成

ChatGPT 可以为各种Web 开发任务生成代码，节省您的时间并使您的工作更加高效。它可以帮助您生成语义HTML 和CSS 代码、JavaScript 函数，甚至数据库查询语句。

提示：生成语义上可访问的HTML 和（在指定框架中）由[组件部分] 组成的CSS [UI 组件]。 [组件部分]必须渲染[指定的布局(layout)]。

示例（提示的实际示例）：生成语义HTML 和Tailwind CSS“联系支持”表单，其中包含用户名、电子邮件、问题类型和消息。表单元素必须垂直堆叠并放置在卡片内。

提示：创建一个接受输入并返回输出的JavaScript 函数。

示例：创建一个JavaScript 函数，该函数接受全名作为输入并返回头像字符。

提示：要创建实现[指定功能]的[指定框架] API，您必须使用[指定数据库]。

示例：创建一个Express.js API，使用MongoDB 作为数据库来检索当前用户的个人信息。

提示：数据库有[逗号分隔的表名]，您可以编写[数据库]查询语句来检索[指定的要求（要求）]。

示例：您的数据库有一个学生表和课程表，您想要编写一条PostgreSQL 语句来查询注册至少三门课程的学生列表。

代码补全

利用AI 的力量，ChatGPT 还可以提供与代码上下文和风格相匹配的代码完成建议。

提示：完成以下代码[代码片段]

示例：完成以下代码

constanimals=[\’狗\’,\’猫\’,\’鸟\’,\’鱼\’];

letanimal=animals[Math.floor(Math.random()*animals.length)];

开关（动物）{

案例“狗”:

控制台.log(

“狗是很棒的伴侣，它们给我们的生活带来欢乐和忠诚。它们的尾巴和湿润的鼻子总是让我们微笑。”

）；

休息；

}

通常最好用冒号结束提示并将代码块粘贴到新行上。用三个反引号[code code]或三个引号\’\'[code(code)]\’\’分隔代码块也是一个不错的选择。

代码转换

开发人员经常必须使用来自不同语言和框架的代码。 ChatGPT 允许您轻松地将代码片段从一种语言或框架转换为另一种语言或框架。

提示：将以下代码片段从语言/框架转换为语言/框架：代码片段

示例：将以下代码片段从JavaScript 转换为TypeScript。

函数非重复词（str1，str2）{

constmap=newMap();

构造=[]；

//连接字符串

conststr=str1+\’\’+str2;

//统计每个单词出现的次数

str.split(\’\’).forEach((word)={

map.has(word)?map.set(word,map.get(word)+1):map.set(word,1);

});

//选择只出现一次的单词

for(let[key,val]ofmap){

如果（val===1）{

res.push(key);

}

}

我会回来的。

}

提示：将以下使用CSS 框架的代码转换为特定CSS 框架。

示例：使用Bootstrap 将以下代码转换为使用Tailwind CSS: [代码片段]

代码解释

ChatGPT 通过提供代码解释并回答特定问题来帮助您理解代码。当使用其他人编写的代码或尝试理解复杂的代码片段时，这非常有用。

提示：了解以下语言代码片段：代码块

提示：此代码的作用：[接受来自Stack Overflow 的响应代码]

代码审查

代码审查是软件开发的重要组成部分，但单独工作时通常很难发现所有潜在问题。 ChatGPT 可帮助您识别代码中的异常和安全漏洞，使其更加高效和安全。

提示：检查以下[语言]代码是否存在代码异常并提出改进建议：[代码块]

提示：识别以下代码中潜在的安全漏洞：[代码片段]

代码重构

您是否曾经编写过类似//Todo: Refactor (todo: 重构) 的代码注释，但从未执行过？ChatGPT 提供了无需花费太多时间或精力即可重构和改进代码的建议，这将有助于缓解这种情况。

提示：重构指定的[语言]代码以改进错误处理和弹性：[代码块]

提示：重构指定的[语言]代码，使其更加模块化：[代码块]

提示：重构指定的[语言]代码以提高性能：[代码块]

提示：重构以下组件代码以跨移动设备、平板电脑和桌面屏幕进行响应：[代码块]

提示：为变量和函数建议描述性且有意义的名称，以帮助您理解代码中每个元素的用途：[代码片段]

提示：建议简化复杂条件的方法，使它们更易于阅读和理解：[代码片段]

漏洞检测和修复

作为开发人员，我们知道找到代码中的所有错误并不容易。但是，借助ChatGPT 提示，您可以轻松识别并修复可能导致问题的讨厌漏洞。

提示：查找以下代码中的错误：[代码片段]

提示：运行以下代码会导致错误[错误]：[代码片段]。我该如何解决这个问题？

系统设计和架构

ChatGPT 就如何使用特定技术堆栈设计系统，或如何比较不同技术堆栈的设计和架构提供了宝贵的见解和建议。无论您是构建Web 应用程序、移动应用程序还是分布式系统，ChatGPT 都可以帮助您设计可扩展、可靠且可维护的架构来满足您的需求。

提示：您是系统设计和架构方面的专家。如何使用[逗号分隔的技术列表]技术堆栈来设计[系统]？

示例：您是系统设计和架构方面的专家。如何设计酒店预订系统？技术栈是Next.js和Firebase。

提示：将[逗号分隔的技术列表]设计和架构作为技术堆栈进行比较。

示例：比较React 和Supabase 作为技术堆栈的设计和架构。

搜索引擎优化

ChatGPT 提供网站SEO 优化的技巧和最佳实践。

提示：如何优化SEO 着陆页？

提示：以下是使用HTML 代码片段对您的[网站]进行搜索引擎优化(SEO) 的示例。

示例：以下是使用HTML 代码段对运动员社交网站进行搜索引擎优化(SEO) 的示例。

模拟数据生成

无论是出于测试还是演示目的，获取真实的、有代表性的数据都很重要。 ChatGPT 可帮助您快速生成各种领域和格式的模拟数据。

提示：在域中生成数字实体的数据格式示例

示例：为某服装电商网站生成5 个产品的示例JSON

提示：您还可以在每次响应时继续键入提示，以进行更精细的控制。

电子商务网站上的实体编号字段列表是什么？

为每个实体添加唯一的“id”字段。将[现有字段] 替换为[新字段]

[数据格式]生成[指定数量]个这样的[实体]作为实际值的示例

测试

ChatGPT 帮助您编写单元测试、生成测试用例列表并选择合适的测试框架和库。

提示：使用指定测试框架/库为以下库/框架组件的组件代码创建单元测试：

提示：生成测试用例列表，允许您手动测试Web/移动应用程序的用户注册功能。

提示：您应该为React Native 应用程序选择哪个测试框架或库？

文档

无论您是在处理个人项目还是团队项目，良好的文档都可以大大节省您的时间并避免出现问题。

提示：注释以下代码：[代码片段]

提示：为以下JavaScript 函数创建JSDoc 注释：[代码片段]

Shell 命令

开发人员需要做的不仅仅是编写代码。 ChatGPT 可帮助您运行shell 命令并使用Git 进行版本控制。

提示：创建一个实现指定需求（requirement）的shell命令。

示例：编写一个shell命令，删除“logs”文件夹中所有扩展名为“.log”的文件。

提示：创建一个实现指定需求（requirement）的Git 命令。

示例：创建一个Git 命令来撤消上次提交

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

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

正则表达式

ChatGPT 允许您理解复杂的正则表达式并生成与文本中的特定模式匹配的正则表达式。

提示：解释这个正则表达式：[regex]

示例：用JavaScript 解释这个正则表达式。

constregex=/^[A-Za-z09._%+-]+@[A-Za-z09.-]+\\.[A-Za-z]{2,}$/;

提示：您的任务是生成与文本中的特定模式匹配的正则表达式。您指定的正则表达式可以轻松复制并粘贴到任何支持正则表达式的文本编辑器或编程语言中。生成匹配[指定文本(text)]的正则表达式。

内容

ChatGPT 允许您根据您的特定需求生成不同的内容。

提示：生成有关您的电子商务网站的常见问题列表

提示：为课程的登陆页面生成内容。该课程是“[课程标题]”。至少，您应该包括以下部分：课程的内容、主要受众、它将如何使您受益、课程组织和结构、教学方法、作者简介和定价部分。在价格部分，用户可以选择三个等级。

简历和求职信

创建引人注目的简历或求职信对许多人来说可能是一项艰巨的任务，但有了ChatGPT，这不再困难。 ChatGPT 还严格遵循字符和字数限制。

提示：使用我的简历[Resume] 在LinkedIn 上创建“关于我”部分。使用关键字[逗号分隔的关键字]。以第一人称并以温和的语气写作。请不要超过2,600 个字符。

提示：您想担任求职信撰写者。我将提供您的简历，您可以撰写并填写求职信。我打算申请一家[请指定公司类型]公司，所以我希望我的求职信有更多[请指定形容词]的感觉。以下是我的简历[简历]。以下是职位描述【职位描述（Job Description）】。

提示：[简历] 修改您的简历，以包含关键成就，以展示基于此[职位名称]职位的影响力和指标，请在[指定公司名称][指定职位描述]]。注意：您可以要求ChatGPT 以LaTex 标记生成输出。

面试准备

在ChatGPT 的帮助下，您可以为下一次工作面试做好充分准备。

提示：您正在接受[指定公司（公司名称）][指定职位]的面试。请帮忙回答以下问题。

有关公司本身、行业和竞争对手的信息

企业文化

面试结束时可以提出的问题

提示：我正在面试该职位[职位名称]。列出职位[标题] 的10 个最常见的面试问题。

示例：您正在面试高级React 开发人员的职位。 React 高级开发人员职位最常见的10 个问题是什么？

提示：您正在接受职位[职位名称] 的面试。针对以下职位[工作] 编写10 个面试问题。

提示：随机提出简单/中等/困难的Leetcode 问题，并根据准确性、时间和空间复杂度对解决方案进行评分。

学习

学习网络开发永无止境。无论您是学习新的编程语言、了解最佳实践还是提高网站性能，ChatGPT 都能满足您的需求。

提示：我是一名正在学习[语言/技术]的网络开发人员。您最应该关注的5 个[社交媒体] [帐户/频道/个人资料] 是什么？

提示：创建登录表单时的最佳实践是什么？

提示：解释网络可访问性的重要性，并列出确保网站可访问性的三种方法。

提示：在[语言/框架]中编写干净且可维护的代码的最佳实践是什么？

提示：创建具有以下要求的[技术/框架]博客应用程序需要哪些步骤？

所有文章列表页

文章详情查看页面

关于我页面

链接到我的社交媒体帐户

高性能

提示：语言/框架下的相似概念列表有什么区别？

示例：JavaScript 中的var、let 和const 关键字有什么区别？

提示：使用现实世界的类比解释[语言/框架][概念]

示例：用现实世界的类比解释JavaScript 的前景

提示：提高网站性能的不同方法有哪些？

结论

如果您是Web 开发人员，ChatGPT 提供了一些技巧和策略来简化您的编码任务、优化您的工作流程并提高效率。尽管ChatGPT 是一个强大的工具，但您也应该意识到它的局限性，并将其用作您知识和技能的补充。对AI 研究数据进行事实核查并掌握最新动态，帮助您在Web 开发中充分利用AI。借助ChatGPT 作为宝贵资源，您可以充满信心地进入Web 开发世界，并显着提高您的技能。

#以上相关内容来源网络约50+ChatGPT提示帮助提高前端开发效率，仅供参考。相关信息请参见官方公告。