Cursor13个神功能

#AI编程 #Cursor13个神功能 #Cursor

文章内容概要

前端程序员在AI编程辅助插件或IDE中GitHub Copilot使用得较为广泛,而前期GitHub Copilot 是需购买才能使用,当前已经免费了(可喜可贺),但很多程序员在使用了Cursor之后,果断停止了GitHub Copilot的付费,转投Cursor,且很多使用者大都认为选择Cursor是非常的值得。本文将逐一介绍Cursor AI编辑器的13使用神功能,AI代码补全质量远超预期

一、背景

Cursor背景

GitHub Copilot这个VSCode插件目前下载量我看了目前✔下载量:31,289,638 (3千万+),GitHub Copilot是一个AI pair程序员工具,可以帮助你更快更智能地编写代码,1个月前已经免费。从下载量来看还是非常受欢迎,但从解决问题的能力、实用功能、智能程度 等角度去评选,我还是推荐首选Cursor。我在使用Cursor的第一次,就快速完成了一个组件的重构,比预期快了好几倍。

二、Cursor 13个神功能

绝对不是Cursor惊艳的界面设计,而是它的确好用!能够解决我们日常开发中遇到的诸多问题与痛点。

相信这13个神仙功能可以提升协助大家提升开发效率,Cursor确确实实改变了我对AI编程的认知,其中AI代码补全功能是我最喜欢的功能,说实话,刚使用的时候确有被震撼到,补全代码的质量刷新认知。

1.多行批量编辑

在VSCode中,修改一系列相似的代码块:

  1. 使用多光标(Cmd/Ctrl + D)逐个选中多行
  2. 或使用正则查找替换

对比,Cursor:

代码语言:javascript代码运行次数:0运行复制
   // 原代码
   const zhang = new Person("zhang").id(500);
   const li = new Person("li").id(501);
   const wang = new Person("wang").id(502);
   const tang = new Person("tang").id(503);
   
   // 只需要在第一行添加 "MR.",Cursor就能快速理解你的意图
   // 自动为所有相似结构添加相同的修改
   const zhang = new Person("MR.zhang").id(500);
   const li = new Person("MR.li").id(501);
   const wang = new Person("MR.wang").id(502);
   const tang = new Person("MR.tang").id(503);
2.自动规范代码

真正让我眼前一亮的是Cursor的"Smart Rewrites"功能,除了智能纠正拼写错误,更能自动优化代码格式规范,让代码质量显著提升,美化代码,效果如ESlint和prettierr。

代码语言:css复制
   // 故意写错的CSS
   .page-container-custom {
     max-width: 818px;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     zIndex: 1000; // 随意写错
     background: rgba(0, 0, 0, 0.45);
     pointer-events: auto;
   }
   // Cursor自动修正为标准格式
   .page-container-custom {
     max-width: 818px;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1000; 
     background: rgba(0, 0, 0, 0.45);
     pointer-events: auto;
   }
3.智能预测光标

除了智能补全,这是我最喜欢的功能之一,Cursor可自动预测你下一步编辑的位置,使用Tab快速跳转光标位置

代码语言:typescript复制
  // Tab键直接跳转到函数体内的最佳位置   
   onOk: async () => {
           try {
             const response = await fetch(`/api/xxx/download/?		   fileId=${record.fileName}`, {
               method: 'GET',
             });
             // 在条件语句中
             if (response.ok) {
               const blob = await response.blob();
               const url = window.URL.createObjectURL(blob);
               const a = document.createElement('a');
               a.href = url;
               a.download = record.fileName; 
               document.body.appendChild(a);
               a.click();
               document.body.removeChild(a);
               window.URL.revokeObjectURL(url);
               message.success('文件下载成功')                                              
             }else if (response.status === 404) {
               I // 光标自动定位在这里
             }
               } catch (error: any) {
                
               }
         }

强大Chat能力 和GitHub Copilot类似,Cursor提供了更为强大的Chat能力,具体体现在以下6个方面:

4. 智能对话(Chat)

核心功能:

  • 实时感知当前文件和光标位置
  • 支持自然语言交互
  • 可以直接询问代码相关问题
  • 快捷键 Cmd/Ctrl + I 激活全局对话

场景:

代码语言:css复制
这段样式代码是否存在潜在问题或不合理的地方?
这个样式的定义是否可以更加高效和优化?
这个页面容器的样式设计是否合理?
5.快速代码优化助手(Instant Apply)
  1. 主要优势:
代码语言:txt复制
 智能代码修改一步到位,点击即可完成

 所见即所得,修改效果立即可见

 支持多处代码同时更新,提高效率

 自动识别并解决代码冲突,无需手动处理
6. 代码库智能查询(Codebase Answers)
  • 便捷启动:@Codebase 触发轻松调用,随时待命
  • 精准把握:自动分析项目架构要点
  • 高效检索:快速定位关键代码片段
  • 场景感知:根据具体环境提供定制化解答

场景:

代码语言:javascript代码运行次数:0运行复制
   @Codebase 如何实现用户认证?
   @Codebase 这个API在哪里被调用?
   @Codebase 查找所有使用Redux的组件
7. 代码智能引用助手(Reference your Code)

核心特点:

  • 快捷调用:通过 @ 标记快速定位代码
  • 实时提示:智能预测并补全代码路径
  • 精准匹配:根据当前场景推荐相关代码
  • 全局检索:支持在整个项目中引用代码片段

场景:

代码语言:javascript代码运行次数:0运行复制
   # 引用特定文件
   @utils/index.tsx
   
   # 引用特定函数
   @validateAdmin
   
   # 引用特定组件
   @components/FileUploadModel
8.图片视觉助手(Use Images)

核心优势:

  • 拖拽即用:简单拖放即可导入图片素材
  • UI解析:自动识别界面组件结构
  • 代码生成:提供专业实现方案
  • 设计转换:将视觉设计直接转为代码
9.Web网络助手(Ask the Web)

核心功能:

  • 便捷搜索:@ Web 快速启动网络查询
  • 即时资讯:获取最新在线信息
  • 智慧整理:自动归纳网络内容
  • 源链追溯:自动添加参考来源
10. 智能上下文理解
代码语言:txt复制
    利用**Agent**,可以做到更智能的上下文能力: