当前位置:首页 > 技术分析 > 正文内容

Cursor入门教程-JetBrains过度(cursor免费版)

Cursor使用笔记

前置:之前博主使用的是JetBrains的IDE,VSCode使用比较少,所以会尽量朝着JetBrains的使用习惯及样式去调整。

一、设置语言为中文

如果刚上手Cursor,那么肯定对Cursor中的众多选项配置项不熟悉,这时候如果是默认的英文,会比较妨碍快速熟悉Cursor,因此可以将其语言调整为中文,因为Cursor是以VSCode为模版拓展的,所以我们可以直接下载一个中文插件(Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code),安装完重启Cursor后就会显示中文界面了。

二、设置JetBrains的主题

2.1 颜色主题

Cursor的默认主题,真的两眼一黑,颜色很淡而且还有大量紫色这样的鲜艳颜色,属于是多看一眼我都会爆炸。后来我在试用了多个主题后,包括最火的吸血鬼主题,还有Community Material Theme主题以及所有的JetBrains主题,最好用的感觉还是JetBrains Darcula Theme这款主题。

设置方法为首选项 -> 主题 -> 颜色主题,选择JetBrains Darcula Theme就可以。

颜色大致如下:

2.2 Icon主题

Icon主题选择JetBrains Icon Theme这个插件进行安装,在首选项 -> 主题 -> 文件图标主题中添加图中的Icon主题安装:

其图标样式大致如下:

三、插件推荐

除了以上几款主题的插件推荐,还有几款实用的插件也建议安装一下。

Git

首先是两款Git相关的插件,分别是Git Graph和Git History,Git Graph是可以看到分支的提交合并回滚等记录,十分方便,Git History则是可以查看当前代码是在哪个提交中,提交人是谁,能够更好的追踪溯源。

快捷键

如果用惯了IDEA的快捷键,那你肯定不习惯VSCode的快捷键,这时候就需要它了:IntelliJ IDEA Keybindings,这款插件安装后可以帮你自动设置好IDEA中快捷键,无缝衔接~

Markdown

有一个插件可以直接在Cursor中预览Markdown,名字叫Markdown Preview Mermaid Support,安装完就可以直接在Cursor中预览MD文档了。

四、Cursor使用

4.1 界面介绍

Cursor的界面主要分为四块

  • 最左边就是文件区,可以显示打开的项目文件目录;
  • 中间是展示区,点击文件,文件内容会展示在这里,编写代码就在这个区域;
  • 最右边的就是Cursor独有的对话区,可以直接进行对话并帮助你编写代码直接生成到项目中,这也是Cursor的核心具体后面会进行介绍;
  • 最后就是下方输出区,日志打印,调试控制台,终端等都在这里。

另外还有一个需要关注的,就是如何展示关闭这三块内容,一开始熟悉Cursor的时候我关闭了下方输出窗口,找了半天没有找到,后来发现在界面的右上角:

这三个分别对应着上个界面图里介绍的文件区,输出区和AI对话区,点击即可打开或关闭。

4.2 运行与调试

由于JetBrains的IDE是可以直接在文件中或者调试的,有一个绿色的三角,点击可以选择run或者debug。Cursor中找了半天没找到,后来发现它在界面的左上角:

点击图标后点击运行和调试即可,要注意选到对应的main函数入口文件再进行运行调试,调试的字段参数都在左侧:

debug工具在上面:

4.3 git使用

在界面左上角的git标志中,会展示各个项目的源代码管理,点击某个项目的右侧三个小点,可以看到如下展示:

  • 拉取:从该分支的远程分支上拉取最新提交到本地分支上
  • 推送:将本地上该分支的修改内容推送到远程分支上
  • 克隆:通过ssh或者https链接克隆新的项目
  • 签出到...:切换分支
  • 抓取:从远程上抓取整个项目的变动,包括分支的新增删除

[!NOTE]

注意,如果出现远程与本地tag冲突,删除本地tag即可。git tag -d 具体tag名字

4.4 多项目同时打开

原先在JetBrains的IDE中,是可以使用Merge All Project Windows合并所有的项目,可以方便的在IDE顶部进行切换

不过我在Cursor中并没有看到有这样的功能,不过有一个类似的,只不过在左侧的文件栏中,具体方法是 文件-> 将文件添加到工作区中,这样每个项目都是一个文件夹,可以在文件栏中进行切换,不过感觉还是没有IDEA中方便。

4.5 Cursor特性

4.5.1 智能补全代码

Cursor可以自动学习你的代码编程习惯,你只要打一点代码,Cursor就会自动进行智能补全,这时候只需按下Tab键,就可以将生成的代码直接补全,这也是AI编程中最常用的一种,能够极大提高效率,不过要注意检查生成的代码逻辑是否正确。如图,我只打了if,就帮忙自动补全了接下来原本要写的代码。

