出品| CSDN（ID：）

我探索了一些实用的人工智能应用程序，用于编写高质量的功能代码，这些代码可以在您编程时提供很多便利。 我在工作中一直使用 Web Tools 和 GPT（我们可以将其视为 GPT 的变体，因为它们都基于相同的核心技术构建）。

核心总结

：获取端到端指令集来解决问题，或编写涵盖多个类和函数的完整用例的代码。 此外，它还会解释生成的代码，这是自动完成功能无法实现的。

接下来我将介绍在编程中使用AI的六种方式：

CSS 生成()

在构建 Dr Droid 的过程中，我设定了自己编写应用程序并创建新组件的目标。 虽然我们使用 Figma 来创建原型，但将其嵌入到页面设计中仍然需要一些技巧。 我主要从事后端开发，因此编写 CSS 来处理网格、移动适配性和间距对我来说有点困难。 我创建了一个包含 HTML 元素的类，并在提示中描述了 Figma 原型中的元素。 将 CSS 添加到此类可以根据一些实际测量进行预测，我可以稍后对其进行调整，但它解决了我对选择要使用的 CSS 样式的困惑。

进入：

"""定义3个类别的CSS，一个是父div，两个是子div。子div应水平对齐，其内部文本应分别向左和向右对齐"""

输出：

.parentDiv {  flex-direction: 'inherit';  display: 'flow-root';  padding: '2px';}
.leftDiv {  width: '30%';  height: '100%';  background: 'white';  float: 'left';  border: '1px solid black';    text-align: 'left';}
.rightDiv {  width: '70%';  height: '100%';  background: 'white';  float: 'right';  border: '1px solid black';    text-align: 'right';}

利用书写功能：专注于排序和数据操作

在Dr Droid平台上，我们需要进行大量的数据转换来实现各种功能。 经过测试，根据提示编写这些转换函数表现出了很强的实力。 它还擅长参考旧字段描述新字段，以及编写将两个数据对象合并为具有不同模式的单个对象的函数。

例如，我需要一个函数，根据两个字符串键将 JSON 对象组合到一个数组中，并为第三个数字键提供不同的统计信息。 它可以在您的代码环境中编写，而无需重命名变量，并且您可以告诉它使用哪个库来执行。

进入：

"""编写一个函数，将 JSON 对象合并到数组中的两个字符串键上，并给出第三个数字键的平均值和中位数统计信息"""

输出：

function mergeJsonArray(jsonArray, key1, key2, key3) {  let mergedJson = {};  let mergedJsonArray = [];
  jsonArray.forEach(item => {    if (item[key1] in mergedJson) {      if (item[key2] in mergedJson[item[key1]]) {        mergedJson[item[key1]][item[key2]].push(item[key3]);      } else {        mergedJson[item[key1]][item[key2]] = [item[key3]];      }    } else {      mergedJson[item[key1]] = {};      mergedJson[item[key1]][item[key2]] = [item[key3]];    }  });
  for (const key1 in mergedJson) {    for (const key2 in mergedJson[key1]) {      let sum = 0.0;      let median = 0.0;      let mean = 0.0;      let count = 0;      let min = 0.0;      let max = 0.0;
      mergedJson[key1][key2].forEach(item => {        sum += item;        count += 1;      });
      mean = sum / count;
      mergedJson[key1][key2].sort((a, b) => a - b);      median = mergedJson[key1][key2][Math.floor(mergedJson[key1][key2].length / 2)];
      min = mergedJson[key1][key2][0];      max = mergedJson[key1][key2][mergedJson[key1][key2].length - 1];
      mergedJsonArray.push({        [key1]: key1,        [key2]: key2,        'count': count,        'sum': sum,        'mean': mean,        'median': median,        'min': min,        'max': max      });    }  }    return mergedJsonArray;}

编码副驾驶：识别和应用重复模式

我正在为跨多个数据库表操作的测试环境编写数据删除脚本。 这些表都有时间戳列，但名称不同。 我在注释中以逗号分隔的格式列出了所有表名，然后编写了第一个表的删除 SQL 查询，以及整个删除命令的连接游标用法。 完成此操作后，Co-pilot 开始自动为这些表中的每次迭代建议代码块，同时还根据其中时间戳列的名称修改其列名称。 然而，它无法理解可能的删除顺序，它只能按照模型文件中写入的顺序进行。

我将 Co-pilot 插件与 Text 结合使用。 我发现该插件的建议更加智能，尤其是在处理其他文件中的类定义的上下文时。

通过描述需求生成整个React.js组件，只需要调整几个变量

当我使用一个名为react-flow的React.js库时，我想自定义一些组件来替换库中的原始部分。 我的目标是为其添加个性化的视觉效果，以及在组件顶部添加一些附加文本。 尽管该文档详细描述了如何用新组件替换原有组件，但没有明确提及如何在保留原有功能的情况下对其进行扩展。

所以，我问了一个问题：

如何在反应流中创建自定义边缘。 该边缘是一条紫色粗线，末端有一个大箭头。

以下是我收到的回复：

