I'm a big fan of Vyas code and have been using the Vim extension with it. But lately, I've noticed specifically enlarged TypeScript projects that's been really laggy and really slow, and the Vim emulation is kind of just met overall. So, what I wanted to try to figure out is if I could set up Vim in a way that uses some of my favorite VS Code features. And so, what I did is over the past three days or so, I've tried configuring Vim to use some of Vyas Scott's features. Now, it doesn't cover all of them; I selectively picked some of the most important ones to me. So, I'm going to be showing you this setup that I got working that I'm actually pretty happy with. And I'll show you everything that I installed and how I set it up, and I'm gonna be walking through that here. If you prefer just to see the end results and look at the dot files for this, I'll put in the description the configuration file for Vim. Alright, so to

start off with what I decided was to go with neo vim over them. That seems just the, or at least vim 8. That seems to be the way to go for them these days, and this seems to be a better option overall. And then the next thing that I decided to go with this was to start installing some plugins, set stuff up. I went with vim plug. I was very happy with it. I've used it before and was overall really solid. And so what I'm gonna be doing is kind of switching back and forth between notion, where I have some notes of kind of what I set up, and then also I have here my own vim, which is just the Neo vim config file. And then you can see over here, over here, look at that. I have basically the keys that I am typing, so you can see the hotkeys that I'm using for this. I'm also using T MUX that I'm going to be just like switching between the two files here. So if you see control B here, this is my leader to

switch between just emulators or terminals, so that's T MUX if you're wondering what that is and why I'm pressing ctrl B to switch back and forth. All right, so this is the start of my configuration file where I just declare all the plugins. So this is what then plug does or how the syntax for it works, and here you can see these are each plugin that I have added. Now, the most important one to get started with, to start getting some of the villa's code features, is this one called conquer of completion or COC dot in vim. So have him add right here, and once you install this guy, he's pretty neat. So let's hop on over to the code, and I can show you some of the stuff we can get with this. So you can see right here I'm importing a function called create tokens. Just going to delete that, and then I'm going to start typing and notice I'm getting some auto-completion here. So this is thanks to that particular plugin, and I can also see on the right over here some

definition of for example that this is a prompt. It returns a promise. This create connection function so it's integrating nicely with TypeScript 2. But anyway, I can type my create tokens and I can hit enter. You're gonna see it finishes the word for me. It also automatically imports it, which is super sweet. And you can see here I can see just definition as well that it takes a user as a parameter. So I can pass any user, whatever I want. So this detection also we can see right here that a little pop-up telling me that I had don't have user defined. So this is all using that particular plugin. Now how this plugin works is you actually need to get a language server or it's running a language server in the background. And if I just search him, I mean hop over here. We'll talk about prettier in a second. These are the extensions that I'm using with it. So you install that base plugin and then it comes with other extensions that you can add into it. So I here have a JSON configuration, prettier, ESLint.

type syrup server pairs and snippets pairs. This is going to complete my / in there, that my parentheses snippets. I'll show that real quick. It's for example, if I do CL, you can see this is a custom snippet I did to do console.log. And how I did that is if I say, I actually forget what the command for this is. I think I have it right here. Yeah, let's copy this. Oops. So if I run this command here, install snippets. Actually, I don't want to install it on this one. That command that I just ran there is how you can individually install extensions. The one that I want is this one right here. So this is the edit snippets. I can see this is my snippets file. And this is how you add a snippet using it. So I gave it the prefix CL, and then I can use it in my code using Auto completion. Let's close out their room. So that's pretty nifty. Another thing that I use with this is GD, which is good to definition. So I'm hovering over this function here, and you can see

