How to use VCCode Macros for Insane Developer Productivity (5x, 10x, 25x, 100x gains)

Key Takeaways

okay so what's happening what's happening is i am running at the speed of light i am creating components at literally the speed of light here so let's break down what just happened guys it's time to take your productivity as a developer to the next level i recently found something i've been looking for for years now and really i finally took the time to dive in and i hope after watching this video you dive into this too and save yourself a ton and ton and ton of time today we're talking about vs code macros we're talking about 5 10 50 100 x improvements in your speed and your performance at a high level a macro is just a series of keyboard inputs that allow you to automate your day-to-day tasks as an engineer you can automate almost anything let me show you a couple of things i've done here i'm super excited about this um let's just dive in let me show you what i've done so first things first we have an empty vue.js application right i can show you the structure here i've deleted the components folder and this is just created from uh you know vite create app you know classic installation um so right now there's no server running right so you can see i'm refreshing nothing's happening i've got key caster here loaded because i want you guys to see exactly what my keyboard inputs are as i am running these macros right um so uh let me run a macro for you guys pay attention to key caster again i'm gonna run option three refresh the browser and my server is up and running so what just happened there um well obviously i started a server right so if we hop back up we can see i ran yarn run dev on port 3000 and i did that by just typing in option three okay uh so that's one example of using macros right so i just sent arbitrary input directly to my terminal with two uh two presses of a button right with two key clicks two key presses whatever um okay let me show you another one right so it's common uh as an engineer to you know you've got some text here uh sure hello world let's import the ref from view all right fix the stupid import and so say you'll you know run an update somewhere who knows what this is sure hello view whatever it is that's it's not really important what it is um but let me show you a second code snippet pay attention to key caster here i'm gonna run option two okay right so i pressed two keys and all of a sudden i have an if statement here right i wrapped my content in an if statement um this is really cool it's it's not it's not important what exactly is happening it's important that it's happening and how quickly it's happening right like this could have the if statement could have been anything right um so so keep an open mind with that right i'm just showing you some random examples of things that i do in my workflows that i want uh automated right that i want uh macroed out um and and this this goes further right this isn't the end of that right so say i had an arbitrary number of lines right say i had you know 10 lines all i do is select run my snippet with option two and i just wrapped all my code okay so that's a second example i want to show you guys now this last example is going to blow your mind a little bit i think uh it blew my mind when i finished writing it so so let me just jump in to show you guys uh so i'm in the app.view component right you can see here i don't have any other components created right this is just a single asset in here um and just you know the usual uh fight create app content minus the components directory right so i just deleted that um you know so it's very common you're in here uh you're creating some component let's just call it subtitle right so new component now i want to create this new component right it's not here um it doesn't exist yet right normally you open up a file create it you know set up the defaults blah blah i'm gonna run my macro from the key option one so you know pay attention to key caster here there's no mat or there's a lot of magic happening here but um let's just see what happens okay so what's happening what's happening is i am running at the speed of light i am creating components at literally the speed of light here so let's break down what just happened as you can see i have this new subtitle.view text in my browser you can see here that my component has been imported and if you look in my explorer you can see that i've created a brand new subtitle.view component that's been templated out with a modern view 3 setup code right okay wow so disclaimer right so a lot of these things can happen automatically like a bro your browser can do a lot of these things and they're extensions for a lot of these things um that's not really the point of of this right like yes user extension that does this for you yes user auto wrapping if statement stuff the the value in macros is that you can do anything you want and i'll show you how i'm doing these things in just a moment here but i'd like keep that in in your mind right like the value isn't that you can like there's some extension that does this already it's like yeah there's an extension that that's freaking everything the point here is you and your specific workflows with your specific development style can create any type of macro that you want to serve any purpose that you want that's the key here that's the key takeaway of this video okay so let's jump in i want to show you guys how exactly i'm doing all this right so where's the magic first things first i'm using an extension surprise using an extension um called macro commander this is an extension built on top of another extension all this really does is that it allows you to go into your settings.json file and create this macros object so let me just show you mine right settings.json and you can see here i have this macros uh object and all the commands except for one i didn't show you guys my uh logging command um all these commands are in here right so you can see the yarn run dev ifrap and the new view component right so this extension allows you to specify and create macros inside your settings.json and then once you've created and named your macros you can hop over to your uh yeah your keybinding shortcuts and then you can just map them to whatever you want right so here's like that's that's the magic there right so macros dot new view component i got um i have bound to alt one right um same thing with all two same thing with all three um so this is really great right so basically you can keep on to anything you want fantastic that's expected but let's jump into how this is actually running let's just open up yarn run dev so i've got two commands running here um all a macro is is a series of essentially a series of uh commands from the vs code editor right so you can see here i've got focus terminal so this is going to quite literally run the you know focus terminal command if i hit you know command shift p open up the vs code command input you can type whatever you want this is the focus terminal command that's being run right so it opens up whatever terminal you have available uh and then it fires off this command that's an object so there are two types of commands right you can just have the raw string and then you can have the object and this the object format takes the command name and then it takes like arbitrary arguments and other key value pairs and i'm running the send sequence here so terminal send sequence so it's sending input and the text for this is of course yarn run dev with the port and the new line to hit enter so even if you stop the video here and you you have this one command this is incredible right so now you can run any one of your scripts even any one of your uh you know like bash rc uh aliases or functions uh and then you can key bind it and even just this right here just these two these two commands um it's gonna increase your developer productivity a crap time which is what this is all about right this is about you owning more of your time right doing less of the repetitive work that you and i are both doing right um so that's great let's move on ifrap all right so here's some more secret sauce right so this is this is really cool right so we have um you know six seven commands here and what's happening clipboard cut action so this is running cut right so if you're on a mac this is command x and then i'm running this really cool insert snippet right so i have of course uh user snippets uh custom snippets so i have an if statement code snippet right um i'm gonna make uh videos on code snippets if you're not using code snippets subscribe and like stay tuned for that and if you are awesome you know the power of code snippets um i see a ton of developers that are really high level and they're still not using code snippets that confuses me but we'll talk about that another time um basically this code simply just creates an if statement right and i can just show you that here so it's you know just iff to trigger and then tab and then i have this you know if statement coming in here pretty standard stuff so i insert my if statement i type so i'm sending a type command you can send arbitrary text with the type command and the text here is just true so i'm just filling in a blank conditional doesn't really matter what it is um and then i go line and cursor down and then i paste right so i put the content back inside the if block um and just to show you guys that again right so say i had you know const uh whatever uh you know var equals five awful example but whatever and then i just run that snippet right so it types in you know true goes to the end of the line and then it types it goes down and then it pastes right so it's really important when you're creating your macros to really walk through each individual step because your macro will do exactly what you tell it to all right so that's ifrap and then here is the magical one right so i should really be like selling this somewhere but whatever um uh so this is creating an entire new component and and there i i do take some shortcuts right like the the component gets created in the same directory as the component that you're working in when you fire off the command so there are ways to improve this but i just want to show you guys the power of macros here so let's jump into this one right so we're doing a keyboard copy right so remember if you remember the command starts up by selecting and then you enter your your key binding right uh so you always start with the element highlighted and next i do a find command right and so i'm looking for the script tag right because where do you put imports right below the script tag okay i'm finding the script tag and then i'm running arbitrary javascript this is really cool uh this kind of gets into the extension world of vs code um which i'll get to in another video but uh i am waiting here you can see i'm just awaiting a promise that waits for 200 milliseconds and i'm just waiting so that vs code finishes what it's doing sometimes you need to place these uh because vs code runs so fast that the macro doesn't have time to kind of catch up after i find it i close right so now we have the element highlighted right so this is the equivalent of doing you know uh script right so i find and then i close right so now you can see the cursor is on the script and then it's i go to the end of the line and then i insert a new line right so end of the line insert new line and then i type import and then i paste and then i type again from dot slash so i'm literally fabricating an import right import and then say i had this in my uh copy buffer paste and then it's from and then you can see the dot slash and then it's paste and then below that i type uh dot view right so we can just keep walking down right so you can see here type import paste from quote dot slash paste again right paste the component name and and then end with the dot view right i'm importing then it's line end and then we do word and left select so this is me highlighting the extension and the file name right and then i copy that so this is the equivalent of you know going to the end of the line and then we're doing some word selects right and then i copy this right this is so that when i'm creating the new component i have the perfect file name i'm sure there's better fast ways to do this whatever this is just what worked so i did it and then i've run the new file command uh if you wonder where uh you can run this you know controller p and then new file right if you just type new you get the new file command that's what i'm running here it's important to keep in mind that you can run anything you can inside your macro that you can um by opening up the command input from vs code right so uh so i paste right so i have the new file name pasted uh and so you know this is this is the equivalent of doing this right so highlight new file enter paste right uh i'm getting the error because i already created this file name so let's change a little bit and then the next command is like focused uh return focus to pane and that allows the file to be created here right so that happens there right through the paste and we focus panel we wait for the same reason as before and then i insert another code snippet right so i have this great code summary that i use when i'm creating view vue.js components that's what's running here so once i open up this new file i've run my view s code snippet and it generates this great template for me then i run save it's really cool you can run saves and then i go to the previous editor i saved so this is me saving the new file saving the old file cursor end and then i pop up a little um you know show information just saying whoa that was fast and this is this is pretty cool right so again let's just go ahead and run this again because this is so cool um all right so let me get rid of all these let's close this save all right so i'm going to create a new component here right so uh we'll call this you know uh to-do list whatever and then we're just going to run you know so pay attention to my key caster input i'm gonna do the command one just like that right really insane really fast um and that is macros guys like that's that's basically it right so you run it's you take you have your list of commands um you specify a macro and then you keep on the macro specify macro name right so new view component if wrap whatever and then you come over to your key bindings and you key bind it and then you run it really cool um i hope you guys can see the value in this there is a learning curve you know learning all the vs code input commands is is time consuming right it took me some time to especially for this new view component to walk through all the steps and to try to find the right command and the right you know command object types but the trade-off is definitely worth it just have to spend the time to figure it out um highly highly highly highly highly recommended you know save yourself time you know being an engineer is about creating products it's about creating value for yourself or for your company or you know hopefully for your customers so you want to be spending as little time as possible actually doing the building right to get value and you know things like code snippets and macros helps you do that faster so that you can go back to your life you know hanging out with your family working on that side project that you've been wanting to build at the very least you know say you're working some job that you don't really care about you can just do all your work faster and then chill right um so really cool definitely check this out i'll link every uh resource that you'll need for this in the description so check that out and i'll also drop some of my uh macros so you can get get up and running quickly on a page on my website so yeah that's it i hope you guys enjoyed this i hope you guys can see the power in this um you know comment like if you want to see more of this i'm a huge huge uh fan of developer productivity and moving faster so that we can spend more time living and like you know being a human and not just you know be sitting behind the computer or at the very least like if you want to sit behind a computer you can do other things that you really care about right so i'm really passionate about developer speed developer productivity i'm going to create more content around this um i have an idea for uh you know a book or a course or something or i just really dive into how to be the most efficient developer that you can possibly be and i'm gonna pack everything i i know into it and everything i don't know yet so uh you know stay tuned for that uh like subscribe usual stuff and i really appreciate you guys time appreciate you being here and um yeah i will see you in the next one [Music] you