您当前的位置:首页 > 电脑百科 > 程序开发 > 程序员

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

时间:2023-05-21 13:57:00  来源:今日头条  作者:闪念基因

 

如果您厌倦了繁琐和重复的编码任务并希望优化您的效率,那么您来对地方了。借助 ChatGPT 的强大功能,您可以简化工作流程、减少错误,甚至获得有关改进代码的见解。

在这篇博文中,我们将为您提供 50 多个提示和策略,帮助您使用 ChatGPT 加快 Web 开发工作流程。从作为初学者学习概念到准备面试,您将找到作为 Web 开发人员充分利用 AI 所需的一切。

但首先,了解 ChatGPT 的局限性很重要。虽然它是一个强大的工具,但 ChatGPT 不能替代您自己的知识和技能。您还应该对它为您所做的任何研究进行事实核查,因为 ChatGPT 无法验证事实。此外,它的训练数据只到 2021 年,因此它可能不知道当前的趋势或事件。考虑到这些注意事项,让我们深入了解 AI 驱动的 Web 开发的激动人心的世界!

 

您可以在https://chat.openai.com/上运行所有提示

代码生成

ChatGPT 可以为各种 Web 开发任务生成代码,从而节省您的时间并帮助您提高效率。它可以帮助您生成语义 htmlcss 代码、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

