【早阅】Cursor AI：5个可能还没用过的高级功能

作者：@Vishwas Gopinath
原文：https://www.builder.io/blog/cursor-advanced-features

背景

Cursor AI 是一款基于AI的代码编辑器，提供了诸如代码补全、代码生成、聊天功能和代码编排等强大功能。最近，Cursor AI 进一步推出了一些高级功能，这些功能极大地提升了开发者的生产力和效率。

要点

Cursor AI 的高级功能包括：Cursor Agent、.cursorrules 文件、Notepads、Bug Finder、@Web 符号、AI 生成的提交信息，以及将 Figma 设计转换为代码的功能。这些功能不仅增强了代码编辑的智能化，还为开发者提供了更高效的工作流程。

分析

1、Cursor Agent

这是一个 AI 编码助手，可以通过快捷键 ⌘. 调用。它可以自动获取上下文、运行终端命令、创建和修改文件、进行语义代码搜索以及处理文件操作。目前，它仅支持 Claude 模型，并且每个工具操作都会计入配额。

2、.cursorrules 文件

这是一个项目特定的配置文件，允许开发者为 Cursor AI 提供项目特定的指令。它类似于 Cursor 设置中的 “AI 规则”，但仅适用于当前项目。通过这个文件，开发者可以定义代码风格、命名约定、TypeScript 使用规则等，确保代码的一致性和质量。

.cursorrules 文件就像为 Cursor AI 量身定制的 “使用说明书”，让它更了解你的项目需求和编码风格，从而提升其工作效率。

【第2911期】揭秘OpenAI新神器：Cursor源码深度解析与应用探索

.cursorrules 文件如何提升 Cursor 效能的详细说明：

• 提供项目特定指令：.cursorrules 文件可以包含项目特定的代码规范、命名约定、技术栈偏好等信息。这使得 Cursor AI 能够更好地理解你的项目背景，生成更符合项目要求的代码，避免不必要的修改和调整。

• 提高代码生成质量：通过 .cursorrules 文件，你可以指导 Cursor AI 使用特定的代码风格和结构、语法和格式，甚至 UI 和样式规范。这有助于确保生成的代码符合你的预期，减少人工干预和代码审查工作量。

• 定制 AI 行为：你可以使用 .cursorrules 文件来微调 Cursor AI 的行为，例如调整 AI 生成的提交信息的长度和风格。这可以使 Cursor AI 更好地适应你的个人工作流程和偏好，提升你的开发效率。

总而言之，.cursorrules 文件就像一个 “个性化” 工具，帮助你根据项目需求定制 Cursor AI 的行为，使其更 “聪明” 地工作，从而提升开发效率和代码质量。

在 Next.js 项目中定义的示例

 You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind CSS.

 Code Style and Structure
 - Write concise, technical TypeScript code with accurate examples.
 - Use functional and declarative programming patterns; avoid classes.
 - Prefer iteration and modularization over code duplication.
 - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
 - Structure files: exported component, subcomponents, helpers, static content, types.

 Naming Conventions
 - Use lowercase with dashes for directories (e.g., components/auth-wizard).
 - Favor named exports for components.

 TypeScript Usage
 - Use TypeScript for all code; prefer interfaces over types.
 - Avoid enums; use maps instead.
 - Use functional components with TypeScript interfaces.

 Syntax and Formatting
 - Use the "function" keyword for pure functions.
 - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
 - Use declarative JSX.

 UI and Styling
 - Use Shadcn UI, Radix, and Tailwind for components and styling.
 - Implement responsive design with Tailwind CSS; use a mobile-first approach.

 Performance Optimization
 - Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
 - Wrap client components in Suspense with fallback.
 - Use dynamic loading for non-critical components.
 - Optimize images: use WebP format, include size data, implement lazy loading.

 Key Conventions
 - Use 'nuqs' for URL search parameter state management.
 - Optimize Web Vitals (LCP, CLS, FID).
 - Limit 'use client':
   - Favor server components and Next.js SSR.
   - Use only for Web API access in small components.
   - Avoid for data fetching or state management.

 Follow Next.js docs for Data Fetching, Rendering, and Routing.