4.5.2 快速添加询问内容

在Cursor中,不必再手动复制想要更改的代码片段,或者输出的报错这些内容到对话框中,Cursor提供了一键添加到快捷功能,选中某个片段,可以看到Add to Chat这个功能。

点击后,可以看到这几行以及整个的这个文件的索引都会被添加到对话框中,这样就可以方便的添加上下文,便于模型去理解以达到更好的生成效果,选择好后,输入想要实现或者更改的功能,点击send稍等片刻就可以获得生成后的代码了。

4.5.3 内联代码编辑与生成

在选中代码段后,除了Add to Chat选项,还有个Edit选项,快捷键为系统键K,可以快速在代码内生成一个对话框,输入想要实现的内容,会快速在当前内容上进行修改,可以选择Accept或者Reject。

也可以选择quick question,这就和普通的AI对话一样,不会修改代码只提供建议。

4.5.4 Agent快速生成

Cursor的协作模式有三种:Ask、Edit和Agent三种模式。

Ask模式

  • 询问特定代码段的问题
  • 获取复杂函数的解释
  • 查找代码模式和示例
  • 探索并理解代码库

Edit模式

  • 对代码进行单次编辑
  • 精确应用有针对性的更改
  • 自信地审查和应用更改
  • 单独处理文件

Agent模式(默认)

  • 进行代码库范围的更改和重构
  • 根据需求实现新功能
  • 调试跨多个文件的复杂问题
  • 生成测试和文档
  • 保持整个项目的一致性

最常用的是Agent模式,其他两种用的比较少。

如果说上面的内联代码快速生成可以提高编程效率,那Agent就是一个AI配对程序员,可以用于复杂的代码修改,甚至可以大规模进行编辑,比如现在我要生成一个新的时间工具类,我只需使用@指定新文件生成位置,然后告诉其诉求,就可以直接生成一个新的时间类方法文件。

点击Accept后,这个新文件可以直接添加到对应目录中,当然如果不满意或者有新的功能需要更改,可以继续在对话框中添加要求直至生成符合自己要求的代码文件。

除了代码,你甚至还可以在Cursor中生成流程图之类的文档,给予指令“生成流程图,使用markdown语法,并生成一个新文件”,可以得到如图所示的流程图文档:

Agent的使用方法还有很多很多,这里只是介绍了最基础的用法,更多优质用法需要发掘。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/3809.html

分享给朋友:

“Cursor入门教程-JetBrains过度(cursor免费版)” 的相关文章

最古老的Linux发行版刚刚进行了重大更新

Slackware 15.0 带来了全新的 KDE Plasma 5 桌面体验。Slackware Linux(仍然维护的最古老的Linux发行版)的制造商刚刚发布了Linux发行版的15.0版本。Slackware Linux于1993年出现,创始人Patrick Volderding今天继续维护...

Vue3 中有哪些值得深究的知识点?

众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点。喜欢的话建议收藏,点个关注!1、createAppvue2 和 vue3 在创建实例时,有很大的区别,具体对比如下://Vue 2 Vue.use({ router, store,...

Gitlab 的使用和代码审查流程介绍

1、先简洁介绍下项目常用的信息-面板统计页面2、用户信息面板3、服务器信息4、项目信息5、重点介绍代码提交审核机制和授权合并机制开发人员推送代码的时候不能直接推送到master,否则就会报错。此时开发人员要本地新建分支然后在提交上来列出修改了哪些细节管理员可以管理这些分支合并到master6、指派合...

30 个纯 HTML5 实现的游戏

浏览器和 JavaScript 的功能逐年不断的变强变大。曾几何时,任何类型的游戏都需要Flash。但随着 HTML5 发展,HTML5 + WebGL 游戏式就慢慢占领着这个舞台。以下是30款流行的游戏,它们可以在所有现代浏览器中运行,并且只使用web技术构建。1. HexGL地址:http://...

vue-router是如何解析query参数呢? #前端

vue-router 中的 query 解析。1. 大家好,我是龙仔。今天来分享 vue-router 是如何解析快乐参数的,因为使用 vue 路由会传 query 参数和快乐参数,所以从 vue 的角度来看如何解析传递的快乐参数。2. 基础知识大家应知道,快乐参数结构如:a、b、c、a、b、c、a...

一起学Vue:路由(vue-router)

前言学习vue-router就要先了解路由是什么?前端路由的实现原理?vue-router如何使用?等等这些问题,就是本篇要探讨的主要问题。vue-router是什么路由是什么?大概有两种说法:从路由的用途上来解释路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同。从路由的实现原理上来解释路...