Mode and Keybinding Primer for the Vim-Curious

the programming world splits into two groups those who use them exclusively and will continue to do so until the day they retire and those who don't but are still a little venturious so let's see if we can help out that second group in this little bit i'll show you some essential vim key bindings that you can use in your current editor of choice whether it's phpstorm or sublime text or vs code all of them have some level of support for even mode so for example in phpstorm in my plugins directory if i look for vem you'll see there's a plugin right here that i use on the other hand if you use say sublime text sublime includes support out of the box but it's disabled so if i were to search for vintage mode and the preferences yeah by default vintage mode again that is sublime's them key binding mode it is ignored so you would simply override ignored packages to remove vintage mode and that's it you're all set to go there and of course the same is true for vs code okay so have a look let's open up any file here a user factory now if you've never used fem before then you know that you can click anywhere and just start typing pick up the mouse move the cursor start typing very standard stuff and i'll undo that however with them we need to think in terms of modes so let's have a look in php storm i can go to tools vim emulator to effectively turn on vim mode but now immediately when i did that everything changed for example you can see the cursor right here on line 25. let's do exactly what we did before where we start typing how about the letter t nope nothing how about the letter r nope how about the letter s something happened there what about the letter t again okay well now that's working what about r okay so what's going on here and this is what often confuses people they try out vim but it feels like it barely responds to what they type in some letters register and some don't and again that's because you need to rework your brain to think in terms of modes and i'm going to show you three in this video the first mode which is the default mode is called normal mode now you can enter normal mode and you need to memorize this by pressing the escape key now when you do so we use this mode for moving around the editor but most importantly it's not for inserting or writing new text for that you need a different mode called well insert mode all right so now we have two different modes a normal mode for moving around the editor and an insert mode for inserting text so why don't you work along with me we'll set the carrot here i'm currently in normal mode i will hit the letter i to switch to insert mode and as soon as i do that the editor effectively returns to what you're used to where you can now start typing i can hit delete to go back everything you're used to but now when i'm done i hit escape again to switch back to normal mode so when you're using them you're constantly switching between these modes and it generally follows a pattern of escape for normal mode move to the part of the file you need to edit press the letter i to switch to insert mode make your changes and then hit escape again to switch back to normal mode and i know that may sound ridiculous when you first hear that you might think or i could just move the cursor here and trust me you're not wrong but i promise you if you can drill some of these things into your head you won't be able to go back i used vim for many many years and even after switching to an editor like phpstorm i wouldn't have been able to make that transition if phpstorm hadn't supported a very solid set of them key bindings because it's so very drilled into my fingers okay so we have two modes escape for normal mode i for insert mode let's hit escape right now to move around my file i'm going to reach for the h j k and l keys and have a look at that on your keyboard we'll start with j if i press j i go down a line and i can keep pressing it down now k is the opposite it'll take me up now i think in your editor you should be able to hold down either of those keys to quickly go up and down so j to go down k to go up now of course there's countless ways to move around a file so for example i could hit control d to move down 15 lines or so and control u to move up but let's not worry about that right now there's too many key bindings for now j will quickly take you down and k will quickly take you up now what about h and l what's it j to go down a little bit l is going to take me to the right and h is going to take me to the left and again this may sound bonkers to you but i promise it does not take very long before you don't even think about it so let's say i wanted to add something to line 17 i would hit j to go down i would hit i to switch to insert mode and then i would begin typing protected thing equals foo alright i'm done i press escape to switch back to normal mode where i can once again hit k and j and h and l to get around my file so again this is really important if i hit i again to switch to insert mode while i'm in this mode i can't move around the file if i hit j that doesn't mean go down that means insert the letter j because of course i'm in insert mode if i hit k it doesn't go up because i'm in insert mode instead i hit escape to switch to normal mode and then i can press j and k now one of the other things you frequently do in your editor of course is you select code right if you want to change something you might grab your mouse and select it but when we're using them or then mode we almost want to imagine that the mouse doesn't even exist any action you need to do can be accomplished directly on the keyboard so how do we go about selecting text if i can't touch the mouse and the answer is through a different mode and this mode is called visual mode all right so once again i will hit escape to to verify that i'm in normal mode and now i'm going to hit v for visual and notice immediately when i did that it selected the letter s so for now think of visual mode almost like normal mode but instead for selecting things so for example if i hit l to go right i'm not just moving right i am selecting every character to the right or if i were to hold down l we would go in the other direction now if i don't want to do that selection of course i hit escape one more time and now i'm back to normal mode all right let's do it again i'm going to hit v but this time i will hit j to go down now i'm selecting down or k to select upward so you have three modes here normal mode insert mode and visual mode for selection now once again i've decided i don't want to do anything here so i will hit escape okay let's hit j a couple times to go back down there and l a few times to go into the middle and now one thing that's especially appealing to me about vim is that it's effectively a language the way you interact with your editor is a language so for example if i wanted to visually select all of the text between these single quotes here well i can use a language of sorts for that v for visual mode and i'm going to select the inner text between the single quotes so i'm going to use i for enter and then single quote you see what i mean it's like a language visually select the text in the inner quotes or inside the quotes let's try that again just to make sure we're on the same page escape to go to normal mode and sort of undo that selection i can move around with h or l to go the other way and anywhere within this quote i can say v i single quote to select the text within there okay but now how do we work with it if i start typing characters here it starts behaving weirdly again like we talked about at the beginning of the episode let me hit the letter u a couple times in normal mode to undo again u for undo it's a language anyways if i go back v i single quote i'm now going to use the letter c c stands for change so now i've done two things here i've removed that text because we're going to change it but it's also switched me into insert mode now i can change this to anything i want all right i'm done inserting text escape to go back out so let's do it again and then i'll show you a shortcut v i single quote c for change i'm now in insert mode and i change it again and then escape to go back out okay but as it turns out if all i want to do is change the inner text within those single quotes then i can instead say c i single quote for change enter single quotes let's try it c i single quote and now i can update this hit escape to go back to normal mode but now what if these were double quotes like this all right well then i would say c i double quotes c i double quotes change enter double quotes and again escape to go back to normal mode pretty cool next what if i want to select this entire line well i don't want to hit v and then hold down h like that instead if i hit a capital v that means i'm going to visually select the entire line like that so now we can see there's sometimes a distinction between the lowercase letter and the uppercase letter which again initially seems bonkers until you never think about it again and you'll even get to a point where you couldn't imagine not using this system that's why so many of us are are so very annoying when it comes to to vim or vim modes okay so anyways at this point we've selected the line we can still use our language so if i want to change that to something else i hit the letter c or if i change my mind i can hit escape to go to normal mode and u to undo and i'll hit that a couple times now what if i want to delete this line entirely then i can hit the letter d for delete c for change d for delete or i for insert mode v for visual mode it all makes perfect sense once you understand what you're doing here now it would be too much for me to show you in this video every single key binding and i don't think that would be useful if you're into this you can start playing around and then of course every time you want to figure out for example well how do i just add a new line above line 17 here because i want a space after that property well then just google that and you'll learn that if you hit a capital o that will add a new line above the current carrot and switch you to insert mode but i would recommend holding off and learning those things only when you need them otherwise if if somebody fills up your head with 300 key bindings it's gonna leak and you're not gonna retain any of it so let's focus on the basics for now j to go down k to go up l to go right h to go left escape for normal mode v for visual mode or capital v for visually selecting the entire line c for changing something that you've selected u for undoing what you've changed and of course i for insert mode now i'll show you just a few minutes more and then we'll call it a day what about the situations where i want to change a word here how about corresponding well change in error i don't have quotes here so how do i just say change this word well we would use w for word change inner word c i w and again escape to go back to normal mode let's do it again c i w and escape for normal mode so if c iw works for changing the word then v iw should work for visually selecting the word let's try it v-iw now i've selected that word and because it's selected i can do anything i want i can hit d to delete or again u to undo or i could once again press c to change what i've selected so again try to think in terms of modes and try to think in terms of language what are you trying to change what are you trying to delete if you're trying to go down well yes you would hit j but if you want to go down five lines could you just hit five j and the answer is yes and that language is basically press j five times if i want to go up 10 lines while i'm online let's do line 20 right now what if i hit 10k 10 up now i'm on line 10. my point is this is a language okay two more things and then i'm out yes i can hit j and h to go left and l to go right but i can also advance using the letter w advance a word so i'm on corresponding here i'll hit c again and now i've moved on to the next word if i hit b i'm going to go in the opposite direction b b b b b so if i wanted to move the carrot to model here yeah i could do it in a bunch of ways i could just hold down the letter l and that would be okay it's not really the the vem way but it would work let's hit h to bring it back i could also hit as we've learned w a bunch of times to move forward or b to move back or it's a language so if i happen to know that i want to move five words ahead i don't normally do this but again it's a language i could hit 5 w and that would move me forward or let's try 8 w there we go and that one worked out it's a language so i could do that but of course the last thing i'll show you today i'm going to manually bring the cursor back here the last thing i'll show you is the the forward slash key or this one right there but in normal mode so escape for normal mode i'll hit forward slash and you'll see immediately it brings up this prompt at the bottom now i can search for anything i want all right i'll give it a shot forward slash and i'm looking for that string model so i will type model and notice i have something called incremental search turned on so as i'm typing it automatically moves the cursor to where the first occurrence is and i'll hit return okay now i've moved to the caret where i want it to be now i'm at the beginning of the word so if i simply want to change this word i could say well two things you learned about c i w right changed but let's bring it back with you a couple of times i could also just say cw my card is at the beginning of the word i want to change the word so i press c w okay and that is almost always how i get around my editor so for example if i wanted to go to faker right down here but my cursor is right up here well again i could hold down j and then hold down l and nobody's gonna beat you up but let's bring it back in real life what i would personally do is i would hit forward slash i would type faker and it would take me to the first occurrence now what if i actually wanted to go to that second occurrence of faker that's on line 27 all right i press n for next occurrence or if i hit a capital n it will go to the previous occurrence all right so let's try it one more time forward slash faker enter n for next and i'm at the beginning of the word i want to change it so i press c w to change it and then escape to go back to normal mode okay so we've covered about two percent of the vem ecosystem but you know what that two percent is actually going to take you a really long way and i assure you if you can turn these keystrokes into muscle memory you'll never go back

Channel: Laracasts

Views: 1,295

Keywords: web development, php, programming, laravel, laracasts, jeffrey way, coding

Id: vO14Jc3_SW0

Length: 16min 52sec (1012 seconds)

Published: Fri Dec 03 2021