3、Notepads

这是 Cursor 中的一个增强型便签功能，类似于代码中的 “超级便利贴”，弥合了编辑器和聊天交互之间的差距。开发者可以在不同的开发环境中共享这些便签，使用 @ 语法引用它们，并附加文件。Notepads 非常适合用于记录项目架构决策、开发指南、可重用的代码模板等。

【第2899期】Cursor代码编辑器简单入门

特点

• 可以在开发环境的不同部分之间共享

• 使用 @ 语法引用

• 附加文件

• 用作各种场景的动态模板

创建方式

• 点击记事本部分的 “+”

• 为其命名

• 添加必要的内容、上下文或文件

引用方式

• 在编辑器或聊天中使用 @ 符号引用记事本

用途

• 记录项目架构决策

• 制定开发指南

• 创建可重用的代码模板

• 记录团队特定规则

• 存储常用参考材料

建议

• 使用清晰的标题

• 使用 Markdown 提高可读性

• 包含示例或文件附件

尽管仍处于测试阶段，但记事本已经成为增强工作流程的超级灵活工具。

4、Bug Finder

这是一个代码扫描工具，可以自动检测代码中的潜在错误，并提供修复建议。虽然它的定价模式是按点击付费，但对于快速定位和修复错误非常有帮助。

特点

• 在功能分支上，会与主分支进行比较以查找错误

• 为每个发现的错误提供置信度评级和概述

• 一键修复编辑器中的错误

• Cursor 会填写提示中的所有详细信息并生成更新

尽管存在警告信息和按点击付费的定价模式，但它仍然是一个非常方便的工具。

5、@Web 符号

这个功能允许 Cursor 根据提供的查询和上下文进行网络搜索，并将搜索结果添加到查询的上下文中。@Web 符号对于使用新技术或需要最新信息的情况非常有用。

工作原理

• 提供查询和一些上下文

• Cursor 将其转换为网络搜索

• 在互联网上搜索相关信息

• 将搜索结果添加到查询的上下文中

6、AI 生成的提交信息

Cursor 可以自动生成提交信息，减少了开发者编写提交信息的时间和精力。虽然生成的信息有时可能过于冗长，但可以通过 .cursorrules 文件进行调整。

7、将 Figma 设计转换为代码并在 Cursor 中使用

通过 Builder.io 的 Visual Copilot 插件，开发者可以将 Figma 设计直接转换为代码。这个功能极大地加速了从设计到代码的转换过程，并确保生成的代码与设计一致。

以下是操作步骤：

• 使用 Visual Copilot 插件导出 Figma 设计。

• 从 Builder.io 複制生成的指令。

• 将该指令直接粘贴到 Cursor 的终端机并生成代码。

然后，可以指示 Cursor 添加交互性、动画、事件处理程序等等。它将生成您需要的所有代码。结果是您将获得一个像素完美的 UI，并按预期使用你的组件。从设计到功能代码的整个过程比手动操作要快得多。

影响

这些高级功能显著提升了开发者的生产力，减少了手动操作的时间，并提高了代码的质量和一致性。特别是对于团队协作项目，这些功能可以帮助团队成员更好地遵循项目规范，减少沟通成本。此外，Bug Finder 和 @Web 符号等功能也为开发者提供了更智能的错误检测和信息获取方式，进一步提升了开发效率。

结论

Cursor AI 的高级功能展示了人工智能在代码编辑器中的巨大潜力。通过这些功能，开发者可以更高效地编写、调试和管理代码，从而加速软件开发过程。未来，随着这些功能的进一步优化和扩展，Cursor AI 有望成为开发者工具箱中的核心工具之一。

😀 每天只需花五分钟即可阅读到的技术资讯，加入【早阅】共学，可联系 vx：zhgb_f2er

5 分钟新知：了解技术资讯的一种方式。

🚀可直接通过阅读原文了解详细内容。