当前位置:首页> AI教程> 基于GPT-3.5模型的智能AI代码生成工具Cursor研究

基于GPT-3.5模型的智能AI代码生成工具Cursor研究

释放双眼,带上耳机,听听看~!
本文研究基于GPT-3.5模型开发的智能AI代码生成工具Cursor的应用和对程序员效率及工作体验的影响。

研究目的

  • 随着类似 chatgpt 的模型的问世,代码生成工具在软件开发领域迅速兴起。本文旨在研究基于 GPT-3.5 模型开发的智能 AI 代码生成工具 Cursor 的应用价值和对程序员的效率提升及工作体验的影响。

摘要

  • 本文将重点关注 Cursor 的功能、使用体验和效果,评估 Cursor 在实际开发环境中的表现。研究结果将为开发人员提供有关 Cursor 的详细洞察,以便更好地了解该工具的潜在价值和适用性。

相关信息

  • 此软件支持三个平台:Windows、Mac、Linux。
  • 下载链接

调研方法

  1. 本人试用
  2. 阅读官方文档
  3. 阅读市面上介绍本软件的文章

软件概述

  • 此软件想要解决的核心痛点是:在专为与 AI 进行结对编程而设计的 IDE 中更快地构建软件

  • 支持多种编程语言,如 Python, Java, C#, JavaScript 等

  • 它能编写、重构、解释和优化代码

基本使用

  • 下载后,用该软件打开文件。根据提示,先选中代码,按 command+L 可以对选中的代码进行提问,提问后的结果会出现在右侧。先选中代码,按 command+K 可以对选中的代码直接进行修改。两种功能在后文中都有演示。

基于GPT-3.5模型的智能AI代码生成工具Cursor研究

功能特点

  • 在下文中,我将从编写、重构、解释和优化代码等几个方面演示它。

编写代码

案例一

  • 本例通过提问方式,请它帮我实现一个运用组件库 / JS 库的需求。

  • 以下是我提问的内容:

    • 请帮我使用vue2和view UI实现一个功能,分别有两个按钮,一个是新增,一个是编辑;点击新增时,打开一个modal,modal里面有name,age,sex三个Form.item项,这三项内容不填充数据。点击编辑时,打开一个modal,modal里面也有name,age,sex三个Form.item项,这三项内容需要填充数据,填充{ name:’aaa’,age:18,sex:’male’}。
  • 以下代码是它的实现:

<template>
  <div>
    <Button @click="showAddModal">Add</Button>
    <Button @click="showEditModal">Edit</Button>

    <Modal v-model="modalVisible" title="Form" :mask-closable="false">
      <Form :model="formData" :rules="formRules" ref="form">
        <Form-item label="Name" prop="name">
          <Input v-model="formData.name" />
        </Form-item>
        <Form-item label="Age" prop="age">
          <Input v-model.number="formData.age" />
        </Form-item>
        <Form-item label="Sex" prop="sex">
          <Radio-group v-model="formData.sex">
            <Radio label="male">Male</Radio>
            <Radio label="female">Female</Radio>
          </Radio-group>
        </Form-item>
      </Form>

      <div slot="footer">
        <Button @click="cancel">Cancel</Button>
        <Button type="primary" @click="submitForm">OK</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modalVisible: false,
      formData: {
        name: '',
        age: null,
        sex: '',
      },
      formRules: {
        name: [{ required: true, message: 'Please enter name', trigger: 'blur' }],
        age: [{ required: true, message: 'Please enter age', trigger: 'blur' }],
        sex: [{ required: true, message: 'Please select sex', trigger: 'blur' }],
      },
    }
  },
  methods: {
    showAddModal() {
      this.modalVisible = true
    },
    showEditModal() {
      this.formData = { name: 'aaa', age: 18, sex: 'male' }
      this.modalVisible = true
    },
    cancel() {
      this.modalVisible = false
      this.$refs.form.resetFields()
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // Handle form submission here
          this.modalVisible = false
          this.$refs.form.resetFields()
        } else {
          this.$Message.error('Form validation failed!')
        }
      })
    },
  },
}
</script>
    

重构代码