it actually took me to a separate file here. This is where the create tokens function came from. If I press ctrl o, I hop back here. I'm still kind of getting used to all the different hotkeys that I'm pressing again now, so bear with me there. But there you go, so that's go definition. Also, if I press command K, I can bring up my definition here for the particular function. Can also do it for whatever I want. And I'll say it wasn't anything else that I want to show with this. I showed go to, showed these two, and control spaces. What I actually bound, actually I think it came by default. So like for example here, you see how the auto completion windows not open. Control space will open this for me. All right, so I'm gonna just press Gd here, go to here, and I'm gonna press f2 to rename this. So another thing that I did is I tried to keep the hotkeys the same as Vyas code, that way I could switch between them if I needed to. So f tu is

rename envious code as well. I'm gonna rename create tokens to create tokens to, and I hit save. And now, if I go back control, oh, you can see it actually renamed this everywhere. So, you get that same cool effect where you get all completion auto imports renamed everywhere, all that fun stuff. You get envious code with this function, so it's super powerful and super nifty. I really like it. The other thing that I have integrated with it is prettier. So, that's an extension that I add to it. So, you can see here I can make it ugly, and I have it running on save. So, when I hit W, it'll actually format everything for me. And just to show you how I have that, all the stuff that I have here, this is a whole bunch of configuration. I just copy and pasted. There's actually a lot of it copy and pasted from the readme. All this stuff is from that, and I think I had to do a particular thing for prettier. If I go up here, I don't remember, and this I

actually need to put it down there. I don't know why I have it all the way up here. I'm glad to define a command here called prettier. That way, when I automatically saved the file, it'll run this command. And there's actually this other thing I didn't - I haven't actually mentioned this yet, but let's open up just a separate terminal here. And this is using T MUX, by the way, so that's not a vain thing. And we'll just open up config slash and them slash preferences. Actually, there we go. So this is another file that you can create to kind of give settings for the language server. So you can see I have no select set to false. And this one is actually - don't even remember what no select does, but I just remembered that was one of the settings that I liked to match with vs code. And this one, you can see I set prettier to format on save for these file types. So those are the things I'm doing. And against that, I can actually switch between these.

two team ox windows that's using a plug-in. This one, vim team ox navigator. It's pretty sweet. So I push ctrl L to go to the actually, yeah, to go to the right, and ctrl H to go to the left. I go confused for a second. I was like, why is ctrl L to the right? But that is how it works. All right, we'll close that, and we'll close that. I just remapped, had to change my leader 40 bucks. That's why I like it. Feels a little awkward to push control B right now. So yeah, so this is really the main plug-in that's gonna give you like that awesome Vyas code auto-completion and just Auto everything that is super fun about it. So I showed you, I think, everything related to that and the preferences and all that. The next thing is my theme. So this is really just a small thing. I actually really like the VS code default dark plus theme, and unfortunately, I couldn't get like a similar one that worked nicely, weird actually colored things the same. So what

I did instead was went with Grove box. This is another favorite of mine, and so that's this plug-in, and this is what looks like. You saw the syntax highlighting for this. This is another one, but one thing I noticed when I add this plug-in, it actually looks super ugly by default. I need to add a language sent or a syntax plugin, so I installed this TypeScript syntax plugin. Yeah, it's, and now it's been working great. It's been syntax highlighting stuff correctly, so that's the combination I'm using for just the color and what it looks like. Next up is Nerd Tree, so this is how I got files to show up or a file tree. So let's go back to my structure here. So I have it control in, and you see here's my file tree. Now I have a few extra things going on besides just like a default Nerd Tree configuration, which we're gonna get to it in a second. I bound it, I think it's a default bind, either Ctrl N is or they had me, yeah.

right here. I added a bind control and opened up the air toggles that tree. Okay, so the other things that installed this. So this. This is what this comes with. It's just a basic tree where you can, you know, click files. So I can click this, open up the file. Now, the way I actually navigate between these two trees is actually with the MT MUX navigator. So I'll actually push Ctrl L to go to the writing, Ctrl H to hop back and forth. So that's how I hop between the tree. So I can press Aziz to open and close files and whatnot, and you can do all your file tree-related stuff in here. I'm not going to go through all that stuff now. One of the nice things that I really like about the file tree in VS Code is that they color-code it. So you can see here that I've made a change in index, and so I can see that it's red, and I can also see that it basically has some errors in it with the TypeScript compiler. And that's

