Mastering VIM Motions in VSCode (Mouseless development)

I'm going to show you how to set up your Vim motions in vs code so you can start programming like a pro yo what's up I'm Melky and I'm a software engineer at twitch and today I'm going to bring you a bit of a spicy video on how to set up your configuration and your key bindings in vs code to allow you to start using Vim Motions like an absolute 10x engineer so I recently made a video about how I'm moving away from neovim to vs code again I'm sorry Prime I'm sorry I teach if you haven't watched the video go check it out and I got a lot of questions about well Mulkey what are your bindings what are your Vim motions can we have them please we need them here I'm going to show you everything you need to know to set up your vs code to give you that smooth crispy Vim feeling so I'm going to start off by acknowledging that there is a bit of a struggle using vs code with them it feels a bit clunky you know using the filo tree or terminals even just switching between Windows it's not all that intuitive so I decided to research an dig down into these settings of vs code to create a configuration that give you the best Vim motion experience before we go any further there's two things I want you to do the first one is obviously get the Vim extension by vs code Vim it's mandatory this is what allows us to have the Vim extensions that we use and plugins necessary for key mappings and all of that and the second thing I want you to do is actually edit up and clean up our UI here you see vs code comes with all this stuff that you don't really need and it's just it's just too much for me so what I do is I go to view I appearance and I toggle off the status bar I toggle off the activity bar make sure I toggle off the minimap nobody uses that toggle off the breadcrumbs and there you go now you have a much more cleaner Editor to use and have fun with I discovered to get the best experience you have to modify two files one is your settings.json and the other one is your key bindings.json so let's just get started right now the bare minimum what I have is line numbers relative I think it's just easy to jump between numbers when they're relative from where your current positions it just makes more sense for me you don't have to do this and for my Vim leader key I use space pretty simple pretty generic pretty popular leader key to have in Vim motions so the very first key mappings I'm going to talk about is with the navigation and that's just switching between an open buffers that's just shift L and shift H you can see here I'm jumping between the tabs this is just standard super easy and the other one that I really like and this comes with the Vim extension is leader V to open up a vertical pane or I can be in the pan and do leader s to open up a horizontal pane now this again is standard standard Bim motion but in vs code you'll be surprised how not obvious it is to create these so I hope these help you out it just makes jumping between files super easy and as I just alluded to you can have here I have my classic leader age leader J leader K and leader L to jump into between all the different windows I have open now within vs code there is a feature we want to take advantage of and that is the built-in terminal now you can see here I have some keys set here for the built-in terminal shift J to toggle a window of the terminal itself and you can do shift n to open up a brand new one and then have shift a and shift B to toggle between all my open terminals now this is super easy and super handy when you're running something with a server and you know a separate react client or if you have something going you want to deploy to GitHub or install packages it's super critical to be able to quickly navigate to your terminal jump between all the open instances and use them how you want navigating is pretty straightforward but it brings us into our very first gotcha and that's actually file tree you see in vs code the file tree is known as the Explorer and vs code does something a little strange this code likes to separate its key mappings based on the command ID and all the key command IDs under Explorer are not the regular other ones that are fall under like adding a file or navigating between files and so what this means is when you're in the Explorer your key mappings actually don't map over meaning everything you have in your Vim settings they don't work in the file tree which is why we need to rely on key bindings.json to overwrite some of the existing key bindings we have to allow us to navigate and use the file tree efficiently and like we want to so you can see here the only key I have in my settings.json file is leader and E and that actually opens up the file tree for me now in the keybindings.json I have a few commands that allow me to create a new file create a new folder delete the file and bounce back out of the file tree so for example in components I have this forums folder here if I want to add a new file I can do control N I can put new file.tsx that bouncing me to a brand new file here I can go back and let's say instead of a new file I want to do a new folder I can do control shift n and that allows me to new file and that's a new directory nothing in it but again Ctrl n new file dot t as sex and now a bunch of new files and now to delete them we can just do control shift d that leads a file Ctrl shift d to delete the folder and again Ctrl shift d to delete that last file that we created and now this brings us to the nice to have section of my binding so I don't have too many bindings I keep it pretty simple for the most part but I do have a few things that make editing so much easier for me for example Peter W allows you to save a file that's pretty standard another one that I have that I you know I can't live without is leader f this allows me to look at and navigate through different files in my project again super critical for faster navigation and that mouseless Vim motion that we're looking for another cool another critical one that I have is you know I can pilot a block of code I can do literacy and this allows me to completely comment the code if I want I can undo that I can go back up and I can just move and indent this code if I want to you know stuff like that could do multiple indents I can do you know this is just standard stuff that comes kind of pretty big to the event but it's necessary to kind of create and bind to your vs code to get you that smooth experience that we expect well that's it there you have it those are my settings for vs code to kind of have the best Vim experience that I could possibly get to I like to keep everything very simple I just like to use the generic vimotions and everything built in I do a few things that may just be for me like the leader key and creating a thermos but I will leave a link in the description for both of these files for you to take in use a starting plate or even modified to see how you want to use them that's one of the beauties of them and I'm curious to see what you guys will do with them if you have an existing file right now with your configuration drop a link let me know maybe there's something I miss and I need for my workflow to make myself even more efficient and to you know grow and learn new things about them but I hope you guys enjoyed this video as always I got two things I leave you with the first one is who cares use the editor that you want if you don't want to use Vim motions well I mean yeah you probably shouldn't use the emotions but use vs code use new them don't use Sublime I'm joking use Sublime don't use Adam though there I'm serious and the last thing as always oh you gotta power it

Channel: Melkey

Views: 52,494

Keywords: video sharing, video, sharing, computer science, software engineer, silicon valley, computer programming, coding, learn to code, machine learning, artificial intelligence, cloud, python, javascript, how to code, Data scientist, AI developer, Machine Learning, vscode, neovim, vim, getting started, mastering vim, best vim setup, pro developer

Id: GST8we5uABo

Length: 7min 40sec (460 seconds)

Published: Thu Jul 13 2023