Using Cursor AI Inline Edits

[00:00:00]
>> Steve Kinney: Before we said we had this command L to chat which will drop you over to that sidebar we just saw and command K to generate. So let's try it out, let's say anyone know what they want to generate?, I have ideas, but like it's going to be a to do list if you leave it to me.

[00:00:19]
>> Student: VS Code fork button.
>> Steve Kinney: What's that?
>> Student: Should you do like a VS Code fork button.
>> Steve Kinney: So before we hit anything there, who knows how it's going to end up for us, you can see that in this situation it is tending to use a lighter model.

[00:00:38]
So you can have the agent is going to be able to traverse the code base, figure out what files it thinks it needs to understand. Both the ones you told it about as well as ones it thinks it needs to know based on what it's doing. You can even see by default, I think I had on auto, I left it on Claude Force on it with thinking, the brain is thinking.

[00:00:58]
Thinking is great, we like thinking, thinking costs money, same is true for humans. It will tend to use a lighter model for these inline things because it doesn't need as much context, it doesn't need to consider what it's doing. It just kind of like needs to know the current thing you have highlighted or where it is, for instance, who knows how this goes.

[00:01:30]
>> Steve Kinney: Interesting choice, we'll kind of just take the thing that you are highlighting and do it right. But let's play with this a little bit more because there's some powerful things you can do with this, being able to surgically go to the piece of code that you need and ask it about to do something is great.

[00:01:52]
But there are ways that we can make this even better, so let's just make a brand new file, so let's say we want to say not a Rust file, typescript file. And we'll say you can see you get that kind of Copilot stuff in there as well, but you can say and here's that tab feature which is ruining all of my mojo right now,.

[00:02:29]
Where it kind of guesses what you want to do next, which is pretty great and it's kind of neat how it works. Let's make it X and Y and it saw that I just changed the last two variables of add from A and B to X and Y, and it goes, you probably want to do that for subtract.

[00:02:56]
And you probably want to add the rest of these, which is like, if I wasn't trying to show how to use Control K, that would be 100% true, and it figured out what to do with the export and so on and so forth. But you can do stuff like that, you do not need to use proper markdown, I don't know why I'm like this, so I was like, hey, this is my own personal preference, I like to do export const, doesn't matter.

[00:03:31]
AI is generally the code base I have to live in it, so it's going to live in my styles. So two things, one is that it generally speaking got the intention with what I selected and what I want to do again. And this is like this kind of surgical approach is definitely not the vibe in vibe coding, do you know what I mean?

[00:03:52]
You are not going to create a giant mess selecting code and expressing your intention on one given thing, so choose your level of risk taking ness. Obviously this is just could I do this with multiple cursors?, yeah, because that's like my 1 talent in life. But the idea of just being able to do some of these quick refactors or stuff like that is incredible.

[00:04:15]
And use current in all these functions, let's get functional programming about this. So currying is when you have a function where you apply the first argument, it returns a function that waits for the second argument, not that bad in ES6, it used to be a pain previously. You can continue following up and giving it more things you want to do.

[00:04:45]
The other thing that you might notice is that both currently exist simultaneously, because this isn't necessarily committed just yet. This is effectively like this is what you wanted, and it will do this in agent mode too, you will be much more tempted to hit accept all. This like you are not going to make a big mess from this one modality.

[00:05:12]
And it's arguably incredibly powerful because if you were going to sit there in a larger code base and change these all by hand, it would take you a while do this stuff totally. You can accept all of them, you can keep any individual one, in this case you could add more, in this case we'll hit accept, and now you have these new pieces of code.

[00:05:30]
What's nice about this mode is I know how it does it, I'm not entirely sure because it seems to work for Cursor and not for other things. Anyway is that let's say you had this app running with hot module reloading going you will see what the suggested version would do, it'll run the suggested code.

[00:05:52]
So you can say, no, this broke everything, and get all that kind of in place, but you can do these like larger refactors. And so I can say something like there are some kind of interesting ones, like what is called a lot of times one shot prompting. So when we think about ChatGPT, we think about chat, a back and forth dialogue.

[00:06:12]
One shot is do thing, so a lot of times you do mirror, like either like const or variable or function. And you can say mirror divide as modulo and it will go effectively look at the divide function and give you another one that is very like similar to that.

[00:06:39]
And so for instance, we said something like const add action, which will assume we're doing redux, we'll say type sure, as you can see, it's helpful in a lot of ways. But when you're trying to actually show the things, the tab completion, which is my favorite feature that I use constantly, you probably wanted to export this, didn't you?, I did, I did.

[00:07:05]
We can say something like mirror is nice if you have a piece of code and you just want to make another one with some slight changes. It'll look at that function, it will figure out roughly what it's doing, it'll make you another one, so we can even say like mirror addaction as subtract action, no giant surprises here.

[00:07:35]
The other one that's interesting of mirror, I need a variable that does something. The other one I think is really kind of neat, is like just saying I need a function, this one's saying a function. You roughly describe what it's supposed to do and it will go ahead and look at the code in that file because it has that context, roughly give you something that aspires to be the very few words you gave it.

[00:08:16]
Now again, you're not going to get into too much trouble here because ideally you are looking at the code. I mean getting into the flow can be dangerous because all of a sudden you're just like, yes, yes, yes, yes, yes, we have problems here, but you can begin to spec some of the stuff out.

[00:08:34]
Also, the same way is and so you can kind of get some of that. Again, this is code that you could totally have written yourself and it would have taken you 5, 10 minutes and now it doesn't. So immediately, even if you're like, I'm not comfortable with all of this go across my entire code base.

[00:09:05]
You can begin to kind of get a sense of ways that at least engaging with some of these tools can speed up the less glamorous stuff in your life. That kind of surgical, presumably we can highlight the piece of code, if even all of a sudden, you're still on the hook for doing some stuff here, but it's not how I would have done it, welcome to the game.

[00:09:47]
But you can begin to take little pieces and again, you're expressing yourself in code and again you can play a game called Follow the Problem. Which leads me to my next favorite Cursor feature, we all know this little pop up from VS Code, it's you made Typescript Angry.

[00:10:05]
I live in you made Typescript angry land, this right here, this button, I mean Ctrl+Shift+D as well, this button which is like, as you can see it, like loads it into the chat,. And starts to write you the initial part of the prompt, I love this, I know, it's so dumb, it's so dumb.

[00:10:27]
For the code present, we get this error unknown is not assignable, how can I resolve this?, if you propose, please make it concise. And so let's do that and see what it does, our first taste of some of these other modes, where now you can see how these two modes start to play together.

[00:10:47]
So looking at the TypeScript one, it explains it to you, two, it proposes a fix because technically, if you return action and yeah, I get it, Typescript's not wrong in this case. In strict mode, it's totally legit, but here we coerce it into a Boolean, so we're not taking something that is truthy or falsey, it is actually true and false because I have type mode set to Typescript Strict.

[00:11:18]
Whatever, language is hard, but we can see that it proposes the changes and I can go ahead and like keep or remove.