Upgrading Vue Component0:08
All right, next, let's have a look at the prompt library and PHP storm. It's pretty helpful. So for an example, I have this view component called button dropdown, and you can see it's a little bit old school. It was built using View two and the options API, but now we wanna upgrade it to View three and the Composition API. So before ai, we would, we would do it by hand, and it was a little bit cumbersome,
So before ai, we would, we would do it by hand, and it was a little bit cumbersome, but now of course we can do it with a single click. And we have two choices. One, of course, we could open up an agent to take care of this for us, but if you're working file by file, it would be cool if I could just select this and then instantly upgrade it. Let's do that. Now, here's how, if I select this file and I scroll up within the refactor section,
Opening Prompt Library0:46
Let's do that. Now, here's how, if I select this file and I scroll up within the refactor section, you'll see there is a add your prompts, uh, menu item. And this will take us to the prompt library. All right, so now we can see prompts for various things like how to write documentation or what to do when generating unit tests, if anything. And then we also have chat actions, like find problems in the selected code. Um, use the selected code for a new chat,
Creating Custom Prompt1:08
like find problems in the selected code. Um, use the selected code for a new chat, suggest a refactoring. Why don't we create our own, let's say view two to view three. And I'll just paste this in. Convert this selection from view two options API to view three composition API using script setup and type script. And then notice I can use this magic variable
setup and type script. And then notice I can use this magic variable for the selection, but of course you can change it to the entire file, certain lines, whatever you want. In our case, just the selection. Okay, so now that's all I have to do. I can create a new, uh, action within my prompts library. And now whenever I select a, a section of code, or in this case the entire file. Now within the AI tab, notice we have an option right here,
Running Prompt Action1:48
or in this case the entire file. Now within the AI tab, notice we have an option right here, view two to view three. We give that a run. And notice now it opens up the assistant, it uses our prompt, it references the selection, and it performs the update and outlines the changes. And yeah, in this case, if we want, we can apply it directly. All right, so now we have a diff to review the changes. I can hit return to accept all,
Reviewing Diff Results2:11
All right, so now we have a diff to review the changes. I can hit return to accept all, and let's take a look at what it did. Okay, so now once again, re script setup. We're using type scripts. We define the options. This is all correct. We specify our various types. We define the emits, and that should make slint happy. This is great. And yeah, all it took was a single keystroke. So now if you're thinking, well, this is sort of like Claude commands.
Comparing to Claude Commands2:36
So now if you're thinking, well, this is sort of like Claude commands. Yeah, it basically is, it's just sort of the PHP storm, uh, closest equivalent. Uh, and this can still be incredibly helpful because it can apply to single lines, entire files or full selections, and it only takes 20 seconds or so to configure. I think it's pretty cool.
I think it's pretty cool.