案例二

  • 本例是基于 案例一 重构后的实现。

  • 以下是我提问的内容:

    • 1.modal展示的title是「创建自动分配规则」。

      2.form.item项分别为:1.label为「设计师」,设计师为单选项,必填。2.label为「需求内容 (可多选)」,该项可多选,必填。

      3.这一项交互稍微复杂。首先,它有两个单选按钮。分别是「工单量上限 (个)」和 「工时上限 (h)」。当点击「工单量上限 (个)」这一项时,下方出现一个输入框,用来填写工单量上限,此输入框只能输入大于等于0 的数字。当点击「工时上限 (h)」这一项时,下方出现一个输入框,用来填写工时上限,此输入框也只能输入大于等于0 的数字。当点击Submit按钮时,打印填充的值。

  • 以下代码是它的实现:

<template>
  <div>
    <Modal v-model="open" title="创建自动分配规则" footer-hide>
      <Form ref="autoAssignForm" :model="formData" :rules="formRules">
        <Form-item label="设计师" prop="designer" required>
          <Select v-model="formData.designer">
            <Option value="A">Option D</Option>
            <Option value="Option E">Option E</Option>
            <Option value="Option F">Option F</Option>
          </Select>
        </Form-item>
        <Form-item label="需求内容 (可多选)" prop="demand" required>
          <Select v-model="formData.demand" multiple>
            <Option value="Option A">Option A</Option>
            <Option value="Option B">Option B</Option>
            <Option value="Option C">Option C</Option>
          </Select>
        </Form-item>
        <Form-item>
          <Radio-group v-model="formData.taskLimitType">
            <Radio label="quantity">工单量上限 (个)</Radio>
            <Radio label="time">工时上限 (h)</Radio>
          </Radio-group>
        </Form-item>
        <Form-item prop="taskQuantityLimit" v-if="formData.taskLimitType === 'quantity'">
          <Input v-model.number="formData.taskQuantityLimit" placeholder="请输入" type="number" min="0" />
        </Form-item>
        <Form-item prop="taskTimeLimit" v-if="formData.taskLimitType === 'time'">
          <Input v-model.number="formData.taskTimeLimit" placeholder="请输入" type="number" min="0" />
        </Form-item>
      </Form>
      <Button @click="handleCancel">取消</Button>
      <Button @click="handleSubmit">确定</Button>
    </Modal>
  </div>
</template>

