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

背景

图片
Cursor AI，一款基于AI的代码编辑器，近期推出了包括Cursor Agent、.cursorrules文件、Notepads、Bug Finder、@Web符号、AI生成的提交信息以及将Figma设计转换为代码等高级功能。这些功能不仅增强了代码编辑的智能化，还为开发者提供了更高效的工作流程。其中，Cursor Agent是一个AI编码助手，可以通过快捷键调用，自动获取上下文、运行终端命令、创建和修改文件、进行语义代码搜索以及处理文件操作。.cursorrules文件是一个项目特定的配置文件，允许开发者为Cursor AI提供项目特定的指令，定义代码风格、命名约定、TypeScript使用规则等，确保代码的一致性和质量。

 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 非常适合用于记录项目架构决策、开发指南、可重用的代码模板等。 特点：

  • 可以在开发环境的不同部分之间共享
  • 使用 @ 语法引用
  • 附加文件
  • 用作各种场景的动态模板 创建方式：
  • 点击记事本部分的 “+”
  • 为其命名
  • 添加必要的内容、上下文或文件 引用方式：
  • 在编辑器或聊天中使用 @ 符号引用记事本 用途：
  • 记录项目架构决策
  • 制定开发指南
  • 创建可重用的代码模板
  • 记录团队特定规则
  • 存储常用参考材料 建议：
  • 使用清晰的标题
  • 使用 Markdown 提高可读性
  • 包含示例或文件附件 尽管仍处于测试阶段，但记事本已经成为增强工作流程的超级灵活工具。
4、Bug Finder

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

  • 在功能分支上，会与主分支进行比较以查找错误
  • 为每个发现的错误提供置信度评级和概述
  • 一键修复编辑器中的错误
  • Cursor 会填写提示中的所有详细信息并生成更新 尽管存在警告信息和按点击付费的定价模式，但它仍然是一个非常方便的工具。
5、@Web 符号

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

  • 提供查询和一些上下文
  • Cursor 将其转换为网络搜索
  • 在互联网上搜索相关信息
  • 将搜索结果添加到查询的上下文中
6、AI 生成的提交信息

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

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

以下是操作步骤：

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

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

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

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

影响

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

结论

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

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

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

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