Cursor 使用及经验分享

# Cursor使用及经验分享

cursor是一款基于VSCode的AI优先编辑器，如果你还没有体验过它，我强烈建议看完这篇，因为cursor真的在改变编程游戏的规则。在了解cursor前，可以先思考一下我们日常在编程环节都做哪些事情，我日常开发中，占据绝大多少的是：

1. 写代码

2. 读代码

3. 调试代码

4. 查文档

5. 搜索代码

6. 学习新技术

7. 优化代码，重构代码

 

以上环节，cursor都能帮你高效完成。cursor是一款免费的AI代码编辑器，其内置了强大的大语言模型，能理解你的自然语言，生成、解释和优化代码。它的功能远不止代码补全，还能直接从你的需求中生成完整的函数、类，甚至整个文件。

 

## 一、准备工作

### （一）注册登录

打开cursor官网，下载对应系统的安装包，安装完成后打开cursor，你会看到注册登录界面，注册登录后即可使用。

 

### （二）模型选择

cursor内置了多种模型，免费用户默认使用的是cursor - small模型，这个模型对于一般的代码生成、解释等功能基本够用。如果你想要使用更强大的模型，比如claude - 3.5、gpt 4等，需要升级为pro用户。不同模型的能力和调用次数限制如下：

1. claude - 3.5、gpt 4等都是高级大模型，pro用户有500次调用次数，免费用户50次。

2. cursor - small、gpt 4 - mini等低级点的模型，pro用户无限制调用，免费用户有500次调用次数。

 

### （三）配置个性化指令

在使用cursor前，我们可以配置一些个性化指令，让它生成的代码更符合我们的需求。点击cursor编辑器左下角的齿轮图标，选择“Settings”，在搜索框中输入“cursor.chat.template”，你可以在“User settings”中配置自己的个性化指令。例如：

```

You are a Senior Front - End Developer and an Expert in Vue.js, JavaScript, TypeScript, HTML, and CSS. You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

 - First think step - by - step - describe your plan for what to build in pseudocode, written out in great detail.

 - Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines.

 - Focus on easy and readability code, over being performant.

 - Leave NO todo’s, placeholders or missing pieces.

 - Be concise Minimize any other prose.

 - If you do not know the answer, say so, instead of guessing.

 - Use early returns whenever possible to make the code more readable.

 - Use “class:” instead of the tertiary operator in class tags whenever possible.

 - Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.

 - Implement accessibility features on elements. For example, a tag should have a tabindex = “0”, aria - label, on:click, and on:keydown, and similar attributes.

 - Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.

```

这样配置后，cursor生成的前端代码会更规范，更符合我们的开发习惯。

 

## 二、使用技巧

### （一）快速生成代码

1. 最基本的，通过快捷键Ctrl + L（Windows/Linux）或者Cmd + L（Mac）调出对话窗口，在窗口中输入你想要生成的代码描述，比如“用JavaScript写一个函数，计算两个数的和”，cursor会很快生成对应的代码：

```javascript

function addNumbers(num1, num2) {

    return num1 + num2;

}

```

2. 如果你正在开发一个React项目，想要生成一个带有状态和方法的组件，你可以这样描述“用React和TypeScript创建一个名为Counter的组件，包含一个count状态和一个增加count的方法”，cursor会生成类似这样的代码：

```typescript

import React, { useState } from'react';

 

interface CounterProps {}

 

const Counter: React.FC<CounterProps> = () => {

    const [count, setCount] = useState(0);

 

    const incrementCount = () => {

        setCount(count + 1);

    };

 

    return (

        <div>

            <p>Count: {count}</p>

            <button onClick={incrementCount}>Increment</button>

        </div>

    );

};

 

export default Counter;

```

### （二）代码解释

当你遇到一段不太理解的代码时，选中这段代码，然后按下Alt + I（Windows/Linux）或者Option + I（Mac），cursor会在对话窗口中给出这段代码的解释。比如你选中下面这段JavaScript代码：

```javascript

const arr = [1, 2, 3, 4, 5];

const sum = arr.reduce((acc, current) => acc + current, 0);

```

