How I code 159% Faster using AI (Cursor + Sonnet 3.5)
Summary
TLDRこのビデオでは、Visual Studio Codeに基づいてAI機能を内蔵した新しいコードエディター「カーソル」を紹介しています。カーソルはプログラミングを大幅に高速化できると主張しており、ビデオではカーソルを使用してアプリケーションを構築し、そのプロセスが従来の方法よりも2.5倍高速であることを実証しています。カーソルのAI機能は、コードの自動生成や改良を通じて開発者の生産性を高め、特にプログラミング初心者や経験豊富な開発者双方にとって有益であると示されています。
Takeaways
- 😀 カーソルはVisual Studio Codeに基づいてAI機能を直接組み込んだ新しいコードエディターです。
- 🔍 カーソルを使用することで、既に数年のコーディング経験があるユーザーでもコーディング速度が2.5倍速くなることがわかります。
- 💻 カーソルをダウンロードするにはcursor.comにアクセスし、インストールボタンをクリックします。
- 🆓 無料で使用することも可能ですが、プロプラン(月額20ドル)を利用することで追加機能や優れたモデルの使用が可能になります。
- ⌨️ カーソルでは、コードをハイライトしてCtrl+Kを押すことでAIにコードの変更を指示することができます。
- 🗂️ Ctrl+Lを押すことでチャットウィンドウを呼び出し、プロジェクト全体のファイルや特定のファイルを参照して変更を依頼できます。
- 🛠️ AIによるコードの変更は「適用」ボタンをクリックすることで直接コードに反映させることができます。
- 🖼️ カーソルを利用して、ユーザーが連絡先カードに画像をアップロードできる機能を実装しました。
- 🔄 カーソルには「コンポーザー」機能があり、複数のファイルにわたる変更を並行して迅速に行うことができますが、まだベータ段階です。
- 🔍 カーソルはコードベースをインデックス化するため、特定の変数や関数の設置場所を知るためのインテリジェントな検索が可能です。
- 🎨 カーソルには画像からコードを生成する機能もあり、デザインのスクリーンショットからコードを自動生成することができます。
Q & A
カーソルAはどのようなコードエディターですか?
-カーソルAはVisual Studio Codeに基づいて作られたコードエディターで、AI機能が直接組み込まれており、コーディングをはるかに高速化できます。
カーソルAを使用することで、コーディング速度はどのくらい向上するのですか?
-ビデオのデモでは、経験豊富な開発者であってもカーソルAを使用することで、コーディング速度が2.5倍向上することが示されています。
カーソルAをダウンロードするにはどうすればいいですか?
-カーソルAはcursor.comからダウンロードしてインストールできます。
カーソルAのProプランの月額料金はいくらですか?
-カーソルAのProプランは月額20ドルです。
カーソルAのAI機能を使用するにはどうすればいいですか?
-カーソルAを開き、コードを書くか、または特定のコードを選択してAIに指示を出して機能を使用できます。
カーソルAでコードを変更するにはどのようなショートカットを使用しますか?
-コードを変更するにはControl+K、チャットウィンドウを開くにはControl+Lを使用します。
カーソルAはどのようにしてプロジェクト内のファイルを参照しますか?
-カーソルAはプロジェクトを開くと、その中のファイルをインデックス化し、変更を加える際に素早く参照できます。
プロファイル画像を連絡先カードに追加する機能をどのように追加しましたか?
-カーソルAのAI機能を利用して、画像アップロード機能を複数ファイルにまたがって追加しました。
カーソルAのオートコンプリート機能はどのように役立ちますか?
-カーソルAのオートコンプリート機能は、TailwindやReactなどのフレームワークに精通しており、開発者がコードを入力する際にクラス名や関数を自動的に補完してくれます。
カーソルAでコードベースを検索するにはどうすればいいですか?
-カーソルAでは、特定の変数や関数の設定場所を検索するためにサイドバーから指示を出して、コードベース全体をインテリジェントに検索できます。
Outlines
💻 カーソルコードエディターの紹介
カーソルはVisual Studio CodeをベースにAI機能を内蔵した新しいコードエディターです。AIの助けを借りることでコーディングが大幅に高速化されます。ダウンロードはcursor.comから行えますが、機能をフル活用するには月額20ドルのプロプランを推奨します。カーソルはVS Codeと同様のインターフェースを持ち、プラグインのインポートも可能です。AIはコードを理解し、特定の変更を求められた場合にコードを修正します。また、コードベースをインデックス作成し、変更を加えるファイルを選択することができます。
🔧 カーソルのAI機能の活用方法
カーソルのAI機能は、コードの特定部分をハイライトしてControl+Kを押すことで呼び出すことができます。AIは指示に基づいてコードを修正し、変更をレビューしてから適用することができます。さらに強力な機能として、Control+Lを押すことでチャットウィンドウを呼び出し、コードベースを理解した状態で変更を要求することができます。この機能により、複数のファイルにまたがる変更や大きな機能追加が簡単に行えます。
🖼️ 画像アップロード機能の追加
ビデオでは、ユーザーが連絡先カードに画像をアップロードできる機能を追加するプロセスが説明されています。カーソルのAIは、サーバーサイドの変更、ファイルの検証、アップロード処理など、必要な変更を自動的にコードに記述します。また、Google Cloud Storageを使用して画像を保存し、データベースに画像URLを追加する処理も含まれています。
🛠️ コードのリファクタリングと機能追加
カーソルの「Composer」機能を使用して、コードを複数のファイルに分割し、整理することができます。ただし、この機能はベータ版であり、エラーが発生する可能性があるため注意が必要です。また、カーソルはTailwind CSSやReactなどのフレームワークに精通しており、自動補完機能を通じてコーディングを支援します。
🖌️ デザインからコード生成
カーソルはスクリーンショットからコードを生成する機能も持ち、デザインの自動変換をサポートしています。これはFigmaなどのデザインツールからのコード出力機能とは異なり、スクリーンショットを元にAIがコードを生成します。この機能により、コーディングプロセスをスピードアップさせることができます。
🔎 カーソルの高度な検索機能
カーソルはコードベース内をインデックス化し、特定の変数や関数の場所を知るための高度な検索機能を提供しています。また、AIのオートコンプリート機能は、Tailwind CSSのクラス名など、コーディング中に次の入力を予測してタブを押すことでコードを迅速に記述できます。
Mindmap
Keywords
💡カーソルA
💡AI機能
💡プログラミング速度向上
💡ダウンロード
💡プロプラン
💡コードベース
💡マルチファイル操作
💡オートコンプリート
💡コンポーザー
💡画像アップロード機能
Highlights
介绍了Cursor A,一个基于Visual Studio Code的新型代码编辑器,内置AI功能,能显著提高编码速度。
与仅使用传统编码知识和Google搜索相比,Cursor A使编码速度提高了2.5倍。
Cursor A可以从cursor.com下载,界面与Visual Studio Code相似,易于上手。
Cursor A提供免费使用,也提供每月20美元的Pro计划,包含更多高级功能。
演示了如何使用Cursor A迭代开发一个通过二维码交换联系信息的应用。
展示了Cursor A的AI功能,如使用Control+K命令来改进代码。
通过Control+L命令,可以召唤聊天窗口,进行更复杂的代码修改请求。
Cursor A能够理解代码库,提供基于当前文件的上下文来优化代码。
展示了如何通过聊天窗口请求Cursor A进行代码更改,包括界面和功能上的改进。
讨论了Cursor A的撤销功能,允许开发者回退到编辑前的状态。
展示了如何使用Cursor A添加新功能,如上传图片到联系卡片。
介绍了Cursor A的Composer功能,用于处理多文件交互和重构代码。
讨论了Composer功能的局限性,以及在实际使用中可能遇到的问题。
展示了如何使用Cursor A的图像识别功能来生成代码。
介绍了Cursor A的自动补全功能,能够预测并补全代码。
展示了如何使用Cursor A搜索整个代码库,以找到特定功能的实现位置。
总结了使用Cursor A可以显著提高编码速度,并鼓励观众提出问题以制作更多相关视频。
Transcripts
today we're taking a look at cursor a
new code editor that is based on Visual
Studio code but has AI features built
directly into it which can help you code
much much faster in fact in my last
video I built the same app Twice first
using cursor and then just using my own
knowledge and what I could find on
Google and I found that cursor actually
made me 2 and a half times faster and
this is as someone who's had many years
of coding experience so it can really
speed you up so let's dive into what's
different about cursor and how you can
actually use it first of all to download
cursor you're going to go to cursor.
comom and there's a button you can
download it install it again it's pretty
much like Visual Studio code with some
additional features so if you've used vs
code you're going to feel right at home
now you can use it for free to some
degree and you can also bring API keys
from other services like open AI or
anthropic but I highly recommend the $20
a month Pro Plan because you get some
additional features and you get pretty
much limited usage of some of the best
models like Claude Sonet 3.5 and you'll
quickly see your return on investment
with that even if you're already using
AI like chat GPT to code because this
really is much faster so when you first
open this up it's going to look pretty
familiar if you've used VSS code before
and you're able to just write code here
you're able to set your different theme
and you can actually import some of the
plugins and other things that you would
have in vs code so they've designed it
to be a pretty smooth transition to
demonstrate how cursor works I'm I'm
going to be iterating on the application
that I built in my last video which is
called quiron or QR contact and it's
essentially a way to exchange contact
information quickly through a QR code
I'm going to be adding a new feature
here which is going to allow us to have
profile pictures that you can associate
with your different contact cards and
we're going to use cursor to help
actually write most of the code for us
now there's a few different ways in
which AI is baked into this and the
first one I'll show is the command or
contrl k where you can highlight some
code and then if you press control K uh
you're going to be able to write some
instructions for the AI to iterate on
that code or to take that code into
account and do something that you want
it to do so in here we can for example
highlight this code which represents
this delete button and let's just say we
want to add some more padding to it add
more padding to this
button okay and it's going to go through
it's going to make some adjustments
right so you can see here that it
removed some code it added some code
coding effectively becomes like
reviewing pull requests from the AI so
we can accept that change and then we
will see that the trash icon has moved
now the cool thing with cursor is we can
actually undo these changes so if I
press contrl Z it's going to go back to
that edited State and I can kind of
review my code again I can just go back
to the code that I previously had and
just ignore the changes that it made so
control K can be a good way to make
these targeted sort of precise little
changes but the most powerful feature
that I like to use most of the time is
control or command L and pressing
control L is going to summon this chat
window that you see on the right and I
like to think of this in many ways like
chat GPT with a lot of additional
benefits the cool thing about cursor is
it already knows your code base when you
open a project in cursor it's going to
index all of the files that you have so
that it can quickly reference them when
you are making changes but you also have
control over which files you want to
reference when you're asking it for
changes that's going to make it so that
it doesn't just search the entire code
base and get confused by having too much
context you can actually hone in on
specific files that you want to change
and the context that you want it to use
when it's doing something that you want
it to do so let me just give an example
of this right when I'm making this
change here by default when when you
open up that chat window it's going to
reference the file that you have opened
and you will see it down here so card
list now let's say we want to make a
change to this card list where we want
the QR code to appear to the left and
then we want the title and the
description to be on the right of that
instead of this kind of vertical thing
so we can go in here and we'll just
describe what changes we actually want
now as I think through the design here
and what I actually want I'm realizing I
don't know where I want this trash icon
to be but let's actually change it for a
menu icon you know like the little three
dots that you can click and then we'll
have a delete item inside of that menu
so let's just go ahead and add it to
this code we can actually request
multiple changes in this chat okay now
when we're ready it's going to again use
the context of this card and we'll go
ahead and ask it for those changes okay
so it's written some code for us I am
using Claude Sonet 3.5 here which I've
found to be the best model for coding as
of right now this is middle of August 24
I'm sure new models will come out but
this has been a real game changer
honestly um so now we have this code
that it's written if you generated
something like this with Chad GPT you
would be spending your time replacing
these existing code portions with the
code that you have so you'd still have
to spend a lot of time taking the
changes that it made and integrating
them in your code but with cursor we
have this apply button which is going to
go ahead and apply all of those changes
directly into our code so this way we
can review the changes that it made and
we can also just go ahead and accept
them and see what this looks like and
honestly that looks pretty good and look
at that uh it's pretty much done exactly
what we want it's replaced the trash
with this little menu and we have the QR
code on the left descriptions so this
looks all good one issue I do see is
that when I click onto this menu and
when I click away the menu doesn't
disappear so we're just going to go back
to cursor and we're going to ask the AI
to iterate on that I usually try to say
something like this looks good so that
it doesn't go and try to change a bunch
of code but then I'll add the additional
code that I want changed so we're just
going to keep it going in this
conversation because the change that we
want is related to the changes that it's
made so I'll just say that looks great
but when I click away from the menu when
it is open it doesn't disappear can you
add some clickaway functionality to make
it close this can be a good way to build
a feature pretty much just in the chat
box where you have an idea in mind you
ask for the initial request you see what
the changes look like and then you just
iterate on that in that same chat until
you pretty much get to a complete
feature sometimes you'll want to start
over in which case you can just close
this chat and open a new one and then
you'll have fresh context it's like
opening a new conversation in chat GPT
okay so it's written some code for us
we'll go ahead and apply those
changes all right it's using a use
effect here for the click
away all right now let's test those
changes now if I click here click away
Perfect all right that's exactly what we
wanted great so we've made some small
changes to this one file but can we go
beyond that how do we change multiple
files or add really big features well
this chat window is capable of a lot
more than just working on one file we
can actually tag different files and ask
it to change those files or just use
them as references so that it knows how
to change the file that you're on so to
demonstrate this let's take a pretty big
feature we're going to want to allow
users to upload images that they can use
as part of their cards so that when they
share this contact information you can
see the picture of the person that's
actually sharing it but that's going to
involve a lot of different pieces right
we're going to need to change the
configuration page we're going to need
to validate the files need to send it to
the server the server is going to have
to upload it to some kind of file
storage bucket and verify that you know
it's an image and it's not too big we're
going to have some security features
there's a lot of different factors that
are at play here but I want to show the
power of cursor and how we can really
quickly make a lot of those changes and
they're not going to be perfect but
they're going to get you like 80 % of
the way there and then if you know how
to code already you're going to be able
to make up that last 20% very quickly
and usually it'll be just by asking
cursor to change some things again so
let's go ahead and make a request to
modify multiple files to add this pretty
big feature all right so let's take a
look at this request that I wrote up we
want to add the ability for users to add
images to their contact card to make
this happen we'll need to add a button
to this page which is the configuration
page page that allows them to select an
image to upload then when the user saves
the card we will send that file to the
server which will save it to a storage
bucket and add the URL of the image to
the card before saving it in the
database actually I'm going to add here
to specify which storage bucket I'm
talking about so that it can write the
code for that as well we will be
using gcp uh
storage okay we'll need to modify
this file to add the upload feature the
communication should happen through the
serom JS file that I have to ensure that
we attach the user token when we're
making that request and we'll also need
to modify the server side of things to
support this new functionality so let's
go ahead and make that request now it's
going to write code for all of these
different files and we'll just go file
by file and be able to apply it let's
take a look at the changes that it made
so first of all we're going to edit this
configuration page okay sure I'll just
apply all the changes I'm just going to
trust it for the time being and if
something goes wrong I'll just roll
forward and we'll make changes from
there so now we'll go over to server com
we'll we'll make changes there okay that
looks
fine and then we're going to go to our
server and we got a bunch of changes in
here as well okay now we're going to use
molter as a new library we're going to
use Google Cloud Storage that sounds
good and here's a bunch of code that it
wrote to actually upload that file and
then use it we'll review all of this
code to make sure it's doing this in a
secure way so it recognizes that we're
going to need these two new libraries so
I can actually just copy this and run it
in my server we're going to install
those two
libraries looks
good
okay so we'll switch over
here let's try adding a new contact
all right now look at that we got a
button here and as soon as I click it
it's letting me select an image so let's
go ahead and I don't know choose this
one okay well it's rendering something
for me in the UI here now that's that's
not necessarily uploaded yet we haven't
tried to save it but you can see that we
already have this functioning kind of
image upload where I can select the file
and uh it's going to display here now
before I click save to upload this I am
actually going to review the code
because I don't want it to just go to
some random bucket I want it to go to a
bucket that I specify and that I have
set up for this so let's take a look at
how that code works okay I'm just going
to press undo real quick so that I can
see the changes and this is going to
highlight for me when that image upload
H happens okay so the relevant changes
are right here in handle submit we're
going to go ahead and make a request
with the card ID and the image and we're
going to get the image URL out of that
and then we'll call the API to save the
card I think that's that's very
reasonable um so again just control
enter you're able to accept all of the
changes or you're able to go line by
line and then make changes as you wish
let's see what bucket it's trying to use
and then we'll make sure that it's
properly set up in Google Cloud okay so
it looks like it's looking for the
bucket that we have specified in our
environmental variables I think that's
perfectly reasonable okay so I'm going
to go ahead and add this to my EnV file
so that we can properly upload to the
bucket that I want okay I've got the
bucket set up as far as I can tell so
let's see what happens when I try to
save this with image let's call it right
saving seems take a little while and
then we got an error okay um take a look
here all right so right now it looks
like it's trying to connect to the
database but it crashes so let's try to
figure out what's going on here now
again I'm going to just iterate on the
thing that happened before so I'm
getting this error and I kind of have a
clue as to what might be happening uh
but let's go ahead and ask the AI to
troubleshoot it for us all right this
seems pretty good but I get this error
uh let's see do we need some additional
changes okay eror suggests DB object is
undefined all right updated version of
index JS let's check it out let's see
what changes it
made okay down here well first of all
it's going to try to catch that error
and then error updating the URL and here
um looks like update image card okay so
this method doesn't look very clean
because we actually have a database file
so let's ask it to just use that instead
I'm going to just press contrl Z to
remove those changes and keep the last
ones and then we're going to ask it to
use our database file and update that as
necessary I see the problem we should
use dbj to handle database interactions
let's change the server and the DB
file all right so we'll go here apply
some changes there we go it added a new
method for us which is going to be to
update the
card and then back to index.js we'll go
ahead and apply these changes as
well here we go now it's going to
actually use database connection
properly all right let's try to save
again there we go it actually saved this
time and if we look at this it logged
our card it says with image and then it
has the image URL that should be in the
database
amazing so if we go back and then we go
to the with image card um we don't yet
see it so let's keep iterating we'll
keep adjusting this so that it actually
shows the image I'm pretty confident
that it saved it it just needs needs to
render it when we first open the card at
this point the chat on the right is
getting a little long and I think I'm
going to be better off just starting a
new conversation with the AI and kind of
explaining some of the context that I
set because I'm just going to want
different set of files to be changed and
I don't need it to get confused by all
these previous changes that it's been
making so we'll start a new chat and
we'll go back to this configure contact
details so here I'm basically saying
what is currently happening and what I
want to happen and I'm allowing it to
sort of figure out what changes it needs
to make so I'm not overprescribing a
solution because I'm not going to spend
too much time thinking about it but if
it struggles with this then I will get
into more details all right here's the
changes we go ahead and
apply and it looks like pretty straight
forward essentially when we load the
card yeah we're just going to use the
image if it's already there and that's
that's
great all right we'll accept the
change now when we go in here we see
clippy perfect all right and it was that
smooth in what 10 15 minutes we added
the ability to upload images retrieve
them as needed and you know that
probably would have taken a lot more
time without the help of AI so now let's
just clean this up a little bit and
we'll show this near the top instead of
kind of in the middle here all right now
it's going to move some things around
for us we'll we'll apply these
changes all right there we go that's
looking a little bit
better we can change profile picture
let's Let's uh let's use something
else all
right save okay it's saved let's see if
it comes up again yep we got our new
picture and if we look over here this is
our storage
bucket we can see those images that got
uploaded so this sidebar is really how I
do a lot of the coding and it's really
the Workhorse for me but there are some
other features which I find really
beneficial as well so now that we've
made all of these Chang this file is
getting a little bit too large and I
want to refactor it into something more
manageable and because I'm going to be
creating new files I'm going to show you
one more feature that cursor has which
is uh one of the more powerful newer
features and that's called the composer
now the composer is really designed for
doing all of these multifile
interactions and sometimes it gets
overwhelming and confusing because you
can't as clearly see the changes and
revert them but in this sort of
situation it can be a really quick way
to create all of these new files and
keep things organized to activate the
composer you might have to go to file
preferences cursor settings and then in
the beta section it is this multic
composer so we'll go ahead and open it
using control shift I and let's ask it
to refactor some things for us the cool
thing about the composer is that it
works on all of these files separately
but in parallel so it's actually faster
than going one by one and changing these
files and it's actually creating new
files for me which is going to be really
useful okay so it's taking out a bunch
of these sections making them into new
files and we can kind of compare the
differences Let's uh let's be bold and
just accept all and see how it goes all
right we'll close
that so now we have all these additional
files so contact d detail item contact
detail form let's go ahead and switch
over and it looks like it left out a lot
of these different dependencies so you
know the composer is still a work in
progress let's uh let's open it back up
and give it some feedback okay looks
like it's applying some changes to those
files well I'll be honest this didn't
work as well as I expected and I feel
like it's going to be pretty difficult
for me to fix that form and know what
context it's working with so while the
composer is a powerful way and I expect
this is going to be the best way to work
with cursor in the future I think right
now it's at a point where it's a little
difficult to tell what it's going to
change and how it's going to change it
like the scope is too large that when it
makes errors like this it's really
difficult to roll things back so um you
know the composer is still in beta we're
going to go ahead and undo
those changes so I went ahead and just
contrl z i undid those changes now we
got some new files I'm going to delete
those I think it's just that the scope
of the changes it tries to make can be
so large that some wires get crossed and
some of the models just don't keep up
with it just yet and that's why it's in
beta I mean they're still developing
this feature so I'm going to go ahead
and ask it to refactor things for me in
the sidebar and we'll keep it to
something a little more manageable let's
just move the image upload stuff in to a
separate file and then we'll reference
it here let's call the file profile
picture instead all right and then
here's how
we okay great so now when we go here it
still works as
expected save the changes okay that all
looks good when I open it it loads the
correct file so that refactor was a
little bit smoother and this is the cool
thing is that you know when you're doing
a refactor man manually you're going to
have to go in and change all these
different values but AI can really
accelerate that so you can actually like
you start off with Messy code because
you have ai write all this but you can
also get AI to refactor it so you can
make things cleaner and much more
organized so at this point we've added
the ability to upload these pictures and
we can see it during this configuration
page but when we go to the preview the
picture is not there and this could use
a little bit more polishing so I want to
show you another cursor feature which I
really like like and that's the ability
to use images you can actually take
screenshots of a design for example and
have cursor build out what it sees in
the image so I have here an outline of
what I want this card to look like and
this is kind of a rough draft and keep
in mind that cursor is not going to be
perfect about this but it can be a
really great way to get started so if
you're working on a project and a
designer sends you you know a figma file
you can take a screenshot and then just
generate code out of that I know figma
has some code exporting features but
they just never seem to work for me so I
found this to be a more effective
approach anyhow the way that I like to
do this is to just take a screenshot of
the
design and then we'll flip over back
into cursor I'm on the contact preview
card here and I'm going to go ahead and
just give it this design and say let's
make I'll just give it a hint of where
that data is located so let's give this
a try all right we got a bunch of
changes we'll flip back
over to the
browser and let's see what the preview
looks like well it looks mostly correct
except that the it's it's full width so
we just need to control the width let's
say I don't know 400
pixels okay and then we kind of want to
center it so let's see if we can MX Auto
look at that this is this is another
powerful feature of course that it auto
suggests and now it's saying okay so
there we go that's looking a lot closer
to what I wanted maybe we can also give
it a Max height let's add a little
border nice and by the way I don't know
if you noticed that but cursor just
autoc completed a lot of that for me so
I just typed in B and automatically it
is suggesting border border gray rounded
large Shadow large so I can autocomplete
that the way that it knows that is
because it's very familiar with Tailwind
it's familiar with react familiar with a
lot of Frameworks so there we go this
card is looking a lot nicer and closer
to what I wanted with one more prompt we
got the blue going halfway down and we
got that nice white border around the
image and you know this looks a lot more
professional you can see again here when
I type in send because I don't remember
the Tailwind class I want the text to be
centered and I type in send and it auto
recommends I do text Center so we'll do
that and boom my name is now centered I
didn't have to go look up what that
class name was actually called so
perfect another cursor feature that I
want to highlight is the autocomplete
Plus Auto tab where cursor can actually
predict where you're going to want to go
next and this can be a really great way
to edit code manually without that
sidebar so looking at this function here
I have an if statement with a bunch of
else ifs um just as an example let's try
to switch this to a switch case
statement instead so let's say I change
this and I type
switch well it immediately knows the
rest of what I want to type on this
line then it predicts how I'm going to
want to change some of the following
lines and I can just press Tab and then
it even knows which next line I want to
go to after that so I'll go over here
and it predicts to switch it to email I
can basically just keep pressing Tab and
uh and there we go and let's just format
that real quick okay and now I've
switched all those ifal statements to
cases I don't know if this is actually
any more readable I think if I refactor
this into some smaller functions then it
might look better so let's go back to
that control K we'll just select that
section of the code and say Vector this
all right it it gave us all those
changes now we have this format value
and some very specific formatting
functions so a pretty quick easy way to
refactor and makes it a lot more
readable oh and I almost forgot one
other feature which is pretty useful at
times especially if you're working in a
really large codebase because cursor
indexes all of the files you can
actually search your codebase more
intelligently so in the sidebar here I
could ask it where in my code base does
the cck on get set and then I can press
controll enter to search the entire code
base and now it's going to go look
through all these different files and
it'll be able to provide me with an
answer so in this case set in the index
HTML file there it goes it points me to
the right place so if you're just lost
in a large codebase this can be a really
great way to find your way around and to
try to understand how some files Rel to
each other once you do have a better
understanding of the code base I would
recommend that you just tag specific
files instead of searching across the
whole code base but if you're totally
lost and you're not sure where something
is it can be an effective way to find
that so hopefully this helps you see how
you can code much faster using cursor
and if you have any questions drop them
down in the comments because I'd love to
make more videos like this showing you
how you can use AI to improve your
coding speed as always thanks for
watching take care
5.0 / 5 (0 votes)