Cursor安装使用

Cursor 就是一个内置了人工智能（AI）的代码编辑器，一位 24 小时在线、不知疲倦、非常有耐心的编程导师。

:::warning
本质上是 VS Code 的一个“超级增强版”。它拥有 VS Code 几乎所有的功能，但在此基础上，它深度集成了强大的人工智能。

:::

准备好了吗？让我们一起打开新世界的大门！

---

Cursor 下载、安装与登录方法

要开始使用 Cursor，你首先需要下载安装包。Cursor 支持 Windows、macOS 和 Linux 等主流操作系统，下载安装步骤也非常简单：

1. 访问 Cursor 官网。
2. 在首页点击“Download”按钮，选择对应你操作系统的版本进行下载。

1. 下载完成后，按照提示完成安装流程。
2. 安装成功后，首次启动会提示你登录或注册 Cursor 账号。你可以选择使用邮箱注册，也可以通过 GitHub、Google 等第三方账号快捷登录。建议使用常用邮箱或常用账号注册，以便同步设置和项目。

登录成功后，你就可以像使用 VS Code 一样打开你的项目，体验 AI 编程助手带来的高效开发体验了。

Cursor 介绍：为什么我们需要它？

对于我们 Next.js 的学习者来说，Cursor 能带来什么好处呢？

1. 加速代码编写：当你想写一个新组件时，可以直接告诉 AI：“帮我创建一个带有名片功能的组件，需要有头像、姓名和简介”，它就能为你生成基础代码。
2. 快速理解代码：遇到看不懂的 Next.js 特有代码，比如 getStaticProps 或者一个复杂的 useEffect Hook，你只需要选中它，问 AI：“这段代码是做什么的？”，它就会用大白话给你解释清楚。
3. 高效调试 Bug：当你的页面报错或者某个功能不正常时，你可以把代码和错误信息一起发给 AI，它会帮你分析问题可能出在哪里，甚至直接给出修复方案。
4. 学习最佳实践：你可以问 AI：“如何优化我写的这个组件？”或者“在 Next.js 中处理表单的最佳方式是什么？”，它会教你更专业、更高效的写法。

---

界面讲解与基础设置

下载并安装好 Cursor 后，我们第一次打开它。界面看起来和 VS Code 很像，别担心，我们来快速熟悉一下它的主要工作区。

1. 文件浏览器 (File Explorer)：通常在最左侧。这里展示了你项目的所有文件和文件夹，比如 pages、components、styles 等。你需要编辑哪个文件，就从这里点击它。
2. 编辑器 (Editor)：占据中心最大面积的区域。这里就是你编写和阅读代码的地方。
3. 终端 (Terminal)：在底部。你可以在这里输入和执行命令，例如 npm run dev 来启动你的 Next.js 项目。
4. AI 聊天窗口 (AI Chat)：通常在右侧，或者通过快捷键打开。这是你和 AI “对话”的地方，我们后面会详细讲怎么用。

基础设置

为了让编码更舒服，我们先做一点个性化设置。

1. 按快捷键 Cmd + , (Mac) 或 Ctrl + , (Windows) 打开设置。
2. 设置主题：在搜索框输入 Theme，在 Color Theme 下拉菜单里选择一个你喜欢的主题，比如 Dark Modern (深色) 或 Light Modern (浅色)。深色主题对眼睛更友好。
3. 设置字体大小：在搜索框输入 Font Size，然后修改数字，把它调整到你觉得最清晰、最舒服的大小，比如 16 或 18。

这里就可以改成白色

调节字体

---

必要安装与配置

“插件”就像是给你的编辑器安装的“App”，能让它获得各种新能力。为了更高效地开发 Next.js，我们必须安装两个核心插件。

点击界面最左侧菜单栏的“积木”图标，进入插件市场。

1. Prettier - Code formatter

• 它是什么？ 一个代码格式化工具。它能自动帮你整理代码的缩进、换行和空格，让你的代码变得非常整洁、统一。
• 安装：在插件市场的搜索框里输入 Prettier，找到 Prettier - Code formatter，点击 Install (安装)。