cursor可能会解释为：“这段代码创建了一个包含数字1到5的数组`arr`。然后使用`reduce`方法对数组中的所有元素进行累加。`reduce`方法接受两个参数，第一个参数是一个回调函数，该回调函数接受两个参数`acc`（累加器）和`current`（当前值），在每次迭代中，`acc`加上`current`并返回新的`acc`值。第二个参数`0`是初始累加器的值。最终，`sum`的值为数组中所有元素的和，即15。”

 

### （三）代码优化

假设你写了一段性能不太好的代码，比如下面这个计算斐波那契数列的JavaScript函数：

```javascript

function fibonacci(n) {

    if (n <= 1) {

        return n;

    } else {

        return fibonacci(n - 1) + fibonacci(n - 2);

    }

}

```

这段代码存在大量重复计算，效率很低。你可以选中这段代码，然后在对话窗口中输入“优化这段计算斐波那契数列的代码”，cursor可能会给出优化后的代码，使用动态规划的方法来提高效率：

```javascript

function fibonacci(n) {

    if (n <= 1) {

        return n;

    }

    let fib = new Array(n + 1);

    fib[0] = 0;

    fib[1] = 1;

    for (let i = 2; i <= n; i++) {

        fib[i] = fib[i - 1] + fib[i - 2];

    }

    return fib[n];

}

```

### （四）Composer功能

Composer是Cursor的特色功能，它的功能就是在一个对话窗口里同时对多个文件进行修改。你可以在这里输入一个分步骤、涉及多文件的复杂修改，而后Composor会同时生成涉及到的文件的所有修改。为了更方便地向大语言模型提供上下文信息，Cursor内设了不同地`@`注记，使用`@`注记能够方便地注入不同类型的上下文信息到你的对话里。

1. `@File`注记可以指定你想要操作的文件，比如你在开发一个Node.js项目，有`app.js`和`utils.js`两个文件，你想在`app.js`中引入`utils.js`中的一个函数，你可以在对话窗口中输入“在@File(app.js)中引入@File(utils.js)中的calculateSum函数”。

2. `@Function`注记用于指定某个函数，假如`utils.js`中有多个函数，你只想对`calculateSum`函数进行修改，你可以用`@Function(calculateSum in utils.js)`来精准定位。

3. `@Code`注记提供更精确的代码片段，`@`注记的使用都大同小异，会弹出相应的检索框，你输入关键词后在索引列表中选择相应的代码块即可。

 

不过有个小缺点得提一嘴，虽然这个Composer功能听起来很厉害，但因为Cursor官方没公开透明具体的实现法子，它自个也没调好，实际上使用效果忽好忽差的。

 

### （五）`@`注记的其他使用场景

1. `@Docs`注记，这个超实用！比如你在写JavaScript代码，记不清`map`方法怎么用了，你可以在对话窗口中输入“@Docs(map method in JavaScript)”，cursor会直接给出`map`方法的详细文档和示例代码，不用再去浏览器里搜啦。

2. `@Web`注记，如果你遇到问题想偷懒不打开网页搜报错或是大模型自身的回答无法解决问题，你可以直接使用这个注记。比如你在运行代码时遇到一个报错“TypeError: Cannot read property 'length' of undefined”，你可以在对话窗口中输入“@Web(TypeError: Cannot read property 'length' of undefined)”，cursor会在网上搜索相关解决方案并展示给你。

3. `@Git`注记，感觉比较适合在代码协作的时候查战犯清算的时候使用。比如说你想知道某个文件的某次修改是谁提交的，你可以在对话窗口中输入“@Git(who changed @File(app.js) at this line in the commit history)”，它就会去查git记录然后告诉你相关信息。

 

## 三、cursor的杀手锏能力

1. 对于前端来说，很多linux命令，我们不常用，有时候也会使用但总是记不起来，需要查阅文档，在cursor中，我们直接在终端按下cmd + k，就可以唤起对话，描述出要做的事情来询问对应的命令是什么，AI会帮我们找到命令，然后输入到命令行。比如你想知道如何在当前目录下创建一个新的文件夹，你在终端唤起对话后输入“在当前目录创建一个新文件夹的命令”，AI可能会返回“mkdir new - folder”并自动输入到命令行。