import React from 'react';
const CustomEdge = ({ id, sourceX, sourceY, targetX, targetY, style = {} }) => {  const edgePath = `M ${sourceX},${sourceY} L ${targetX},${targetY}`;
  // 计算箭头的角度  const angle = Math.atan2(targetY - sourceY, targetX - sourceX);  const arrowLength = 10;// 箭头的长度
// 计算箭头头部的点  const arrowPoints = [    [targetX - arrowLength * Math.cos(angle - Math.PI / 6), targetY - arrowLength * Math.sin(angle - Math.PI / 6)],    [targetX, targetY],    [targetX - arrowLength * Math.cos(angle + Math.PI / 6), targetY - arrowLength * Math.sin(angle + Math.PI / 6)],  ];
  return (    <>              id={id}        d={edgePath}        style={{          fill: 'none',          strokeWidth: '4px',          stroke: 'violet',          ...style, // 允许覆盖样式        }}      />              points={arrowPoints.map(p => p.join(',')).join(' ')}        fill="violet"        stroke="violet"        strokeWidth="1"      />      );};
export default CustomEdge;
// 在你的 React Flow 图中使用自定义边缘组件import ReactFlow from 'react-flow-renderer';import CustomEdge from './CustomEdge';
const elements = [// ... 你的节点和边];
const App = () => {  return (    
'500px' }}>          
  );};
export default App;

对于这段代码，我只需要对选定的 CSS 样式进行一些细微的调整。 这段代码节省了我大约30分钟的编码时间，并且代码运行顺利。

请求代码片段。 如果操作失败，会反馈错误信息。 将根据反馈进行修正，直至问题解决。

擅长根据详细反馈完善答案。 但是，反馈不仅仅是请求再次构建或寻找更好的解决方案，您还可以在反馈中提供上下文信息。 例如，我想实现react-flow图中节点的自动布局。 我发现有一个叫cola的布局可以达到这个目的。 由于网上很难找到具体的实现例子，所以问：

给我一个示例代码，展示如何使用反应流和可乐布局来排列我的节点

输出：

import React from 'react';import ReactFlow, { ReactFlowProvider, addEdge, removeElements, Controls } from 'react-flow-renderer';import { ColaLayout } from 'react-flow-renderer/dist/layoutCola';
const MyFlowComponent = () => {  const initialElements = [    { id: '1', type: 'input', data: { label: 'Input Node' }, position: { x: 0, y: 0 } },    { id: '2', data: { label: 'Node 2' }, position: { x: 200, y: 50 } },    { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },    { id: 'e1-2', source: '1', target: '2' },    { id: 'e2-3', source: '2', target: '3' },
  ];
  const onLoad = (reactFlowInstance) => {    reactFlowInstance.fitView();  // 使图形适应视口  };
  const layout = {    type: 'cola',    edgeLength: 180,    animate: true,    randomize: false,    maxSimulationTime: 1500,  };
  return (    <div style={{ height: '500px' }}>      <ReactFlowProvider>        <ReactFlow elements={initialElements} onLoad={onLoad} layout={layout}>          <Controls />        ReactFlow>      ReactFlowProvider>    div>  );};
export default MyFlowComponent;
// 使用 npm 安装 cola:npm install react-flow react-flow-renderer

然而，尽管我按照提示安装了，代码仍然无法运行，出现错误。

于是，我又问：

它给了我这个错误“未找到：错误：路径./dist/不是来自”。

输出：

对于造成的混乱，我深表歉意。 看来该模块不再直接在react-flow-包中可用。 要在React Flow中使用“cola”布局算法，您可以安装react-flow-dagre包，它提供了包括“cola”布局在内的其他布局选项。

然后，提供了替代代码块并建议我安装一个新库：

# 使用 npmnpm install react-flow react-flow-renderer react-flow-dagre

但是这次安装过程中出现了错误：

npm 错误！ 404 未找到 - 获取 - 未找到

既然它了解了我的需求，即使我不主动提出问题sublime text 自动编码，它也开始提出其他建议sublime text 自动编码，引导我实现节点布局的初衷。 最后，尽管没有使用可乐布局，但我实现了我的目标，我的问题也解决了。

最近打算在Kafka集群和服务之间建立消息连接。 虽然Kafka提供了相应的连接器，但是我对它的了解还不够。 我在网上查找了一些配置示例，虽然我找到了配置Kafka连接到S3存储桶的详细示例，但我没有找到将其用作数据接收器的示例。 所以我询问如何做到这一点，它提供了一套完整的分步说明来帮助我做到这一点。 我在网上搜索了这个答案，以确定它是自行生成的还是基于其他示例得出的，但没有找到类似的文章。

限制和挑战

虽然AI编程辅助工具极大地提高了编程效率，但我们也必须清醒地认识到它并不完美。 我们不能仅仅依赖它生成的代码，而应该逐步检查和测试它的输出。

我在使用过程中也发现了一些限制：

有时，会生成一些当前代码上下文中不存在的变量。 这可能是因为，虽然在编码过程中考虑了变量命名的逻辑，但无法保证代码的正确运行。

在查询某些工具或技术的操作指南时，由于其训练数据库的时效性，有时输出结果可能会显得过时。 某些工具可能已经更新，其界面也发生了变化，与提供的结果不一致。 我在使用AWS的一些服务时也遇到过这种情况。

你已经在工作中使用AI辅助编程了吗？ 您有什么意见和经验？

如有侵权请联系删除！