In the last lesson, we set up a few language servers for handling code navigation and diagnostics. But out of the box, NeoVim's completion feature is a little bit limited, so let's install an autocompletion plugin to make it better. We'll jump back into our plugins.lua file just underneath where we installed the language server plugins. And I'll paste in this code for the completion engine I like to use. This one's called nvim-cmp. Now this is really just a completion engine. And so we need to install a few extra plugins to provide different sources to the engine. So this plugin here is what gives it information from the language server to complete from.

come up as a completion option. We then have another one here that will complete based on file paths on our system. So if we start typing in a path like ./something or other, it will look on our file system and help us complete those. The completion engine also requires us to use a snippet engine. So the one I'm using here is called lua-snip, and then this is the plugin that integrates it with this completion engine. And this last one here is just a little bit of eye candy. It adds some icons into our completion menu to differentiate between functions, variables, classes, and all those sorts of things.

It adds some icons into our completion menu to differentiate between functions and variables and classes and all those sorts of things. So once again, we're putting our config in a custom module. So let's go and create that in nvim-lua-user-plugins-cmp.lua, and I'll paste in my configuration. Now this one looks pretty overwhelming, I have to admit, but like most of the configs I've shown so far, it's all scraped together from the readmes, docs, and wiki for the plugin to make it work the way I like. If we look on the GitHub page for the plugin, you'll see some basic config examples. And then if we jump over to the wiki, we'll see they have some extra mappings to make the tab key do all the hard work.

And then if we jump over to the wiki, we'll see they have some extra mappings to make the tab key do all the hard work. So if we come down to lua-snip, you'll see we've got our mappings here, which is exactly what I've just pasted in. So let's come back over here and we'll quickly walk through this. So first of all, we're importing the completion plugin itself, as well as lua-snip and our lsp-kind, which was that little eye candy plugin. We're then defining a local function, and this one comes straight from that wiki. And this just allows us to determine whether or not there's any text in front of our character as we're typing.

And this just allows us to determine whether or not there's any text in front of our character as we're typing. So when we push the tab key, it knows whether or not it should actually enter a tab, as in like our four spaces, or whether the tab should actually trigger completion. We then come down to the setup method for the completion, and we have to pass in our snippet engine. So in this case, I'm using

to decorate things a little bit. And then we come down to our key mappings. Now this is all pretty personal, the way you expect your tab key to work, and it probably depends on the editor you come from, but this is the way that I like it to work. Effectively, what it's doing here is if the completion menu is already visible, then the tab key will select the next item. If we're inside a snippet, and that snippet contains multiple jump points, so maybe it's got a function snippet, and you can jump between putting in the arguments and then putting in the function body, then this will jump between those. And then we fall back to using our hasWordsBefore method, where we'll trigger our completion.

in the function body, then this will jump between those. And then we fall back to using our hasWordsBefore method, where we'll trigger our completion menu. And then last of all, we'll fall back, which will fall back to the default tab behavior of just entering our four spaces or our tab key. The Shift tab is for shift tab, and this kind of just works in reverse. And then we have the enter key, which will confirm our selection. We're then setting up the sources we'd like to use. So these correspond to the plugins we've set up. So the first one is the language server protocol, and this next one is to provide some signature

And it will also show us a preview if possible. And then last of all, let's jump into our LSP config that we created earlier, and we'll paste in this snippet here, which again is a little bit confusing. But essentially, NeoVim reports a set of capabilities to the language server to tell the language server what NeoVim understands. And our completion engine offers some extra capabilities. So what we're doing here is updating Vim's standard capabilities with some extra capabilities from our completion engine. We then need to pass this variable to the setup method for all of our language servers. So if we come down to our setup method here, we would say capabilities equals capabilities.

We then need to pass this capabilities variable to the setup method for all of our language servers. So if we come down to our setup method here, we would say capabilities equals capabilities. And I can't wait to have some auto-completion. It looks like I've also made a mistake. capabilities. Excellent. I'm going to copy this one here and paste it down inside our Tailwind one. And then I'll also come up and paste it inside our Volo one. And pop a comma on the end. So let's save all of these using :w to save everything.

And pop a comma on the end. So let's save all of these using wa to save everything. And then we'll run Packer Sync to install those extra plugins. And there we go. We can also see we got an update for the Mason plugin we installed in the last lesson. So let's quit out of this, and we'll jump over to the Laravel project we were playing with earlier. And back into this customPromote method on our User model. So I'm going to go ahead and delete the code that's in here. And we'll save this file.

So I'm going to go ahead and delete the code that's in here. And we'll save this file. And then let's reopen it again so we have our latest settings. And let's go and retype this snippet using completion. So I'm going to press O to come down into this function body. And then we can say this. And you see we're already getting completion here. So I can press tab. And then I'll say update. And so I can tab to this.

And then I'll say update. And so I can tab to this. Now notice how after my cursor here, we've got this extra bit of text here. This is the ghost text I was talking about earlier. It'll show us what the completion is going to be. I think the only time you want to disable the ghost text is if you're using Copilot with NeoVim, because I think it wants to use that instead. So we'll accept this update method. And now you'll see it's also telling us what the parameter is. So this was that LSP signature help.

And now you'll see it's also telling us what the parameter is. So this was that LSP signature help. So in this case, I want an array. And it's going to be level is level. And again, we're getting completion here. And then we want the title. And you'll see here we're getting completion from the buffer. So even though this is a string and the LSP is not going to give us any help, we can still use our buffer completion there, which is kind of nice. But you'll see now we get title as a variable.

And have a look through the wiki to have a look at other example mappings. But for now, I do want to show you one last cool trick. I'm going to jump back into our .files repository and back into our plugins.lua. And I'm going to install one more language server. So let's come back up to our language server protocol. Because I need to install one extra plugin here, which is called SchemaStore. And this will give us a whole bunch of JSON schemas. And come into our lsp.config file and I'll paste in a new language server down here for JSON. So this is the JSON-LS language server. And we're passing in our capabilities, of course.

So this is the JSON-LS language server. And we're passing in our capabilities, of course. But for this one, I'm passing in some custom options. So here's where I'm requiring our SchemaStore plugin that we've installed. And giving it all of the schemas from that. So let's go ahead and save everything again and run another packer sync. And then now if we come back over to our Laravel project. And I'll save and quit this and open up a tsconfig.json file. In here, I'll open up my curly brackets and then I'll type my single quote. And now you'll see I'm getting completion inside this JSON object.