2. 除此之外，我们还可以使用它来生成commit信息，先在终端中，输入‘git diff | cat’，获取最近的修改，然后cmd + k，在提示栏中输入‘git commit message’，Cursor会给你生成一个带commit message的git commit命令。例如它可能生成“git commit -m 'Fix a bug in the login function'”。

3. review目前可能没有那么强大，我的方式是多问几次，三次左右，来保证潜在问题都被AI发现，最后自己再review一遍。你可以选中要review的代码，然后在对话窗口中输入“review this code”，AI会给出一些建议，比如代码风格是否符合规范、是否存在潜在的性能问题等。

4. 当我们在代码报错后，鼠标移入会有AIFIx按钮，或者终端报错，我们选中报错，会有Add to Chat按钮，我们可以在对话中进行报错询问。比如你在运行一个Python程序时出现“SyntaxError: invalid syntax”的报错，选中报错信息后点击Add to Chat，然后在对话窗口中，AI会尝试帮你分析错误原因并给出解决方案。

5. 预测你的下一步，它会猜你下一步做什么，并且把光标放到合适的位置，让你真正一路tab。比如说你在写一个HTML表单，当你输入完`<input type="text" name="username">`后，按下tab键，它可能会自动帮你补全`<label for="username">Username:</label>`，并且把光标定位到合适的位置，方便你继续编写。

 

## 四、实际应用案例

1. **学习源码、新技术、框架等等**：通过cursor的超强能力，我们可以拉取一个源码到cursor中，渐进的询问当前项目的问题，我们想要询问编程概念问题；获取代码建议和最佳实践；调试和错误排查的时候我们可以通过cmd + L唤起对话框来进行连续提问。例如你想学习Vue.js的源码，你把Vue.js的源码项目导入到cursor中，然后就可以在对话框中问“Vue.js的响应式原理是如何实现的”“这个函数在整个Vue.js框架中的作用是什么”等问题，cursor会结合源码给你解答。

2. **做项目、写项目文档**：在做项目过程中，从项目初始化到具体功能实现，都可以借助cursor。比如你要开发一个简单的电商网站，在项目初始化阶段，你可以问“用Node.js和Express搭建一个电商网站项目的基本结构”，cursor会给出项目的目录结构以及一些基础文件的代码。在实现商品列表展示功能时，你可以描述“创建一个商品列表页面，从数据库中获取商品数据并展示在页面上”，它会帮你生成相关代码。而且在写项目文档时，你也可以让cursor帮忙，比如你输入“为这个电商网站项目写一个简单的技术文档大纲”，它会生成一个包含项目概述、技术选型、功能模块等内容的大纲。

3. **重构代码**：假设你接手了一个老项目，代码结构混乱，需要重构。你可以选中要重构的代码部分，然后在对话窗口中输入“重构这段代码，使其结构更清晰”，cursor会根据代码的功能和上下文给出重构后的代码。例如有一段嵌套了多层if - else语句的代码，经过cursor重构后，可能会变成使用策略模式或者更简洁的条件判断方式，让代码可读性大大提高。

4. **利于@Docs能力，建立自己的知识索引库**：前面提到了@Docs注记可以快速获取各种技术文档，我们可以利用这个功能，把平时常用的技术文档整理起来。比如你经常使用React、Redux、Axios等技术，你可以创建一个文档文件，在里面记录各种常用API的@Docs查询语句，以后需要查看某个API的文档时，直接在cursor中输入对应的@Docs语句就能快速找到，相当于建立了一个属于自己的便捷知识索引库。

5. **写小工具网站，快速想法变为现实**：例如：在线工具库，导航网站等等，这对有想法的产品经理来说是福音，他们可以快速把自己想法变成现实。假如你想做一个简单的在线图片压缩工具，你可以在cursor中描述“创建一个在线图片压缩工具的前端页面，使用HTML、CSS和JavaScript，并且调用某个图片压缩API来实现压缩功能”，cursor会帮你生成前端页面的代码框架，以及如何调用API的相关代码示例，大大加快了你将想法转化为实际产品的速度。