Demo Setup and Navigation0:00
Let's start with a quick demo using my fully configured setup to demonstrate why I love Vim and NeoVim so much. Don't worry about following along with this part, just sit back and relax. In the coming lessons, we will start with a default installation and build it back up together. So let's open Vim in a default Laravel installation with Laravel Breeze. You can see we've got things like file browsers on the left here. We can also fuzzy search for files, so I can find all of the controllers, for example. And by default, this only searches for files that are not Git-ignored, but if I want to search, say, in the vendor directory, I can search for all files and find Eloquent Model,
Vim Text Objects Editing0:36
And by default, this only searches for files that are not git ignored, but if I want to search, say, in the vendor directory, I can search for all files and find Eloquent Model, for example. I can also search for text inside files, so if I want to find everywhere where the string route:: exists, then I can do that as well. But those are things that most editors have, so let's talk about some stuff that I think makes Vim and NeoVim a little bit special. So if we come to our User Model that comes with Laravel, and let's come down to this fillable property here for mass assignment protection. If I pop my cursor somewhere inside these single quotes for name here, I can very quickly
fillable property here for mass assignment protection. If I pop my cursor somewhere inside these single quotes for name here, I can very quickly change all of the text inside there with something else. And if I bring my cursor down somewhere else, like, for example, in between these ones, I can repeat that same change. And notice how I didn't have to retype something else. Vim knew that I wanted to change everything inside the single quotes with the string something else. Let's back those ones out. I can also change everything inside the square brackets in this array, for example.
I can ask Vim to do that and replace that with something else. What else can I show you? Actually, back down on this fillable property here. Let's say I want to put this array all on one line. I can join it back together, join all the lines together. Or I can then split them back out again, and even keeping that trailing comma there. All right, what else can we show? Let's jump to a view file, which has got some HTML-like syntax. If we come down to this div here, we've got all these Tailwind classes. Now, let's say this item's top one here.
If we come down to this div here, we've got all these Tailwind classes. Now, let's say this item's top one here. I just want to get rid of that. I can ask Vim to remove that, and it'll remove everything, including the extra space, so that it doesn't leave two spaces there. I can also ask Vim to change that. And you'll notice that it kept the extra space, so that when I type something else, there's still the space before and after. What else can we show in here? All right, let's come over to this div tag at the start here.
HTML Editing Shortcuts3:05
What else can we show in here? All right, let's come over to this div tag at the start here. Let's say I want to jump to the closing div tag. I can very quickly jump to there and back again. And if I combine that with a selection, I can very quickly select that whole div. Let's also talk about these attributes, these HTML attributes. So see this div has a vf and a class. So let's say I want to get rid of the vf. I can remove that entire attribute with one command. I could also come over to the class over here, and
I can remove that entire attribute with one command. I could also come over to the class over here, and I could repeat that and delete that entire attribute as well. And similarly, I can also change it and all those sorts of things. Let's talk about some IDE stuff as well, just to show that Vim can kind of do those things as well. So we come over here to the end here, we've got this smpt0. So let's say I want to know what the definition of that is. I can ask for that, and we can see that it just is padding-top: 0 for the small size breakpoint.
Laravel Controller and LSP3:59
I can ask for that, and we can see that it just is padding top zero for the small size breakpoint. If I want to add a new class here, so say I want to add some text, you'll see I've got completion on all the different colors from Tailwind. So I can kind of add those in as I like. All right, let's come back to php. How about we make a controller? So I'm just going to pop open a little built-in terminal here and say, php artisan make:controller, we want a resource controller. Let's call it UserController.
artisan make controller, we want a resource controller. Let's call it UserController. So we've made our controller, let's search for that controller. And let's come down to the store method. So we can see here we've got some diagnostic information. We can see in the little column over here, we've got this question mark and this text is underlined. So I can ask vim to show me what it's trying to tell me. And this is coming from the IntelliFence language server that you may have heard of from VS Code.
And when I select them, we can see we've got all the parameters that it accepts. So let's go ahead and pass in the request. And then it's now telling me this part is the rules. So we can come in here and say that name is required. Now we can see we've got an error down here. And this is telling us basically that we forgot to put our ; up here. So we'll add that one in there. What else? We can jump to the definition of this method. So let's jump in to see the source code behind validate.
We can jump to the definition of this method. So let's jump in to see the source code behind validate. We can see that. And then we can also jump back out to where we were again, which is kind of cool. Let's also talk about references. So if I come into my routes/web.php file, and let's come down here and we'll add a resource route for our UsersController. And then you'll see if we come up to the top of this file, it's automatically added that import for us. We can jump back down to where we were.
Running Tests in Vim6:04
it's automatically added that import for us. We can jump back down to where we were. And I can now ask for the references. So this is showing me where this class has been defined. And then the two places where it's used. So in the import and then in the route definition itself. All right, let's do something completely different. Let's have a look at testing. So if we come to the example test that comes with Laravel, and if I bring my cursor down into this first test here,
So if we come to the example test that comes with Laravel, and if I bring my cursor down into this first test here, I can ask them to run just this test on its own. This is really helpful when you're doing test driven development. So you can see it's filtered by test that true is true inside the example test, TestCase. I can add a new test using a snippet. So we'll say test that false is false. This assertFalse. This assertFalse, false.
This assert false. This assert false, false. And then again, I can run just this one test on its own. We'll see that it ran just test that false is false. But I can also ask it to run all of the tests in this file. So this is now scoping it to the example test. And I can even run the entire test suite from here. You'll see that it runs every test that comes with Laravel. Let's talk about alternative files. So if we come to our UserController, and we'll come up to the top here.
Let's talk about alternative files. So if we come to our UserController, and we'll come up to the top here. So there's a few schools of thought on how to structure your tests. But if you follow the school of thought that says that your test structure should mirror your application structure, then we can predict where the test for this controller should live. So I can jump to this with vim, asking for the alternative file. And you'll see here it's asking me to create a file, and it's presenting me with two options. So I've configured vim to kind of know these Laravel conventions, and
it's presenting me with two options. So I've configured vim to kind of know these Laravel conventions, and that there's a unit directory and a feature directory. So in this case, we want a feature test, and then it's gone ahead and created that file for us. I can also then scaffold out this, and I'll just ask for a Laravel test. This is a template I've created. And I can then jump back to that controller. So I can do the alternate command again, go back to the implementation, run it again.
Tmux Sessions and Tabs8:14
So I can do the alternate command again, go back to the implementation, run it again. And you'll notice this time, it doesn't ask me to create a file, because it found one in one of those locations. So that's pretty cool there. All right, let's also just really quickly touch on tmux. So you may have noticed down the bottom here, we've got this little gray bar. This is not coming from Vim. This is coming from tmux. And tmux is called, it's a terminal multiplexer,
This is coming from tmux. And tmux is called, it's a terminal multiplexer, which is a bit of a funny name. But it basically just means running multiple terminal sessions inside one terminal. And so you'll see here, I've got this little, it's kind of like a tab for NeoVim. I can create another tab, and then in here, I may wanna run, say, php artisan serve. And this will spin up our artisan development server. I can then come back to the NeoVim tab, and
And this will spin up our php artisan serve. I can then come back to the NeoVim tab, and it's exactly where I left it off, and I can switch back and back again. So that's really handy when you need to run extra processes, such as a server, or Vite, or Mix, anything like that. Another cool feature with tmux, though, is the ability to have sessions. So if we look in here, I've got one session called Laravel, which is just the name I've given to this project. But I can search for another project, and that will open up an entirely new session in this directory for another project.
But I can search for another project, and that will open up an entirely new session in this directory for another project. And so in here, I could open up another vim session, and I could open up another tab down the bottom here, and do another php artisan serve. And you'll notice that it found the address 8000 was in use, because that's running in the other tmux session. They're all running in this one terminal window in multiple sessions and multiple windows. I can come back to the vim in another project, or I can change back to the Laravel project, and we're back where we left that.
I can come back to the Vim in another project, or I can change back to the Laravel project, and we're back where we left that. So this is really handy when you're working on multiple projects, and maybe they each have different things you need to run. Maybe one's running sale, another one's running php artisan serve, and so on and so forth. So that's pretty much everything I wanted to show in the demo. The only other thing I wanted to talk about is why NeoVim. So NeoVim is a fork of Vim, and Vim itself is a fork of an editor called VI that has its heritage all the way back to the 70s.
