从入门到精通：使用Cursor开发Google插件，详解AI代码编辑器Cursor如何提升编程效率

Alex独开
2,400 阅读5分钟

背景

自从OpenAI风靡全球后，基于AI的辅助化代码编辑插件和编辑器层出不穷，大大提高了程序员的生产效率，让他们能更多地专注于程序的业务逻辑。相比之前的ChatGPT（聊天式）、Fittencode（插件式）和通义灵码（插件式），这些工具通常需要程序员手动截取代码块并自行维护文件。最近大火的Cursor真正实现了自动化开发，从工程目录搭建到代码编写一键解决从0到1的问题。本文将分享Cursor的操作流程，帮助大家更快地了解和掌握Cursor。

概要

  • Cursor的下载安装
  • Cursor的基本操作
  • 使用Cursor开发的第一款程序（Google插件）

下载Cursor

  1. 首先百度搜索Cursor，找到官网，Cursor官网的自我介绍为“The AI-first Code Editor”，大家体验过Cursor后就知道他所说的First确实是货真价实的。

image.png 2. 进入首页点“下载”

image.png

安装Cursor

  1. 双击安装程序Cursor Setup 0.43.6 - x64.exe，耐心等待安装完成后进入配置页面。

  2. 首次安装Cursor后会出现以下配置页面，参照下图设置AI对话语言为中文后，点击继续。

image.png

  1. 如果你电脑上之前安装了VSCode，Cursor会主动询问你是否移植VSCode里面安装的插件。

    • 这里我之前的VSCode里面安装了git、svn、eslint检测之类的插件还想继续使用，所以我选择Use Extensions。

      • start from scratch：从头开始
      • Use Extensions：沿用VSCode的插件

image.png

  1. Autocomplete Preferences

    点击默认安装即可，这里解释以下窗口提示信息的意思。

    • Autocomplete Preferences

    • Importing GH Copilot will override Cursor Tab, a more powerful version of Copilot that can suggest mid-line completions and full diffs.

      • 其中GH Copilot即GitHub Copilot，而Cursor Tab是Copilot++，是Cursor默认的辅助AI。两者使用体验上没有明显区别。

image.png

  1. Data Preferences

    • 选择Privacy Mode：你的所有的行为和数据都不会共享到第三方平台。
    • 选择Help Improve Cursor：允许cursor收录你的行为和数据

image.png

  1. 接下来进入登陆页面，没有账户的先注册后登录。

    • 这里说明一下，Cursor并非完全免费的软件，它是有使用期限以及使用次数的限制的。

image.png

  1. 点击注册按钮后，会跳转到默认浏览器的以下页面。

    • 大家可以使用既有的GitHub和Google账户登录，没有账号的点击Sign up按照网页提示注册即可。
    • 由于注册流程跟所有网站都是一样的，此处省略注册的流程。

image.png

  1. 用户登录后页面跳转到以下页面，点击YES, LOG IN。

image.png

  1. 进入主页后，点击右上角的个人头像，即可查看用户信息。

image.png

  1. 用户信息中可以查看当前Cursor的AI请求剩余次数以及剩余天数。

image.png

使用Cursor

  • Cursor起始于VSCode基础之上封装，所以VSCode有的共通，Cursor全部都有。

  • 我们登录进Cursor后，最初是以下页面。

image.png

  • 大家可以像使用VSCode一样使用Cursor，我们新建一个文件夹后，可以看到一个跟VSCode几乎一模一样的界面。

image.png

  • 网上有人分享Cursor的快捷键等等，建议大家不用刻意去记忆快捷键，大家可以使用VS Code的插件库，查找自己熟悉的编辑器的keymap即可。

    • 以博主为例，我最擅长Java开发，所以我直接安装了Eclipse Keymap。

image.png

  • 这里主要给大家讲一下Cursor最推荐的AI功能。

    • 点击右上角的红框，即可看到Cursor的AI面板。

image.png

使用Cursor开发的第一款程序（Google插件）

  • 为了更形象展示Cursor的强大之处，我们通过开发一款Google插件的方式，像大家展示Cursor是怎么不通过程序员动手，直接生成一个可以运行的程序的。

  • Google插件：视频控制器

    • 插件作用：部分视频网站通过代码屏蔽了视频的倍速和进度条的快进，通过该插件可以控制网页视频播放速度和进度。

    • 展示效果如下：

image.png

  • 那么我们开始组织语言，要求Cursor为我们生成这个插件吧。

    • 以下是我们要求AI为我们做的：

      • 由于部分视频网站没有倍速和进度拖动的功能，接下来开发一款Chrome的浏览器扩展插件。
      • 该扩展可以注入JavaScript代码，在页面加载后允许修改视频播放器的行为。
      • 比如重写原生的playbackRate和seek方法，以允许用户自由调节倍速和进度，覆盖原有的播放控制逻辑使其可以设置倍速以及进度。
      • 用户倍速最快可以调整到正常速度的20倍，画面要整洁好看，方便使用。
      • 生成一个markdown文件记录清楚该Google插件的具体使用方式。

    • 大家表述的时候注意以下几个原则的话，AI一般是能正常理解并编码的。

      • 原则1，逻辑没有自相矛盾的地方。

      • 原则2，借鉴5W2H分析法，把诉求完整告诉AI。

image.png

  • 按照上面的要求Cursor会生成以下格式内容。

image.png

  • 最终我们按照Cursor的提示，可以把生成的文件压缩后拖入Google拓展程序中使用。

image.png

小结

  • Cursor的确解放了程序员的双手，让Cursor替我们干活，我们只需要把我们的需求表述清楚，让整个开发过程不再艰难枯燥。
avatar
文章
阅读
粉丝