研讨目的

跟着相似 chatgpt 的模型的问世，代码生成东西在软件开发领域敏捷鼓起。本文旨在研讨根据 GPT-3.5 模型开发的智能 AI 代码生成东西 Cursor 的运用价值和对程序员的效率提高及工作体会的影响。

摘要

本文将重点关注 Cursor 的功用、运用体会和作用，评估 Cursor 在实际开发环境中的体现。研讨成果将为开发人员供给有关 Cursor 的具体洞悉，以便更好地了解该东西的潜在价值和适用性。

调研方法

自己试用
阅览官方文档
阅览市面上介绍本软件的文章

软件概述

此软件想要解决的核心痛点是：在专为与 AI 进行结对编程而设计的 IDE 中更快地构建软件
支撑多种编程言语，如 Python, Java, C#, JavaScript 等
它能编写、重构、解说和优化代码

根本运用

下载后，用该软件翻开文件。根据提示，先选中代码，按 command+L 能够对选中的代码进行发问，发问后的成果会呈现在右侧。先选中代码，按 command+K 能够对选中的代码直接进行修正。两种功用在后文中都有演示。

什么？你还没用过 Cursor？试用智能 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 直接修正文件。

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

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

承受它的修正点击 Accept All,拒绝它的修正点击 Reject All

以下代码是它给出的成果。


   // 该函数用于将数组 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;
   }

完成函数很精确，能够直接用。即使是杂乱函数，只需收支参数确认且表述精准。它也能完成的很好。

优化代码

事例四

本例是根据 事例三 的优化。

优化后的代码如下：

  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内，挺快。
其编写的功用代码有时不能直接运用，需求屡次发问或自行修正。能够链接一个相关文档用以练习它。下图是贴链接的地方。

安全性和隐私

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

支撑和维护

需求支撑和维护时，能够参阅如下：

文档
社区

价格

免费
- 10次 GPT-4 总运用量
- 每月 200 次 GPT-3.5 运用

20美元/月
- 每月 500 次 GPT-4 运用
- 无限制运用 GPT-3.5
企业版
- 无限制的 GPT-4 运用
- 无限制运用 GPT-3.5
- 企业支撑和安全
- SOC2 合规性

优势和劣势

优势

写函数/枚举变量等场景下能快速完成。
能解说代码，可用于学习源码或杂乱代码。
它能看懂控制台报错，辅助调试。
它能主动修复 lint 错误。

劣势

完成杂乱交互时，其完成的功用不太能符合需求。
它不太能组合 UI 库的各种特性来完成需求，需求人工调整。
目前一个发问貌似只能修正一个文件中的内容。假如一个功用需求同时修正两个文件，不好使，只能经过 chat 方法问询成果。

建议和结论

引荐运用。用来写函数很便利。能够将杂乱需求拆解后，用它来完成。有条件的话，结合 chatgpt 等各类东西一起来协助编码更好。
体感没有 vscode 优越。或许安装上各类插件后有改善。
目测提效10%～20%，对于不同的问题，因为杂乱度/发问方法等多重要素，导致发问后得到的成果时好时坏。好成果能够直接拿来用。得到坏成果后需求屡次发问反复修正，消耗时刻，并不一定比手写快。

什么？你还没用过 Cursor？试用智能 AI 代码生成工具 Cursor 后，我惊呼：太香了吧！

研讨目的

摘要

相关信息

调研方法

软件概述

根本运用

功用特色

编写代码

事例一

重构代码

事例二

解说代码

事例三

优化代码

事例四

用户体会

性能和稳定性

安全性和隐私

支撑和维护

价格

优势和劣势

优势

劣势

建议和结论

作者信息

什么？ 你还没用过 Cursor？试用智能 AI 代码生成工具 Cursor 后，我惊呼：太香了吧！

研讨目的

摘要

相关信息

调研方法

软件概述

根本运用

功用特色

编写代码

事例一

重构代码

事例二

解说代码

事例三

优化代码

事例四

用户体会

性能和稳定性

安全性和隐私

支撑和维护

价格

优势和劣势

优势

劣势

建议和结论

相关文章

BugBuilder: 高质量大规模缺陷库自动构建方法

五音不全？手把手教你用自己声音唱任何歌；最详细的Auto-GPT整理；4月AI绘画模型推荐；HayoAI平台简直太酷了 | ShowMeAI日报

阿里（淘天）一面笔试算法原题

SpringBoot自定义注解+AOP+redis实现防接口幂等性重复提交，从概念到实战

作者信息

什么？你还没用过 Cursor？试用智能 AI 代码生成工具 Cursor 后，我惊呼：太香了吧！