作为一名使用Next.js和各种UI库的前端开发者，很多基础工作都非常耗时。但既然ChatGPT唾手可得，为什么不用呢？

这篇文章就来聊聊我如何用ChatGPT完成一些前端任务，总结了五个方面的应用。

1. 格式化JSON

作为前端开发者，我经常处理来自多个API的数据，这些数据通常以JSON格式返回。

在React Native中处理API时，如果不用JS远程调试器，所有来自console.log语句的数据都会显示在VS Code的控制台中。这些数据未经格式化，看起来很糟糕，很难阅读。

因此，我会将这些数据从控制台复制出来，打开ChatGPT，输入提示：

“格式化这段JSON”

然后在提示下方粘贴复制的数据。

ChatGPT就会生成一个格式良好的JSON。

复制`是不是很酷？`

这样一来，数据就非常易读了，我可以清楚地区分多个属性，并在前端代码中使用它们。

Chat链接

2. 创建UI骨架屏

显示骨架屏而不是简单的加载动画，是一种提升UI/UX体验的好方法，因为它能营造出网站加载速度很快的错觉。此外，它还能告诉用户数据将显示在哪个位置。

我尽量在所有可能的地方使用骨架屏，而创建骨架屏的方法就是利用ChatGPT。

例如，如果我在Next.js项目中使用Material UI库，我会这样做：

• 截图需要创建骨架屏的UI组件

• 打开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上的最终效果：

3. 生成随机数据（数组、对象）

每当我需要测试一些UI或基本的JavaScript代码时，我都会借助一些随机数据，例如虚拟数组或对象。而生成这些数据的方法就是使用ChatGPT。

例如：

假设我需要一个包含一些书名的数组，我只需要输入以下提示，让ChatGPT发挥魔法：

“给我一个包含随机书名的字符串数组（JSON格式）”

ChatGPT生成了一个包含一些书名的数组。

[
    "低语的阴影",
    "永恒的回声",
    "魔法森林",
    "迷失在城市",
    "沉默的证人",
    "深海的奥秘",
    "未知的旅程",
    "被遗忘的国度",
    "地平线之外",
    "隐藏的真相",
    "古代世界的传说",
    "被窃取的梦想",
    "最后的守护者",
    "过去的秘密",
    "幽灵的诅咒",
    "水晶洞穴",
    "时间旅行者的任务",
    "夜晚的传说",
    "永恒的火焰",
    "变化的风"
]

Chat链接

这是一种非常棒的方法，它让我们可以专注于实际工作，而不是编写自己的虚拟数据。

4. 正则表达式

信不信由你，这可能是ChatGPT最重要的用途之一。正则表达式的概念似乎来自另一个星球，因为有很多东西需要记住。

当你处理字符串时，你一定会遇到正则表达式。

例如，考虑以下场景：

这是一个URL： https://google.com/media_element/54788?type=video&embedded=true%22

我想提取5位数字：54788

在这里，我没有动脑筋，而是求助于ChatGPT。

“如何从这个URL中提取5位数字（54788）？（JavaScript）”

Chat链接

现在，我可以继续将它包装成一个函数……或者，让ChatGPT来做这件事:)

5. 查找代码解决方案

啊……老生常谈的“向AI寻求解决方案”了。

是的，这在很多时候都很有帮助。

在我的例子中，我想创建一个“复制链接”功能，它可以复制浏览器搜索栏中当前的URL。我使用了ChatGPT。

提示：“我有一个URL，如何在Next.js中创建一个名为“复制链接”的功能来复制这个URL？”

ChatGPT给我的回复包括创建Next.js项目和使用剪贴板API来复制链接。

Chat链接

向AI寻求任何类型的解决方案都是一个非常基本的使用案例，但它确实非常有用。

结论

ChatGPT是不是很有用？我敢肯定它很有用。

希望你从这篇文章中学到了一些新东西，以及如何使用这个AI工具来完成你的前端任务。