作為一個前端開發者，我如何利用ChatGPT來提高工作效率（五個實用方法）
作为一名前端开发者，我正在使用 Next.js 并且使用各种 UI 库，做一些基本的事情非常耗时。既然有 ChatGPT 这样的工具，为什么不利用它呢。
因此，这篇文章介绍了我如何通过ChatGPT来完成5项前端任务的方法。
1. 格式化 JSON 数据作为前端开发人员，我经常需要处理来自多个API的数据中，这些数据通常以JSON格式呈现。
当你在 React Native 中处理 API 时，如果没有使用 JS 远程调试器，所有通过 console.log 输出的信息都会显示在 VS Code 的控制台中。这些信息未格式化，看起来乱糟糟的，读起来也很费劲。
所以我从控制台复制了这些数据，然后打开ChatGPT并输入了这个提示。
“把这个 JSON 格式化一下”
我把复制的数据粘贴到下面。
ChatGPT会生成一个格式良好的JSON。
真酷吧？这使它非常易读，我能够清楚地分辨多个属性，并在前端代码中使用。
2. 创建UI草图显示骨架屏而非简单的加载 spinner 是提升 UI/UX（即用户界面和用户体验）的好方法，因为它给人一种网站加载速度很快的感觉。而且，它明确告诉用户数据将显示在哪里。
我尽量使用骨架，用ChatGPT来创建它们。
例如，当我使用Material UI库和Next.js时，我会这么做：
- 点击界面上你想创建骨架的那个组件的截图。
- 打开ChatGPT，然后输入下面的提示：
生成这个Next.js组件的MUI骨架
- 我将截图及提示粘贴到输入框。ChatGPT 生成骨架代码。
为此，它生成了这样的代码。
import React from 'react';
import Skeleton from '@mui/material/Skeleton';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Avatar from '@mui/material/Avatar';
import ThumbUpIcon from '@mui/icons-material/ThumbUp';
import ThumbDownIcon from '@mui/icons-material/ThumbDown';
import Link from '@mui/material/Link';
const PostSkeleton = () => {
return (
<Box sx={{ p: 2, border: '1px solid #333', borderRadius: 2, backgroundColor: '#000', color: '#fff' }}>
<Stack direction="row" alignItems="center" spacing={2}>
<Avatar sx={{ bgcolor: '#555' }}>
<Skeleton variant="circular" width={40} height={40} />
</Avatar>
<Stack>
<Skeleton width={100} height={20} />
<Skeleton width={80} height={15} />
</Stack>
</Stack>
<Box mt={2}>
<Skeleton width="60%" height={25} />
<Skeleton width="90%" height={20} />
<Skeleton width="40%" height={20} />
</Box>
<Stack direction="row" alignItems="center" spacing={1} mt={2}>
<ThumbUpIcon sx={{ color: '#888' }} />
<Skeleton width={20} height={20} />
<ThumbDownIcon sx={{ color: '#888' }} />
<Skeleton width={20} height={20} />
</Stack>
<Link href="#" sx={{ mt: 2, display: 'block', color: '#888' }}>
<Skeleton width="30%" height={20} />
</Link>
</Box>
);
};
export default PostSkeleton;通常它并不完全像素完美，所以我需要稍微调整一下代码，主要是调整宽度和高度，以及行或列的布局。
但 ChatGPT 做了大约 80% 的工作，所以我猜这样还算可以。
这是我在 Libertas（一个在线讨论平台）界面上看到的最终显示效果。
每次我需要测试一些UI或基本的JavaScript功能时，我会使用一些随机生成的数据，如虚拟数组或对象。我用ChatGPT来生成这些数据。
如以下例子所示： 或者直接写成例如：
比如说我需要一个包含书名的列表，我只需输入如下提示，让ChatGPT处理一下。
“给我这样一个由随机生成的书名组成的字符串列表（JSON）。”
这里，ChatGPT生成了一些书名的列表。
[
"低语的阴影",
"永恒的回声",
"被施了魔法的森林",
"城市中的迷失",
"沉默的见证",
"深海之谜",
"前往未知的旅行",
"被遗忘之地",
"地平线之外",
"隐藏的真相",
"古老世界的传说",
"被偷走的梦想",
"最后的守护者",
"来自过去的秘密",
"幽灵的诅咒",
"水晶洞穴",
"时间旅行者的旅程",
"夜的传奇",
"永恒之火",
"变化的风"
]这是一个很棒的方法，把重点放在真正的任务上，而不是自己编造数据。
4.: 正则表达式信不信由你，这可能是 ChatGPT 最大的用例之一。正则表达式好像来自另一个星球，因为要记住的东西太多。
当你在代码中玩弄字符串时，总会遇到正则。
例如，考虑这种情况。这是一个网址: https://google.com/media_element/54788?type=video&embedded=true%22
我想把这个五位数54788拿出来。
在这里，我没有动用脑子，而是向ChatGPT求助。
“如何从这个URL中提取5位数字（54788）？（JavaScript）”
现在，更进一步，我可以把它封装成一个函数。或者……干脆直接让ChatGPT来搞定吧，哈哈
5. 查找代码解决方法啊……老一套的，向AI要答案。
没错，很多次很有帮助。
在我的情况下，我想要创建一个“复制链接”的按钮或选项，该功能将复制当前浏览器里的网址。我用ChatGPT来实现这个功能。
提示：我有一个网址，怎么在Next.js里复制这个网址，作为“复制链接功能”的功能呢？
ChatGPT回复了我，其中提到了创建Next.js项目并使用剪贴板API（Clipboard API）复制链接地址。
向AI求助任何问题都是一种相当基础的做法，但确实很有帮助。
最后来个总结ChatGPT 不是挺有用的吗？我敢打赌它确实很有用。
希望你从这篇帖子中学到了一些新东西，以及如何利用这个AI工具来完成前端任务。
你用ChatGPT来做哪些任务？
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
