【Cursor教程】探索Cursor颠覆编程体验的创新工具！教程+示例+快捷键

z千鑫

已于 2024-10-10 15:46:20 修改

阅读量432

点赞数 12

分类专栏： AI领域文章标签： cursor 人工智能开发语言 AI编程 AI工作流 ai codemoss能用AI

于 2024-10-10 15:40:39 首次发布

本文链接：https://blog.csdn.net/zhouzongxin94/article/details/142822547

版权

AI领域专栏收录该内容

55 篇文章 1 订阅

订阅专栏

文章目录

在当今技术飞速发展的时代，编程工具的选择对开发者的工作效率和体验至关重要。最近，Cursor这一工具引起了广泛的关注。起初，我以为它只是一个普通的代码编辑器，增加了一些基于大型语言模型（LLM）的辅助功能。然而，当我亲自测试后，发现它的潜力远超我的预期！仅用不到5分钟，我就通过自然语言指令完成了一个支付功能页面的构建（文末附有详细制作过程）。这让我不禁思考，李彦宏所提到的“人人都是开发者”的时代，是否真的已经来临？
在这里插入图片描述

Cursor的全新定义

Cursor 是一款集成了多种先进模型（如Claude-3.5-Sonnet、GPT-4等）的智能编辑器。值得注意的是，Cursor在国内也可以直接使用，并且支持多种编程语言，包括Python、Java、C#等。此外，它可以在多个平台上安装，极大地提升了开发者的灵活性。Cursor不仅限于代码编写，还支持聊天、写作等多种功能，全面提升了开发者的工作效率和体验。

Cursor在大型语言模型的加持下，类似于GitHub的Copilot和百度的文心快码，但它的独特之处在于其用户友好的界面和强大的功能集成。Cursor的主要亮点包括：

完美继承VS Code的强大功能与界面：
- Cursor几乎完全复刻了VS Code的用户界面，并深度集成了如GPT等大型模型，能够无缝融入包括IntelliJ IDEA、Visual Studio Code和GitHub在内的主流开发环境。
轻量级设计，启动迅速，提升编程效率：
- Cursor的轻量级设计使其启动速度极快，能够显著提升编程效率，减少开发者的等待时间。

目前，Cursor的开发公司Anysphere已经吸引了OpenAI、Midjourney、Perplexity等知名企业作为客户，进一步证明了Cursor产品的价值和实用性。同时，它也受到了全球开发者的广泛喜爱，赢得了众多好评。

Cursor的灵活订阅模式

这个在之前的文章讲过，在这里：【前端必读】如何免费无限使用Cursor：AI编程工具的终极指南！

使用Cursor轻松创建支付页面

接下来，我将分享如何通过Cursor快速创建一个支付页面的具体步骤：

按下快捷键 Ctrl + K 唤醒编辑功能。

输入以下自然语言指令：

# 创建一个简单的支付页面，包括姓名、手机号、支付方式、支付金额，支付方式包含微信支付和支付宝支付，简洁、高级，用乔布斯的风格设计

在这里插入图片描述