提示:您还可以在每次响应后输入提示,以进行更细粒度的控制

  1. 给我一个电子商务网站上 [entity] 的 [number] 字段列表
  2. 添加一个“id”字段,该字段对每个 [entity] 都是唯一的。将 [现有字段] 替换为 [新字段]
  3. 生成具有实际值的 [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 的帮助下,您可以为即将到来的工作面试做好充分准备。

提示:我因 [职位] 而接受了 [公司名称] 的面试。帮助我回答以下问题:

  1. 有关公司、行业及其竞争对手的信息
  2. 公司文化
  3. 我可以在面试结束时问的问题

提示:我正在面试一个 [job title] 角色。请列出[职位]职位的 10 个最常被问到的面试问题。

示例:我正在面试高级 React 开发人员角色。请列出高级 React 开发人员职位的 10 个最常被问到的面试问题。

提示:我正在面试一个 [job title] 角色。请生成 10 个特定于下面发布的工作角色的面试问题 [工作角色]

提示:随机问我一个简单/中等/困难的 Leetcode 问题,并根据正确性、时间和空间复杂性评估我的解决方案。

学习

在 Web 开发中,学习永远不会停止。无论是学习新的编程语言、了解最佳实践,还是提高网站性能,ChatGPT 都能满足您的需求。

提示:我是一名网络开发人员,正在学习 [语言/技术]。建议关注前 5 个 [社交媒体] [帐户/渠道/个人资料]。

提示:创建登录表单时的最佳做法是什么?

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

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

提示:创建具有以下要求的 [技术/框架] 博客应用程序的步骤是什么?

  1. 所有文章的列表页面
  2. 您可以在其中阅读文章的详细信息页面
  3. 关于我的页面
  4. 链接到社交媒体资料
  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



Tags:ChatGPT   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除。
▌相关推荐
前言大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心。chatGPT 回复效果相信使用过 chatGPT 的朋友,都会看到,当你提问一个问题时,cha...【详细内容】
2023-05-22  Tags: ChatGPT  点击:(1)  评论:(0)  加入收藏
腾讯科技讯 5月22日消息,像聊天机器人ChatGPT这种人工智能驱动的工具,有可能彻底改变人类工作的效率、效果和速度。这在金融市场是如此,在医疗保健、制造业以及我们生活的几乎...【详细内容】
2023-05-22  Tags: ChatGPT  点击:(3)  评论:(0)  加入收藏
如果您厌倦了繁琐和重复的编码任务并希望优化您的效率,那么您来对地方了。借助 ChatGPT 的强大功能,您可以简化工作流程、减少错误,甚至获得有关改进代码的见解。在这篇博文中...【详细内容】
2023-05-21  Tags: ChatGPT  点击:(0)  评论:(0)  加入收藏
中新经纬5月20日电 ChatGPT在几乎每个领域都引发了大量讨论,这些对未来经济有何影响?诺贝尔经济学奖获得者迈克尔&middot;斯宾塞(Michael Spence)18日在2023清华五道口全球金融...【详细内容】
2023-05-20  Tags: ChatGPT  点击:(1)  评论:(0)  加入收藏
来源:华尔街见闻作者|于惠如 编辑|罗丽娟一周之内,OpenAI连放两个大招。在向所有Plus用户推出ChatGPT的联网和插件功能后,5月19日凌晨,OpenAI重磅发布了ChatGPT的官方iOS版App,这...【详细内容】
2023-05-20  Tags: ChatGPT  点击:(1)  评论:(0)  加入收藏
(图片来源:shutterstock)ChatGPT 的真“iPhone 时刻”来了。钛媒体App 5月19日消息,今天凌晨,美国人工智能研究公司OpenAI宣布推出ChatGPT的iOS App版本,并在美区App Store应用商...【详细内容】
2023-05-19  Tags: ChatGPT  点击:(3)  评论:(0)  加入收藏
ChatGPT的iOS移动版本正式上线。当地时间5月18日,人工智能研究公司OpenAI在其官网宣布,在美国推出了聊天机器人ChatGPT的iPhone应用,并承诺未来也将为安卓手机提供相同的服务。...【详细内容】
2023-05-19  Tags: ChatGPT  点击:(12)  评论:(0)  加入收藏
每经编辑 毕陆名在手机上也能玩ChatGPT了!当地时间周四(5月18日),人工智能研究公司OpenAI在官网宣布,其在美国推出了聊天机器人(16.220, -0.43, -2.58%)ChatGPT的iPhone应用,并承...【详细内容】
2023-05-19  Tags: ChatGPT  点击:(11)  评论:(0)  加入收藏
当地时间周四(5月18日),人工智能研究公司OpenAI在官网宣布,其在美国推出了聊天机器人ChatGPT的iPhone应用,并承诺未来也将为安卓手机提供相同的服务。官网还附带了该应用在苹果Ap...【详细内容】
2023-05-19  Tags: ChatGPT  点击:(8)  评论:(0)  加入收藏
作者|真梓*备受瞩目的ChatGPT联网功能又更进一步。继三月首次推出插件功能(Plugin)后,本周ChatGPT再次更新,将向Plus用户开放约70个第三方插件,覆盖购物、餐饮、旅行、天气、运算...【详细内容】
2023-05-18  Tags: ChatGPT  点击:(7)  评论:(0)  加入收藏
▌简易百科推荐
如果您厌倦了繁琐和重复的编码任务并希望优化您的效率,那么您来对地方了。借助 ChatGPT 的强大功能,您可以简化工作流程、减少错误,甚至获得有关改进代码的见解。在这篇博文中...【详细内容】
2023-05-21  闪念基因  今日头条  Tags:ChatGPT   点击:(0)  评论:(0)  加入收藏
ChatGPT 热潮下,关于 AI 是否会取代程序员的讨论不绝于耳,而本文作者认为:AI 反而会推动更多开发者的出现。原文链接:https://interconnect.substack.com/p/ai-will-create-more...【详细内容】
2023-05-18    CSDN  Tags:程序员   点击:(9)  评论:(0)  加入收藏
整理 | 明明如月 责编 | 何苗出品 | 《开谈》(ID:CSDNnews)在软件工程中,自动编程一直被视为圣杯。从编译器诞生时代开始,程序自动生成的目标就是将接近自然语言的高级语言翻译成...【详细内容】
2023-05-16    CSDN  Tags:编程   点击:(14)  评论:(0)  加入收藏
计算机技术越来越先进,编程已成为许多人想要学习的一项关键技能。但是有一个普遍的误解,即编程不需要任何数学知识,这句话并不完全对,虽然你可以进行编程而不需要数学,但学...【详细内容】
2023-05-11  程序员阿辉  今日头条  Tags:程序员   点击:(6)  评论:(0)  加入收藏
在Java程序员的面试过程中,项目经验是一个非常重要的方面。拥有丰富的项目经验可以证明你具备实际开发的能力和经验,能够更好地完成工作任务。但是,如何介绍自己的项目经验,让面...【详细内容】
2023-05-10  艾特程序员    Tags:Java程序员   点击:(10)  评论:(0)  加入收藏
整理 | 宋慧出品 | CSDN(ID:CSDNnews)ChatGPT、GPT-4 等 AI 技术在 2023 年春天再次引爆了技术界,现在,几乎每天都有 AI、GPT 相关的技术与新闻引发关注与讨论。原画师、前端开发...【详细内容】
2023-04-28    CSDN  Tags:AI   点击:(13)  评论:(0)  加入收藏
当你学习TypeScript时,你的第一印象可能会欺骗你:这不就是JavaScript注解的一种方式吗?不就是编译器用来帮助我找到潜在bug的吗?虽然这种说法没错,但随着你对TypeScript不断了解...【详细内容】
2023-04-21   前端新世界  微信公众号  Tags:程序员   点击:(30)  评论:(0)  加入收藏
后端开发待遇更高,两者之间相互比较的话,一般来说后端开发的岗位薪资水平会略高一些,这是因为大多数小型企业对开发者的要求不仅仅是要掌握自己岗位的技术并且还需要掌握其他技...【详细内容】
2023-04-20  IT千锋教育    Tags:前端   点击:(19)  评论:(0)  加入收藏
最近数据统计显示,web前端开发工程师的薪资区间(以北京为例)大约在 2 - 50K,其中 20-30K 的岗位最多占 30.8%2023年以来web前端开发工程师的需求量逐渐稳步提升web前端开发全国...【详细内容】
2023-04-18  千锋大数据开发学院    Tags:web前端   点击:(30)  评论:(0)  加入收藏
Java架构师需要掌握的东西还是很多,总结起来就是说方方面面的都要掌握下面给各位小伙伴介绍一下作为Java中最高级的程序员的都需要学习啥,掌握啥:首先就是Java语言及其生态系统...【详细内容】
2023-04-17  千锋大数据开发学院    Tags:架构师   点击:(4)  评论:(0)  加入收藏
站内最新
站内热门
站内头条