Vim in VS Code

foreign [Music] all right am I odd hello everyone welcome to the live stream this is Runner I will be your host for today's live stream I got we already have several people in the chat uh Michael Montalvo hello Daniel Chavez uh sarab Chopra good morning good evening good afternoon everyone thanks so much for joining so excited for this uh podcast but before we jump right into it it is Thursday so I want you guys to enjoy our throwback Tick Tock Thursday segment have you ever had code and stack Overflow or anywhere for that matter that you wanted to explain to you GitHub co-pilot Labs does exactly that it's a companion extension to GitHub co-pilot so if you have them both installed just click on the co-pilot icon and in a new file paste the code in highlight it and then you can make sure that you select explain code and choose ask a copilot and it'll give a human readable explanation of the code and if you wanted a more concise bullet point explanation you could just choose code does the following as copilot and a more concise explanation is listed [Music] thank you nice there's a lot going on with uh co-pilot and AI in general so you guys have to check out our Channel and some of the videos that we're rolling out but it's an exciting time and I am psyched about that but I'm even more excited about our guest today who is Michael Chen and he is a DX engineer at chromatic he's also the host of a really uh cool podcast and oh we there was a react documentary that was created and he's like um definitely plays a key role in that so check that out I love when they have Tech content that spins it in an interesting way and I enjoyed all watching it so definitely check that out but he's also got a YouTube channel for covering content creation tools tips and Tech for remote Educators and a lot more but today's topic is going to be all about them so let's bring him out so he could tell us more about it Michael hey how's it going it's going awesome how are you I'm doing great it's beautiful morning here we kind of stopped getting rain in San Diego and I know that nobody wants to hear people from San Diego complaining about rain so I'll stop but you know it's great it's great having a great day glad to be here nice so go ahead uh let's Jump Right In uh what are you going to be chatting with us about yeah so today we're going to be talking about Vim but particularly in vs code and I think uh you know learning Vim inside of vs code is a really fascinating type of thing because you know there's a lot of things that you have to know in order to just use Vim at all you know a lot of there's that Meme about how hard it is to just get out of it how to quit them and I think one thing that's really fun about learning Vim inside of vs code is is just an add-on so if you're already good with vs code or you know maybe you're just starting with vs code you can learn all of the vs code stuff and then you can kind of augment your actual editing experience with some of the really cool stuff that Vim offers because there's a really great uh Vim plug-in for vs code and so today my hope is that we'll just kind of be able to cover some of the things that I find like incredibly useful from them without having to do all that precursor of yeah okay so before we jump in before we get into that can you tell some of us what Vim is some of us okay sure some other developers that never even touched it let's do that let's do that so uh so there's two parts of Vim so Vim if you're not familiar with it if this is the first time that you've ever heard the word Vim or maybe you've only heard it used as a cleaning product before uh Vim is an editor it's one of the first editors uh you know that was ever popularized and it exists in a terminal and so there's all these commands that you can use to navigate code specifically inside of a terminal so this is used before we had access to mice and uh you know things like that is it its own terminal or is it like uh something that works with other terminals yeah so it's an application inside of a terminal so it'll just kind of it's just made for editing text but it's just like any other kind of terminal application where you you know fired up and it's going to do its thing got it all right cool yeah and actually I mean if we wanted to I could I could open something up in Vim if you wanted to see the actual editor um so if I open up a terminal over here um gonna pull that over oh I'm gonna have to get give me just a second sorry okay cool I'm back um so I have so like this is my site right here um I'm just in a terminal so terminal right up here I can type Vim Dot and this will open up the whole project inside of Vim in my terminal and so it's just a text-based editor I can go into you know these CSS files it has a navigator open this up and then I am working inside of Vim now one of the things that's kind of uh annoying about Vim is that it doesn't have a really great uh package management system so you know something like vs code it's so easy to get packages you just open up that extension pane you search for a package and likely there's something that you need so right now we see this is just a CSS file but there's no highlighting or anything like that and adding those packages and Vim can be like a real real nightmare uh it's not nearly as ergonomic as some of the tools that we have so while this is a great editor um it's kind of it feels it doesn't have those modern conveniences so with fanatic you mentioned dad let me just throw in one question someone and it's not to get a sidetracked it's probably just a yes or no but uh tayoma Dees asks could you please also tell us how to use Vim for vs code along with GitHub co-pilot now do you know of any potential of using AI with Vim that you've heard of so far I know you know that's coming out with co-pilot I haven't heard anything in terms about them yet but yeah that's a good question I have not um I guess in the way that I use I have used GitHub co-pilot I haven't had any problems per se but I kind of do it where I you know I'll put in like a code comment like hey uh I want a function that you know takes uh string and appends exclamation points to it um uh so that's how I do it and then usually you can just like you know enter tab complete on that and so there's really no issues there and then once the code's in there that's when I would use Vim um so I don't I don't know of any particular issues uh with that but um you know besides kind of prompting it for the code and then editing the code once it's in there okay yeah I don't know if you try to experiment with it with them um all right yeah go ahead and continue yeah so um so yeah so so VM is an editor on its own but Vim has a really unique way of navigating code so it has it's what's known as a modal editor and you can have different modes and I'll just kind of show you you know before we dive in I'll I'll show you some of the things so right now I am in normal mode um and I can't type any characters so you just kind of have to believe me um but like I can't uh type because every key on my keyboard is in normal mode Vim normal mode a macro where it's going to instruct Vim to do some type of action on the text now if you watch here one of those actions is I which it puts me into insert mode and so if I hit I it's going to put me in insert mode and then I can type so every browser is kind of like vim's insert mode and the way that I think about it is like every browser that we or every text editor that we use today is kind of like a Vim in insert mode and you can escape out into other modes so there's the normal mode which we'll focus a lot on today um we have a visual mode so if I hit V it goes into visual mode which allows me to do visual selections there's a even a replace mode where I can kind of type over the letters that are there all kinds of stuff I actually just noticed it right now um Folks at the on the blue bar at the bottom the modes that he was mentioning was showing up like insert and visual it's like yeah at the very bottom you'll see the modes there yep so right there so if I hit I am in insert mode if I hit skip again I'm in uh normal mode and then uh shift R will put me in replace mode um so there's a ton of really cool cool modes that you can enter and actually um let me key caster I have this set up so that we can um yeah now is this because you've already set up the plugin for Vim with vs code or we didn't even get to that yet yeah so we can get there uh right now um so the plugin that I use is so yeah so anyway to to kind of wrap up that part of it the you know there are two pieces of him there's Vim the editor and then Vim motions people often call them which is the macro system that you use uh from Vim that you can transport into pretty much any editor so the way that you enable that is uh through this you just open up your extensions pane uh the one that I use is I just had Bim and uh it's this one the Vim or vs code Vim and that's just Vim emulator for vs code it's great I have not had any problems there are some you know kind of minor inconsistencies or you know missing features from the full Vim but overall for this type of editing that I do it's been extremely feature complete and awesome and you'll see a lot of the cool things that you can do with it today nice okay cool yeah so we can do that and then um one thing that I think is probably one of the most important things and then we'll actually talk about editing uh one of the most important things I think when you're starting like if this is your first time with Vim at all you're not familiar with it um you're gonna do this uh Vim starts uh in insert mode right here so if you look for this this is a really cool feature in Vim where if you install the the Vim plug-in right away if I open or see oh nope I'm in a markdown file okay B um let's open this so if I open this CSS file it's going to put me automatically into uh normal mode now that's the mode where I can't type but every one of my keys on the keyboard is some kind of macro now that can be super disorienting if you're coming from a regular editor so once you install this plugin if you uh oh get settings back up again you do Vim start in insert mode what that'll do is it will start you in the mode that your most accustomed to which is uh starting in insert mode which makes it kind of like normal vs code okay so if I close these and I open this up now I'm in insert mode already I can type like I normally do but then as soon as I hit Escape that puts me into the Vim promo mode so I noticed on the blue bar it wasn't showing the modes anymore any particular reason for that that's a good question I don't know but it's but on your end it is working though right yeah yeah it's still working okay okay all righty cool cool cool yeah so are we ready to kind of like dive in jump into some stuff absolutely let's do this yeah okay cool cool so I think one of the first things like if you could if I could just share like one command uh with you that I think really like kind of changes everything for me it's um to work with in to change things inside and around quotes so uh one of my favorite things kind of one of my favorite things to do inside of them I think something that like really kind of changes the game is thinking about things in terms of uh kind of editing blocks so a lot of times if I have a mouse uh let's go into insert mode if I have a mouse I'm gonna like kind of grab from like the beginning of this character to the end of this character and then like do a thing that's not like particularly a particularly thoughtful way to work right because it's just like start character and character so uh one thing that I really like about using Vim is that we can kind of think about these things more as our in terms of our intent so here uh if I wanted to delete or change this selector I would go in here and then I would start like typing I need to be an answer but go in here select that and then start typing my new thing now the cool thing about Vim is that we can just tell it what we want to do so here I'll use change so C I quotes so that's change inside quotes and I'll just delete the whole thing put me in insert mode and then I can start typing it's like it's like shortcuts on steroids almost yes exactly and so it's a way to think about like it's just a way to think about kind of manipulating code now we can actually do some really cool things um cool things with that too so uh I showed you it looks like my yeah it's funny this um I have key Caster on here but it doesn't seem to be showing on the screen that we're doesn't want to show on this screen let me see if I can use a different one that'll work doesn't like the full screen there we go okay cool oh keycaster shows uh it's just a program that will show the keys as I'm typing them uh so if you look in the bottom corner uh it'll show the key that I typed got it but it wasn't working with my full screen okay okay so uh so go change inside quotes and we can just start now we can just in we're in insert mode and we can start typing um we can also do some really cool stuff so let's say we wanted to make this you know class name a variable so we're on this header we do change around quotes that's going to grab the whole thing we can put some curly braces here so this is react um and header classes and then let classes equal and then P to paste in what we had before cool so there's a lot of oh shoot named this wrong thing though didn't I okay so yeah so there's a lot of really cool things so if I could kind of like share one thing it would just be that something that I use all the time is that CI double quotes uh c a double quotes I'm regularly changing things um from kind of inside of these strings um but yeah so that's uh I mean that's kind of like one of the biggest things now so far we've been using the change um so change inside double quotes but there's another modifier that's also really helpful so let's say that I just wanted to delete what was in there I can say delete inside quotes and I'm still in normal mode so I can do all of my Bim stuff so that's like a slight modifier there um yeah any questions so far uh let's go through like some of the comments here a lot of them are just uh yeah peanuts celery says I love them but the configuration is horrific says the hardest part I ever had was closing Vim the first time see if we could all relate with that uh with using it with vs code you probably won't have that problem so just in general you find that with using with vs code it's making life a little easier for like the new people with them you think yeah I think so so I guess you know this is probably like a I mean something that brought me to Vim was I started typing I mean editing code a long time ago in an editor called textmate and it had a ton of really cool key bindings but they stopped maintaining the text editor and when they stopped maintaining the text editor like all my key bindings were not useful to me anymore and I think Sublime Text and some other editors had adopted or like had modes where you could use some of those key bindings but then anytime you looked at documentation it was kind of off from the standard key bindings and it was like really kind of frustrating um and so I was like well if it seems like a lot of these editors have some type of like Vim emulation in them and so if I want to be useful like across all editors you know if this happens again and you know text mate and I'm in a different editor um then it'd be useful to just have like some standard text editing type of tools and I think that's where Vim comes in and I've used vim and uh you know vimproper emacs atom BS code uh some of the jetbrains tools and then even in like a lot of online editors too so you know if a lot of react developers use code sandbox that has Vim support you know codepen a lot of them have Bim support uh which is great nice um Titanium typo I love that name by the way uh it says neofem is amazing um I love the config I love the config I think that's what makes it fun but if you want to skip the config you can uh grab a pre-configed one like Chadron now neovim is this is this just like another tool that's like Vim another emulator yeah so neovim is uh let's see let me Neo van so neovim is a fork I think I'm not exactly sure but neovim is um a different version of Vim it's significantly newer it has a lot of excitement around it uh it has support for I think like language server or processor it's like much more modern and I think all the configs done in Lua yeah so it uses Lua over vimscript so if you're super into Lua um it's I mean anything's better than dimscript though vimscript is absolutely terrible it's good for nothing um yeah so yeah so yeah uh neovium's great editor uh for sure but um yeah cool well let's continue yeah cool so uh let's see yeah so um let's kind of go from there so one thing that I think is helpful when learning learning how to work in Vim is just kind of understanding um actually I'm going to type out I'm going to kind of put in comment some of the commands that we've done so uh CI double quote is that kind of change inside uh quotes uh we had change around quotes uh which changed this put us into insert mode and it copied it into our clipboard um and then we also covered was it delete inside and delete delete around quotes now these are kind of like I think of these as like single uh kind of commands um but they are like kind of uh as you can see a composition of different motions and so let me show you one more actually so we can also do this with tags so I've shown you how to do double quotes but we can also if we're using markup we can do things like you know uh change inside tag and that will preserve this P tag but delete everything inside of it and put it in insert mode so it can now type in whatever we want we can also say delete a round tag which just deletes that tag gets rid of that tag entirely or change around change around tag which will uh kind of put us in an insert mode so the biggest difference between delete and change is that it's delete plus an insert um so let's see bro by the way I started adding some of the background music just to add to the theme if it's too loud let me know sometime the screen yard like a blasts but if it's if you can't hear it let me know and I'll I'll bump up the volume too nice nice um we can also do stuff like you know uh inside of these parentheses so anything that we want would be so change inside parentheses uh that will put us in insert mode inside of these parens um all of these commands are composable so we can do uh whatever we want with them okay so one thing that is kind of complicated about Vim at first is that it can be hard sometimes to visualize what the affected area will be um and so for that we can do insert mode answer mode so insert mode is like a selection or sorry visual mode it's like a selection like we would do with our cursor except it's all keyboard based so we can go into visual mode by hitting V that puts us into visual mode and from here if we want we can actually just use our arrow keys okay but there's a lot of extra cool things that we can do if we use kind of some of vim's vims tools for navigating code sorry did you have a question no no no oh okay so let's just put something that's in a visual uh visual mode where we can uh make our selections and Vim has some really cool ways of making those selections so if we go into a visual mode we can go to the end of words by hitting e H so e will take us to the end of the next word this is probably not like a great example let me tell you let me get a readme file um this will be easier so if I go into visual insert we can go e which will take us to the end of the next word got it all right we can go back to the beginning of a word by hitting B this makes it easier like if you're about to copy or cut a section of a line and and instead of scrolling it's just easier to use this command is that why yeah so right just kind of showing you how like a visual uh visual mode works because there's a lot of shortcuts that you can do but starting with uh visual mode can sometimes help you visualize what Vim is going to be doing um when you run those commands so like right here uh if I hit V it's gonna or capital V it's going to select this entire line right and then I could hit delete right but there's also a capital D which just uh or sorry double d uh Double D which just like deletes the line um but it can be helpful sometimes like when you're starting to know like what those visual selections are so like if we're in this code if I could say V inside uh parentheses we can see the selection that it's going to make as opposed to like d inside parentheses would just kind of like delete that so if you want to see that first you can use the visual mode to do that which is so good for anyone that's new so you could know what text is going to be affected by your command correct yeah it's a really great I don't end up using visual mode a lot um you know because I know if I want to delete this tag I can just do dat whoops but if I want to if I'm learning I can do v a t and make the visual section first and then kind of do my delete which is really helpful nice yeah yeah yeah cool so um that's visual mode and then it's also a really handy way to to kind of learn the Motions um so you can kind of understand a little bit more about how to interact with word objects so you know something that's cool is like if you're on your cursor but you're like in the middle of a word and you want to start making a selection well you'd have to like actually like navigate back and then do that which is fine in this case but it could be kind of difficult for like large large words um here anywhere we're in the word we can just say the IW which is visually select inside word or change inside word which will delete that word put us in insert mode and then we can change that cool uh Daniel Travis has a quick question um he says I know the site of them Adventures is the practice of them is there another way yes so there's a I mean there's so many great Vim tools uh yeah Bim Adventure uh Adventures is a great one um there's also just the Vim tutor so I think if you if I go back over here open up a terminal I think it's just Vim tutor uh yeah that's what you just mentioned event yeah so vmcooter is great um it will kind of teach you from the perspective of using Vim as an editor um so it's going to run you through things like this where hey use hjk and L to navigate um which is fine but also you have arrow keys um so it's not necessarily the most helpful thing to learn right in the beginning um yeah and it shows you how to quit like all of these things are very Vim specific um that uh don't necessarily I mean still apply but aren't critically important inside of an emulated environment okay so good to know but yeah it'll give you it'll give you instructions um so we'll go back up here uh we can go to we can go here and um kind of fix this line so it's saying like oh hey use the X key to delete unwanted characters so hit X there uh we'll move no that one's right so we'll go to the end uh and uh we're gonna go back there and then there's just these little assignments that'll help you kind of really put some of this stuff into your muscle memory so yeah I think anything that gives you a chance to explore um and like gives you some like assignments is going to be a really great way to uh to learn this stuff nice now there was a comment earlier uh that I missed by Ben Hoy uh he says uh sometimes I copy and sometimes I copy and curse or move unexpectedly so I just want to know how to copy and paste properly uh yeah sure yeah we can we can do that for sure so um there yeah let's jump into to copy and pasting so one thing that's really cool and I I showed you up here we can do this again but if I if I go here um when I make a cut that's gonna put it inside of vim's register as they call it Yanks and and Pace I think or puts or place place I think it is um I can never remember um but so like if I uh do we'll use our visual select so visually select around the quotes okay and here I'm going to let's say change that so hit C to change it and we'll put this inside a variable so this will be image class classes then I'll go up here and what I want to do now is is uh place that so I have it inside of my you know Vim copy registry whatever that is I can't remember the name of it um and I can place that with p so that's going to take what I wait what I had cut from you know down here and kind of place it wherever I want to now there's a couple options there's the uh lowercase p which just puts it right where you're at or below um and then there's an uppercase p which actually oh I need another uh because I'm on a new line so it's not doing that so back sorry um so V around the around double quotes delete image classes go up and then um we can put a h this is so weird oh because in sorry it was in line that's my problem so it changes a little bit sorry sometimes I get confused too so clearly what happens yeah so if we have if we have block text like this so if I yank this whole thing and paste it it's gonna lowercase p is gonna put it below actually here uh let's do uh uh the pace so we can see what's happening um easier so if I delete that if we put it um lowercase p is going to put this below if it's blocked and then uppercase p is going to put it above if it's um if it's a block now in this case um I had had like an inline um selection so it's just going to paste it in line and so I can show you uh kind of the difference there so let's put um just put this character here so yeah so I have an inline selection now if I hit command or sorry shift p that's going to put it before this delimiter and if I hit P it's going to put it after that so it's kind of like a you know like in web development you have like blocks and spans so it's kind of the same same concept if you have certain inline selection that's going to be kind of before or after a character if your block selection it's going to be before or after a line okay so you originally tried to like paste it like above or below but because we were in line it was pasting it on like on the same line is that correct yep yep exactly exactly so from there we can do our assignment so let's uh image classes equal half logo and then uh we're good so that's that is kind of I mean again this this is a reiteration of that but hopefully that kind of like helps clarify some of the copy and pasting um does that does that answer the question or is there still more on that uh yeah well if it answers the question uh feel free to like mentioned that in the uh comment so the person that asked that uh question I was just gonna go like another question right here um can I okay a producer just brought up can I use copy with the vs Code system clipboard not Vim Style [Laughter] yeah so you can make the uh as far as remember you can make the selection if you wanted to with um with Vim and then just do command copy and then use uh the command V vs code clipboard if you uh want to do that now they do behave differently so one thing that I have noticed is if you have different windows so I can yank this in a Vim environment and then paste it or place it um in another file no problem but if I have two Vim Windows this won't work across that and so I will have to use the Vim clipboard or sorry the vs code clipboard to copy that block of code so I can still make the selection that I want but I'm gonna have to use the uh or like I guess system clipboard in order to copy that across vs code window instances okay cool now is there like an official like a reference visual card for all the shortcuts that you ever use or yeah so yeah that's a really good point so this is the one that I learned on there could be I'm sure that there's many more um I but I found this one you know at the time that I started picking up certain Vim uh techniques okay and uh I found this really helpful it is a an extremely confusing uh chart I was gonna say like the charts are supposed to make your life easier and the charts like four years no I'll jump right in front of you yeah and so I think for that reason I think I think that things like this can be really uh really helpful cheat sheet um when you've already started to kind of decide some things that you want to learn but uh I think that kind of figuring out repeated tasks first and asking yourself how could I improve this workflow with them is probably the uh better way to go about it and then maybe have one of these cheat sheets just so you can kind of remember exactly what those things are uh things what exactly those are like uh it's like co-pilot you got to know how to program first before to really use that AI yeah yeah exactly you have to know exactly the words that you want to use or else it's just going to be totally confused yeah or get a treat for that cheat sheet totally totally um so yeah um I I saw a question of like why you would want to use Vim inside an editor like vs code um I think you know there's a couple things I think one it augments the you know vs code is really great for you know all of the things around you know the code so like you know navigation you have like all you know all these really great things you have you know get you know kind of with you know all these things there's so many incredible things inside of vs code you have a debugger like it's awesome um but sometimes I want to like move kind of more intentionally around actually like editing the code and that's what I think you know Vim is really useful for okay um or Vim motions rather what if emotions are really useful for nice um so yeah uh I think let me show you a couple other things as well uh one thing that's really cool about this plugin in particular is that it comes bundled with a couple of really great uh Vim plug-ins made by t-pope originally they're really fantastic and honestly a lot of people who use Vim uh you know wouldn't use it if it weren't for tpope and some of the amazing plugins that you know they've incred they've made uh honestly they made like Vim a thousand times better so one of the cool things is this uh plugin called surround so surround allows you to do some really cool stuff with um selections so let me just select this text let's say this is something that I wanted to wrap inside of Double quote well if I was if I were going to do that with a mouse I'd you know go over here mode um not liking my uh I don't know my setup today okay uh go over here I put a single quote or double quotes and then I put go over here and then do another double quote now something that's cool about the plug the Vim surround plug-in um and the emulation is that I can make my visual selection hit a capital S and then the uh character that I want to wrap that text in and then you know wrap it around um which is really cool I can also do something where I I'm kind of in the spirit of our change uh macro that we had talked about earlier we can do change surrounding double quotes with tactics oh my gosh you know sometimes I'm going to say sometimes markdown doesn't love me so change surrounding double quotes with uh back ticks you can do stuff like that I find that really uh really helpful sometimes when I'm in a JavaScript file um and I want to you know do some type of interpolation and so change surrounding single quotes with back ticks and then I can easily put my dollar sign you know do my interpolation and it didn't you know that really quickly instead of having to like kind of let go and manually change those characters uh which is really nice nice so it seems like in general uh like if someone's going to be embracing them they need to be aware that like the learning curve might be slow at the very beginning but once you have like your keystrokes and commands like memorize memorize it really boosts that productivity a lot more later on right yeah for sure and I think that that's why I I wanted to start today with these kind of like change inside change around surround because I think that working with these types of using that is really helpful right off the bat and it's less like you know like I'm learning them and it's more like oh hey I'm learning like a helpful tool to kind of help me with some of um these things that are kind of hard to reach right it's like I got to go to the beginning of this thing and then the end of this thing and you know change my thing um I saw a question about how that works with tags and yes that does also work with tags so let's find a tag here um sure for HTML tags yeah so we can do change surrounding so c s and then T again and then we do a left bracket and it'll give us this problem pressure here which tag do we want to use and we'll say uh make this a I don't know block quote tag and so then that'll change that um so yes it does work with tags inside of HTML and jsx as well nice cool yeah cool cool um yeah I was wondering do you want to go through some navigation stuff we could kind of tackle some of that really quick if we wanted to yeah let's go ahead and uh do that and after that we could like move on to our next segments since we're yeah it was the final quarter of the hour sure sure yeah let's just do some of the um I'll just kind of run through some of the uh the things that I find really helpful in navigation um so there's a couple things that are really useful one thing to know about Vim is that G and z are both totally overloaded those are like the junk drawers of them um and so there's a lot of commands that will either be like prefix with G or prefix with z and uh there's not a lot of um kind of like logic around them so C you can be like oh C is for changing stuff and D is for deleting stuff G and z there's no hope but um G by default is really helpful for navigation so something that I really like is when we're in normal mode we can see right here we can do GG that takes us to a top of a file we can do capital G which takes us to the bottom of a file and we can use um a number like 30 capital G to jump directly to a line so GG top capital G bottom GG top again and then if we wanted to jump to line 11 11 capital G now what you just showed us with like GG top was that in the cheat sheet that we saw earlier the complicated cheat sheet or uh yeah let's so let's go over here I think that GG is in here somewhere yeah there we go number six Gigi top of file okay and then um oh yeah actually there's a really cool one too uh so if we go to line two we can do GF and that goes to the file under the cursor now obviously there's ways to do this in vs code what is it uh F12 or something like that um so you know you can do it either way but you know okay I know on my Mac specifically I have to use function key to hit F12 so GF can be a real it's closer a lot of times which is really nice yeah no I'm glad you showed like on the the chart also because now that we saw the functionality and then we saw where it was on the chart then the chart seems a little bit less scary it's like okay I kind of see how to read that chart now based on what I just saw yeah yeah and there's some cool things too like if we do um you know uh curly right curly brace is a way to like navigate through chunks of code so it'll go to the next like big space which is really nice if you're navigating Big Blocks of code but you want to see like kind of all the function headers and whatnot um which is uh really helpful and uh what is it another we can use uh let me find a Javascript file um for parentheses and you know brackets and other like programming characters we can use percent to jump to the corresponding character so here I'm on that front paren and then I can jump with the percent um same for these but those are some cool uh navigation things which are really helpful um and then one of my favorites actually is Plus uh shoot uh come on sometimes I still get confused um so Plus will take you to the first non-white space character on a line which can actually be really helpful a lot of times so plus and then minus we'll do kind of the same reverse so you can go back um but to the first non-white space character so it avoids all the all the Taps which is pretty helpful so it skips the non-words oh I'm sorry yeah so it goes to the first it'll go down by the first non-white space character so it's it's uh avoiding all of these uh you know tabs or spaces right here got it got it it was a confusing comment right here I'm not sure if you understand what they're talking about uh fortino Samuel valves Liza Raga says available let some read only you might need to elaborate uh you know do you know what you saw uh let's see available I don't I'm read only yeah I don't know what that means I'd love to learn more but um yeah I don't uh quite know what that means maybe it's an answer to another question yeah yeah 14 I'll elaborate on that that's yeah I want to be confused I look at the chart yeah and then we'll jump through some other ones which are really helpful um so like I've made some changes to this file um and then if I try to close this it's going to bring up a like you want to save or you know not save um which is fine but uh if I know that I don't want to say the changes um you know so there's uh we can do capital Z is one of the save options so if I do z z it'll hit save and accept the changes right and so I've made changes to this one uh yeah okay and then if I hit Z capital Z capital Q it'll close that file but without saving changes but because we've already used that command it doesn't prompt us also so we're like okay I know that I want to just ditch these changes you know capital Z capital z q capital Z capital Q and then just kind of like gets it out of there which is really nice um we can also uh paginate so D will uh patch page down by half pages uh Ctrl U will page up by half pages um and then control F will page down by full pages and control B will page up by full Pages uh we can also kind of move text to certain parts so let's say that I uh here let me get more uh kind of middle of this so let's say that I want to move this line to the top of the file we can use z t for top z b for bottom or Z Z to put it right in the middle uh which is really nice because sometimes you find yourself kind of like in a in an awkward spot you just want it to be in the middle I use ZZ all the time to just be like oh I'll put this in the middle of my uh my view so um yeah it's a really cool uh cool stuff I think yeah if we have time for one more I'll show like some really wild one um but if not we can move on yeah yeah let's let's do one more Okay cool so in Vim there's also this uh idea of um exec mode which is really interesting um where you can actually like type in commands so let me see let me find uh I guess this uh this will probably do um okay so we have logo here so we can do colon which will allow us to execute commands um watch this part of the screen right here so we have a hole in there and we can type um anywhere on this line so let's go to the beginning character so we do colon s and we can change we can search for the word logo we see that this integration is showing kind of what our search is finding and we can change that to whatever we want we can call that Lego and you'll notice that it just changed that one but we can put a g at the end of that and then it's going to change everything on that line now if we want we can also do this uh for the whole file we go back here we can do percent and now that's going to change I did dollar sign percent now that's going to change logo to Lego uh everywhere so we can see all the places that that's changing that it's like a finance yeah totally now there's a bunch of other cool things that we can do too so if we want we can make this um uppercase or lowercase specific by putting a c I don't know why it's a c but we do backslash uh uppercase C and then forward slash and then that will look for just ones that are uppercase and ignore some of the lowercase ones which is uh pretty wild and then we can also uh put a c at the end of this which will ask us to confirm each one which is really helpful so if we're not sure that we want to do everyone uh we can hit this it'll say okay this first one is that right uh yeah change that to Lego uh next one no don't change that to Lego next one yes Lego guys no yes and Skip you know all that kind of uh all that kind of stuff so anyway super handy for making those kind of like system or those file wide uh changes very cool I feel like if someone really gets good at uh when they go like on job interviews and just mention that they'll probably get like bonus points I have noticed it's so funny because like uh if I ever do any live coding at conferences or you know on live streams or uh inside videos I do get a lot of comments of like hey particularly with the surround stuff like how did you add those quotes around that thing or like change that text uh that tag so quickly and um yeah a lot of people are like oh whoa what was that um yeah yeah definitely some kudos for those well this has been awesome uh thanks so much for all this but at this point right now it's time for our next segment our lightning round are you ready for that I'm ready yeah let's go all right oh all right so very simple we're just going to ask like a few questions and within a couple of seconds just answer first thing off the top of your head all right number one your biggest pet peeve oh man uh let's say you know in the code land um just bad pull requests maybe ones that are like you know it's just code and they didn't put a good title or description or examples or what to what to look for man that drives me crazy I get it I care totally uh all right number two uh the scariest thing you've ever done for fun oh man you know I was talking with my daughter about this actually uh there's this ride at Six Flags Magic Mountain I haven't been on it in a while but uh it's called Tatsu and you can look up videos of it but it is uh nuts they actually it's a coaster where they they strap you in and then they hook your feet in and then they pull you against the track and the whole time you're kind of like super Manning on the outside of this track it is absolute chaos uh and it's so fun but yeah that just scares the crap out of me wow that's not scarier than the ones that just dropped you oh totally yeah I hate those too though like there's one at I think knots very Farm around here which is I think one of the tallest ones of those and yeah you're like 30 stories in the air or something I don't know maybe I'm exaggerating but I think it's pretty dang high and then just like brutal brutal I love it um all right is it gif or is it gif oh man I you know I'm one of those people that I do this with uh data the word data as well if there's two ways to pronounce it I just alternate I like I don't I'm Switzerland about that stuff so I pronounce it both ways data data GIF GIF depends on the audience right yeah no I yeah whatever whatever you want it to be I'm gonna match you that's that's the way I roll no judging other uh yeah other ways to pronounce it yeah no judgment no judgment not that there's anything wrong with it all right you can pronounce it whichever way you want all right so um before I get canceled um what's one vs code extension you cannot live without oh the vs code Vim extension how do I know you're gonna say that one and the last question or liking about is uh first guess if you had your own talk show oh first guess if I had my own talk show well I did have a show react podcast uh for a while where I talked with I mean I think we did like 123 episodes It's still live if anyone uh wants to kind of listen to the backlog uh but man if I was gonna have uh man a first guest uh probably Sarah drosner I would love to love to talk with her nice cool um all right so that is it for our lightning round um so glad you came on uh if folks want to follow you where could they uh reach you yeah yeah for sure so I am uh fantastic on Twitter I actually I was going to show one more thing I don't know if we can pull the um the screen sharing back up again um but I put a page on my uh site so it's just um chan.dev um Vim so you can go right there I just fired this up this has pretty much all of the all of my raw notes so they're pretty rough um but from uh kind of some of the things that we covered today uh all my raw notes and then also there's a link to uh my uh Vim alphabet playlist on YouTube where we go through every key on the keyboard and um kind of you know talk about what it does in Bim so um you know it's a little bit older it's from like 2019 I think but um you know Vim hasn't changed really since then or vimotions haven't really uh so a really great place to learn um if you want to follow me there it's uh at chantastic on YouTube as well so those are probably the best places to follow me uh Twitter and YouTube awesome I like that you had a lot of your notes right there on the yeah they look a lot friendlier than the chart mostly yeah and it's mostly just the stuff that we covered today so a very limited set but uh yeah cool and uh for us folks um thanks for joining if you want to follow us you already know about our well if you're watching on YouTube you already know about our YouTube channel at code but we also have a tick tock Channel as you saw from our earlier segment and that is at vs code but until our next stream enjoy your weekend in week and again thanks uh my for joining this has been awesome okay pleasure thanks for having me all right see you guys later [Music] thank you [Music] [Applause]

Channel: Visual Studio Code

Views: 44,773

Keywords: code, vim, vscode, microsoft, developer, beginner

Id: IMuFW9as-Dc

Length: 59min 1sec (3541 seconds)

Published: Fri Apr 21 2023