<script>
export default {
  props: {
    open: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      formData: {
        designer: '',
        demand: [],
        taskLimitType: 'quantity',
        taskQuantityLimit: 0,
        taskTimeLimit: 0,
      },
      formRules: {
        designer: [{ required: true, message: '请选择设计师', trigger: 'blur' }],
        demand: [{ required: true, message: '请选择需求内容', trigger: 'blur' }],
        taskQuantityLimit: [{ required: false }],
        taskTimeLimit: [{ required: false }],
      },
    }
  },
  methods: {
    handleCancel() {
      this.$emit('update:open', false)
    },
    handleSubmit() {
      this.$refs.autoAssignForm.validate(valid => {
        if (valid) {
          console.log(this.formData)
          this.$emit('update:open', false)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.auto-assign-modal {
 position: relative;  
}
</style>
  • 这个代码实现了基本了页面 UI ,但是交互逻辑没有实现出来,需要人工调整代码。实现复杂需求需要多次提问并修正,总的来说差强人意。

解释代码

案例三

  • 本例中先请它写一个 reduce 函数,然后再解释该函数逻辑。本例使用command+K 直接修改文件。

基于GPT-3.5模型的智能AI代码生成工具Cursor研究

基于GPT-3.5模型的智能AI代码生成工具Cursor研究

这是以 chat 模式让它逐行解释代码。

基于GPT-3.5模型的智能AI代码生成工具Cursor研究

这是以 文件写入 模式让它逐行解释代码。

基于GPT-3.5模型的智能AI代码生成工具Cursor研究

接受它的修改点击 Accept All,拒绝它的修改点击 Reject All

基于GPT-3.5模型的智能AI代码生成工具Cursor研究

  • 以下代码是它给出的结果。

   // 该函数用于将数组 arr 中的每个元素依次传入回调函数 callback 中进行处理,最终返回处理后的结果
   // 参数 arr:需要处理的数组
   // 参数 callback:回调函数,用于对数组中的元素进行处理
   // 参数 initialValue:初始值,可选
   function reduce(arr, callback, initialValue) {
     // 如果初始值未定义,则将累加器初始化为 undefined
     let accumulator = initialValue === undefined ? undefined : initialValue;
     // 遍历数组 arr 中的每个元素
     for (let i = 0; i < arr.length; i++) {
       // 如果累加器已定义,则将累加器和当前元素传入回调函数进行处理,并将处理结果赋值给累加器
       if (accumulator !== undefined) {
         accumulator = callback(accumulator, arr[i], i, arr);
       } else {
         // 如果累加器未定义,则将当前元素作为累加器的初始值
         accumulator = arr[i];
       }
     }
     // 返回累加器的最终值
     return accumulator;
   }

  • 实现函数很准确,可以直接用。即使是复杂函数,只要出入参数确定且表述精准。它也能完成的很好。

优化代码

案例四

  • 本例是基于 案例三 的优化。

基于GPT-3.5模型的智能AI代码生成工具Cursor研究

  • 优化后的代码如下:
      function reduce(arr, callback, initialValue) {
        let accumulator = initialValue;
        for (let i = 0; i < arr.length; i++) {
          accumulator = accumulator !== undefined ? callback(accumulator, arr[i], i, arr) : arr[i];
        }
        return accumulator;
      }
      
    

用户体验

  • 该软件外观与vscode大体一致,但肉眼可见的功能没有 vscode 多,用起来没有 vscode 丝滑,但无伤大雅。
  • 很棒的一点是,可以安装与 vscode 中一样的插件。

性能和稳定性

  • 其响应时间基本在1s内,挺快。
  • 其编写的功能代码有时不能直接使用,需要多次提问或自行修改。可以链接一个相关文档用以训练它。下图是贴链接的地方。

基于GPT-3.5模型的智能AI代码生成工具Cursor研究

安全性和隐私

  • 将软件改为本地模式就不会将代码上传到服务器能保证代码的安全。

基于GPT-3.5模型的智能AI代码生成工具Cursor研究

支持和维护

  • 需要支持和维护时,可以参考如下:

价格

  • 免费

    • 10次 GPT-4 总使用量
    • 每月 200 次 GPT-3.5 使用
  • 20美元/月

    • 每月 500 次 GPT-4 使用
    • 无限制使用 GPT-3.5
  • 企业版

    • 无限制的 GPT-4 使用
    • 无限制使用 GPT-3.5
    • 企业支持和安全
    • SOC2 合规性

优势和劣势

优势

  1. 写函数/枚举变量 等场景下能快速实现。
  2. 能解释代码,可用于学习源码或复杂代码。
  3. 它能看懂控制台报错,辅助调试。
  4. 它能自动修复 lint 错误。

劣势

  1. 实现复杂交互时,其实现的功能不太能符合需求。
  2. 它不太能组合 UI 库的各种特性来实现需求,需要人工调整。
  3. 目前一个提问貌似只能修改一个文件中的内容。如果一个功能需要同时修改两个文件,不好使,只能通过 chat 方式询问结果。

建议和结论

  • 推荐使用。用来写函数很方便。可以将复杂需求拆解后,用它来实现。有条件的话,结合 chatgpt 等各类工具一起来协助编码更好。
  • 体感没有 vscode 优越。也许安装上各类插件后有改善。
  • 目测提效10%~20%,对于不同的问题,由于复杂度/提问方式等多重因素,导致提问后得到的结果时好时坏。好结果可以直接拿来用。得到坏结果后需要多次提问反复修正,耗费时间,并不一定比手写快。
本网站的内容主要来自互联网上的各种资源,仅供参考和信息分享之用,不代表本网站拥有相关版权或知识产权。如您认为内容侵犯您的权益,请联系我们,我们将尽快采取行动,包括删除或更正。
AI教程

比特币娘化人物形象-萌娘化虚拟币

2023-12-21 12:43:14

AI教程

ChatGPT小程序接口对接教程

2023-12-21 12:49:14

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索