why it's red. Now, if I make a change in auth, for example, and it's a good change, like we'll just console.log hi, and I go to another file, it's gonna turn, I don't know what color this is, like an orange-yellow thing, tan. So, that's really nice. So, I basically, in my mind, I have this color association where I know whether their file is modified, deleted, new, that sort of thing. It's super handy. So, it integrates with git. So, one, like I see if I get a similar thing going, and I could get kind of a similar thing going. So, there's this plug-in called, not this one, well, it kind of integrates with this, but it's called a nerd tree git plug-in. There's two of them. So, there's this one, Bay, this dude, let's put them together, and let's Britain this guy down here. Alright, so these are the three plugins, well, these four, that really kind of go together with nerd tree here. So, these two, you can see, are doing the exact same

thing this one I could not get working properly, and this one actually maps colors to the files, but for a reason, it never looked correctly on mine. I don't know if it's because I have grabbed a boxed and like conflict with that theme. I tried disabling it. I tried a whole bunch of stuff. Couldn't get it working, and so I just settled for this one. And so, what this one does is it does little icons next to it, so you can see I have actually touched the index file, and I have touched the auth file, and you just see these modified, and we can see these X's up here for the folder tree. So, they have these little symbols. I don't like the symbols quite as much as the color coding, but I'll compromise there. So, that is what this plug-in here is doing, is that checks git, and it might basically set an icon next to the folder tree. And for this to work, it also uses the syntax highlighting one. Will actually a syntax highlighting one I installed with this, so maybe I don't

need this one now. We'll see, and you can see here I have a thing to comment stuff out. We'll talk about him in a second. I mean, there's this plug-in called dev icons. That's where you can see I have like TS and these sort of things going. Now, to get that working was kind of interesting because my font wasn't supported by default. So, I had to go to... I'm using Iterm too. So, I went to my preferences, and I actually installed a new font specifically for... Let's go. This specifically for... On this. It's a nerd font. So, I installed this font here. I'm trying out ligatures. I'm not sure if I actually like them or not, but I am trying them out. But yeah, so I had to actually install a separate font. And if you go to the readme of this guy, of dev icons, you can read about where you go to actually install the font. But after I install the font, it worked correctly, and I can see these little extensions here now. So, that's what these do. So, I got

like a decent file tree going on there with nerd tree. It's quite nice, but that's not the only way that I actually... oops, I kind of... oh yeah, I just reopened that. I was like, What'd I just do? That's not the only way that I actually like to navigate. So, I also like to navigate... whosh, I'll show it. Envious code first, command P opens up this little window here where I can, like, you know, go to different files. And it's a fuzzy finder of files. So, for that, there is this plugin that I got called ctrl P. And so, it works the same way. So, I hit... I actually just special binding to command P as well, so it matches. And so, I can type a file in here off, and then I can switch to it. It's been changed. Yeah, that's fine. And I can switch to the file. Now, notice one thing that I did is I have my nerd tree highlight the file that I have open here. That actually took a special configuration as well. So, that's what

this I have did like a little bit of code here. Where did I put it? I haven't organized this quite too well yet. Wall mat though, this is one thing I added. I had nerd tree ignore node modules, and I also had my fuzzy finder files ignore all files that are ignored by git, and that's what this command does: ignores a stuff in the ignore. They put it down here, yeah, here it is. So I have these two functions: is nerd tree open and sync a tree, and this buffer enter thingamabob err. What they do is whenever I switch files using command P and I type resolver, you'll see it highlights it here on the left automatically. So that is what that's doing. So that's pretty nice. This is the way I like to navigate now. Getting command P to work was actually kind of interesting. So if I go to, and this just kind of an AI term to thing in a Mac-specific thing because the command keys doesn't really bind well. So what I actually do is when I hit command P, it