生成代码：
- Cursor将自动生成支付页面的代码。


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付页面</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f7;
            color: #1d1d1f;
        }

        .payment-form {
            background-color: white;
            padding: 40px;
            border-radius: 18px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            width: 320px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h2 {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 30px;
            text-align: center;
        }

        form {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        input,
        select,
        button {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            box-sizing: border-box;/ 添加这一行
        }

        input,
        select {
            background-color: #f5f5f7;
            -webkit-appearance: none;/ 添加这一行 -moz-appearance: none;/ 添加这一行 appearance: none;/ 添加这一行
        }

        select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 30px; // 为下拉箭头留出空间
        }

        button {
            background-color: #0071e3;
            color: white;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0077ed;
        }
</style>
</head>

<body>
    <div class="payment-form">
        <h2>支付</h2>
        <form>
            <input type="text" placeholder="姓名" required>
            <input type="tel" placeholder="手机号码" required>
            <select required>
                <option value="">选择支付方式</option>
                <option value="wechat">微信支付</option>
                <option value="alipay">支付宝支付</option>
            </select>
            <input type="number" placeholder="支付金额" required>
            <button type="submit">确认支付</button>
        </form>
    </div>
</body>

</html>

生成的页面效果非常不错，设计风格也非常符合现代审美，确实让人惊艳。
在这里插入图片描述

Cursor的快捷键使用指南

为了提升使用体验，Cursor还提供了一系列快捷键支持，方便用户快速操作。以下是一些常用的快捷键：

Ctrl + K：唤醒编辑功能
Ctrl + S：保存当前文件
Ctrl + Z：撤销上一步操作
Ctrl + Y：恢复上一步撤销的操作
Ctrl + F：在当前文件中查找内容
Ctrl + H：在当前文件中替换内容
Ctrl + C：复制选中内容
Ctrl + V：粘贴内容
Ctrl + X：剪切选中内容

掌握这些快捷键将大大提高你的工作效率，让你在编程过程中更加得心应手。
在这里插入图片描述

Cursor的未来展望

随着技术的不断进步，Cursor的功能也在不断扩展。未来，我们可以期待更多的集成功能，如与云服务的无缝对接、智能代码审查等。这将进一步提升开发者的工作效率，推动“人人都是开发者”的理念落到实处。

此外，Cursor还可能引入更多的社区功能，让开发者能够分享自己的代码片段和项目，互相学习和借鉴。这将为开发者提供一个更为广阔的交流平台，促进技术的传播和创新。

Cursor的实际应用案例

为了更好地理解Cursor的强大功能，我们来看几个实际应用案例：

案例一：快速原型开发

在初创企业中，时间就是金钱。开发团队常常面临着需要迅速开发原型以展示给投资者的压力。使用Cursor，团队成员可以通过自然语言指令快速生成所需的功能模块，从而显著节省开发时间。

示例

假设团队需要开发一个简单的用户注册页面。开发者只需输入以下指令：

# 创建一个用户注册页面，包括用户名、密码、邮箱和注册按钮，设计简洁现代

Cursor会自动生成相应的HTML和CSS代码，开发者可以直接在项目中使用，极大地加快了原型开发的速度。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>用户注册</h1>
        <form>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required>
            
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required>
            
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" required>
            
            <button type="submit">注册</button>
        </form>
    </div>
</body>
</html>

通过这种方式，团队能够在短时间内创建出一个功能齐全的原型，帮助他们更好地与投资者沟通。

案例二：教育培训

在编程培训课程中，教师可以利用Cursor帮助学生快速理解代码的结构和逻辑。通过自然语言指令，学生可以看到即时反馈，增强学习的互动性和趣味性。

示例

假设教师希望学生理解如何创建一个简单的计算器。教师可以输入以下指令：

# 创建一个简单的计算器，支持加法、减法、乘法和除法

Cursor将生成相应的Python代码，学生可以立即运行并观察结果。

def calculator():
    operation = input("选择操作 (+, -, *, /): ")
    num1 = float(input("输入第一个数字: "))
    num2 = float(input("输入第二个数字: "))

    if operation == '+':
        print(f"{num1} + {num2} = {num1 + num2}")
    elif operation == '-':
        print(f"{num1} - {num2} = {num1 - num2}")
    elif operation == '*':
        print(f"{num1} * {num2} = {num1 * num2}")
    elif operation == '/':
        print(f"{num1} / {num2} = {num1 / num2}")
    else:
        print("无效的操作")

calculator()

通过这种方式，学生不仅能快速看到代码的实现，还能通过实际操作加深对编程逻辑的理解。

案例三：企业内部工具开发

许多企业需要定制化的内部工具，以提高工作效率。使用Cursor，开发者可以快速开发出符合需求的应用程序，减少开发周期。

示例

假设企业需要一个简单的任务管理工具。开发者可以输入以下指令：

# 创建一个任务管理工具，支持添加、查看和删除任务

Cursor将生成相应的JavaScript代码，开发者可以直接在项目中使用。

let tasks = [];

function addTask(task) {
    tasks.push(task);
    console.log(`任务 "${task}" 已添加！`);
}

function viewTasks() {
    console.log("当前任务列表：");
    tasks.forEach((task, index) => {
        console.log(`${index + 1}. ${task}`);
    });
}

function deleteTask(index) {
    if (index > 0 && index <= tasks.length) {
        const removedTask = tasks.splice(index - 1, 1);
        console.log(`任务 "${removedTask}" 已删除！`);
    } else {
        console.log("无效的任务编号！");
    }
}

// 示例操作
addTask("完成项目报告");
addTask("参加团队会议");
viewTasks();
deleteTask(1);
viewTasks();