actually sends: ctrl P, so it actually basically hits: here and actually types out ctrl P and launches it like that. So, that's how it actually got IMAP command P. I actually did it through I term and not through them. And I did basically a similar thing with my commenting out stuff, which we're going to talk about in a second. But yeah, so that's fuzzy finding files, so that's pretty handy. And this is just a fun way I like to navigate, similar to how you could do it in VS Code. Okay, so that is how I find files and stuff. Let's talk about this guy. I haven't talked about my comments are out yet, so I bound this to command slash, the same way you do it in VS Code, so I can select files and it counts them out. It's this plugin right here, Nerd Commenter. And to get him working, I mapped plus plus. I just picked an arbitrary keystroke that I was never gonna use, and it calls this function. And then in my I term to preferences profiles, no keys key.

bindings. I have command slash send plus plus, and it triggers that. And so I can select groups of code and command slash to do that. And we can hop over here, and we can do it with a real piece of code if you want to command slash comment it all out. File has changed just reading it. Do you really want to write it? Yeah, I do. Alright, so that's handy. What else do I have? I talked about that, and okay, so this is pretty much the last thing is the gutter. So, envious code, I can know where in my file I've changed stuff with this little gutter here. So, I can see I've added these lines here. I can see I modified this line 'cause it's blue. It's color code and stuff with my resolvers. I thought maybe there was a red one. Maybe red only shows up on the right over here. It's quite small too, but there you go. Color codes it. So, this gutter plug-in wears it here. This one here gets the same effect. So, here you see this a

little squiggly, and if I go to my index, you can see a squiggly here. And how it works is I think my leader is this slash. I actually forgot the things P maybe. No, I actually totally forgot what my key for this is. Basically, there's some key combination that I can press to get this effect, same as clicking here, and I can see the diff. I forget what my key combination is. I haven't memorized it yet for that. But yes, so I was able to get that with the gutter. That's pretty sweet. So, I like that a lot. And also, this one I do remember. If I can actually go to the next one by pressing the little bracket there. So, bracket my shade, press bracket once, and then I press C, and then it'll take me. I'll bracket C, bracket C, bracket C. And what it does is it just takes me to the next modified line. So, it's a pre-handy one. So, this gutter was pretty nice. And again, that's another one that integrates with Git and tells me which

line has changed. So, there you go. That is my configuration with all the plugins that I end up installing to get this working. I'm gonna put this entire file again in the description if you want to check out any of it. I think we went over most of it that was of relevance besides just a bunch of junk in there. And really, the conclusion I came down to playing around with this is it was actually really nice at first, and I forgot how nice it is to just type without lag. So, like, the vim stuff is really snappy, and when I press stuff and move around, it's really responsive, which was just quite a nice change from using VS Code Vim emulation for a while. And so, I liked that a lot, but everything else just feels like slightly worse in the VS Code version, which I'm kinda like about, but like, I'm okay with. But I think the biggest thing that I ran into is the server, or the TypeScript server, language server works great with small stuff at first like this, but I found when I tried

doing this in a large project, and maybe I just need to configure the language server. It was lagging just as bad as the VS Code was, so I think the real problem is these language servers don't work well for large projects, or at least I'm not configuring them well, or I'm doing something wrong that makes them really slow and really unresponsive. Because I was getting basically problems with them just as bad, which was unfortunate because it was working really nice at first. So yeah, I'm basically running into the same problem with basically there's the language server does not work as well as I'd like it, at least the TypeScript one. So I'm not sure if I'm gonna continue using this Vim setup, although it is pretty sweet. But yeah, that's pretty much it. I probably should be switching back to VS Code still, but this is what I would do if I was going to be using Vim today. But I'm getting the same lag, I might as well try to fix it in VS Code, but yeah.

That's pretty much where I'm at with it, you.

How to Configure Vim like VSCode

I'm a software developer who makes videos about React, React Native, GraphQL, Typescript, Node.js, PostgreSQL, Python, and all things coding.