Git in VS Code

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.

Welcome to Syntax. We don't need to clap anymore, Scott.

Scott just clapped rid 32 1. I'm so I'm, I'm

classically conditioned to clap when somebody says 321. Somebody says 321, I clap. That's how it works.

So we switched, we switched over our podcast recording from we used to do Zoom, and then we would record locally.

Rid. And we moved to this app called Riverside that does, like, video audio recording, does guests, and stuff like that. And it's awesome. And I did you see The guy on the guy who made Riverside sent me a tweet from 2020 and said, I just made this after taking your course, and it was Riverside. What? My way. Unreal.

And, so like life. There's some circular dependencies there. Yeah. Wow. It's I obviously, rid. I love seeing that. Like, I don't know if I could build this. This is amazing.

So it's pretty cool. We should have the the the guy that made Riverside on. Yeah. What? And then ready. On how to use Riverside. I would love that. Yeah. That'd be fun. Here. Here's what you do. You go to the link.

Sometimes it's a little glitchy, but don't worry. Rid They're working on it. You're working on it. Alright. So we are, gonna talk about Git and Versus Code today. So, rid. Specifically, Versus Code has a whole bunch of features built into it to work with Git, and we're gonna go through what all those are today. We are sponsored by 3 awesome companies, rid. Linode cloud computing and Linux servers, LogRocket, JavaScript session replay, and FreshBooks cloud accounting.

With Me, as always, is mister Scott Talinski. How are you doing today, Scott? Hey. I'm doing good, man. I have had

a couple weeks from hell here, and I am feeling like today is the start of a new new new, half year new new me. I'm I'm ready to go. So, Yeah. I got a couple donkeys of the day.

Couple donkeys of the day. Capital One, your donkey of the day.

You refused to give me A Colorado release of lien for my car that I was trying to sell. So you are a donkey of the day, Capital One.

And, rid number 2 donkey of the day is the family at the park that was trying to strong-arm us out of our birthday party that we were throwing. West, so we we were doing a a birthday party for Landon's 5 year old 5 year old birthday in the park. And we get there, and this family had Stuff on every single picnic table in the entire park. And I was just like, oh, can we use one of these picnic tables? And they were just like, no. We have a permit for the entire north side of the park. I'm like, it's a public park.

It's a playground. What are you gonna do? Stop families from coming to the playground? So we, like, got this sneezy little table in the back and, like, rid You know, trying to set up before everyone's coming. I was just so annoyed these people were so aggressive about it. It's like, man, it's a 5 year old's birthday party at a a playground.

Rid. Sometimes you drive by the park near our house at, like, I don't know, 7, 8 AM, and there's people just, like, sitting there, like, holding the table.

Rid Yeah. I I also see it with, people that go to, like, resorts.

They go put a towel on the beach chair at, like, 5 AM.

Rid. Courtney does that, so I can't talk too much about that. Oh.

Oh, sorry. Courtney move right there. She she got it from her mom, but rid Like, they'll wake up super early just to grab the the most choice chairs and then just, like, throw all their stuff on them and then arrive back at them 3 hours later after rid best in. Who knows what? On the the same vein of it, have you ever seen those photos of, like, people climbing Mount Everest or people going up, like, a popular hike

Or or going to, like, a popular Instagram photo spot, and there's just line Line. Like dozens of people.

Yeah. Totally. Rid the world. That'd be scary because that's how people get hurt, I think, on those.

As somebody who's watched a lot of Mount Everest documentaries, it's like there'll be a giant line, and all of a sudden, the storm will blow through. And then everybody who's in that line is in big trouble because you can't go anywhere, forward or backwards. You're just kinda stuck. That sounds like a nightmare to me. No. Thank you. Yeah. Yeah. I'd be like I always think about that. Like, sometimes I'm in in a place and, like, if there was a fire right now, like,

rid Who would I push over to get out of here? You know, sometimes people are so slow to, like, walk.

And I I my wife always hates how impatient I am, but I'm just like, rid Go. Like, move your legs out of the way. Do you have no concept of everyone you're blocking? That's like the George Costanza. Do you remember that Seinfeld episode Where he pushes the little kid out of the way. Yes. Yeah. I do.

That might be me. I think I think for me, if I was in a situation like that, I think my my monkey Gills would come into town. I would just start climbing things. I would just start climbing, looking for a hatch in the roof somewhere.

Oh, man. Alright. Well, let's rid Get into it. Let's talk about Versus Code.

I think Scott and I both have been, CLI users of Git For most of our life, I've dipped into the the GUI tools here and there, but I've mostly been a used git from the command line. Rid. And every now and then, I dip into the Versus code or the GUI tools, and I'm like, oh, these are actually really nice. There's a lot of random stuff in Git that you have to memorize.

That makes absolutely no sense or it obviously does make sense. It's it's part of the language. But just to like regular folk like us, It's kinda

hard to use. Don't you agree? Yeah. And Git Git, I think, has such a barrier to entry for new developers that when I was first learning Git, I remember feeling So, I don't know, incompetent because I couldn't figure out or you you would you would run you would say, how do I, you know, add things To the you know, how do I add files to be tracked? And you'd see, like, 8 different ways to do it. Oh, you do git add dot, git add hyphen, Capital a, and then the like, it's like there's just so many different ways to do the same thing that it always felt really overwhelming to me. But I I've been since using, like you said, the the the command line to do Git for a very long time. And, I didn't start until maybe last year sometime really diving into the The Versus Code Git tools. And now I gotta say, Wes, I have not really written, any Versus Code command line in Or, not Versus Code command line. Any, Git command line, commands for quite some time. I've only been using the visual tools within Versus Code to do all of my Git things, and I'm a big fan. So I think what we're gonna do in this show is really just talk a little bit about What are the different options? What are the different extensions? What are the reasons why you might use some of these UI tools rather than using the command line? And and and very well, many of you might say, well, I'm just fast with the command line. And I I I totally agree with you. I I'm rid. Typically, way faster with the command line as well, but I think there are some tools here that can provide some speed to your workflow, some automation, some structure to your workflow, But even some ways that you can work with your code to understand it a little bit better. And before before we, get into that aspect, do you wanna maybe cover some Quick jargon that we're gonna be saying. I know sometimes when we get into Git world, we'll we'll just say things like commit and diff.

So, rid Wes, I I wrote here that a commit is code that has been modified and included into the session.

I don't rid. Think that was a great explanation of what a commit is? Do you wanna

try maybe giving what you think a commit is? Yeah. So with Git, rid. Git will track your files for changes. And every time you you say, okay. I've done something here. I want to explain rid. What I have done to these files, that is called a commit. So, you change the background from blue to green, and you increase the font size.

Rid. Then you say, okay. Based on the last time I committed, now I've changed a couple things about that, rid. And I feel like the code is in a good enough spot, or I want to commit to making those changes. Right? And that's what you do. You you add the files that you've changed, rid. Or you add the child the files that you wish to group into a commit. Because, like, let's say you're updating your personal website.

You might have changed a little bit of HTML. You might have changed a little bit of JavaScript. You might have added an image, and you might have changed a little bit of CSS. So you commit all 4 of those files together and say, update about me page design.

Rid. And then that would sort of wrap all of those things together so that if you ever need to undo those changes or go back and look to see what was done, they are grouped together into a commit.

Okay. Nice. That's way better than my explanation.

And it diff. When we say diff, a diff, rid. Do do you think that stand is that stand for, like, difference? Or what does that exactly stand for? Is that is that what it is? Stands for differential.

Differential.

No. It's a difference. I'm assuming. What? Why would it stand for different than a car? Yeah. Yeah. So diff is really when you have 2, versions of the same file that you're comparing, and you're seeing what's different between them. So when we say a diff of a file, You're checking a file between the current version perhaps and an older version and seeing what's different. And that's many Many times in the context of of merging code or pulling code in, maybe there's an issue with that. But it can also just be, it. Looking back at the history of a file as well just to see what's different there. Yeah, exactly. You can

you can diff, like, literally any 2 commits rid. Or you can diff, what is called the head, which is, like, your current working state to Other commits, other branches.

You can diff 2 entire branches.

What else? What other kind of, jargon do we have? Commit, diff, head.

A branch is sort of like a rid. I always like to think of it as like a folder. So, like, if you were working on a website and then you needed to, work on another feature for that website, you might rid. Be tempted to make a copy of your folder from, like, the working the the working website. You might want to make a copy of that folder into, Another folder and then rename that folder to, like, website dash new sales page.

So what rid. What branches will allow you to do is to kind of, like, take a copy, do a whole bunch of work. And if you need to dip back into the working version of that, rid. You can sort of keep your changes isolated from your other version of the website until you are ready to, rid. Merge those changes into your your main branch or your master branch. That's generally what people use as their

Production branch. Yeah. And I would I would personally just describe it as a version of your code. Right? Branch is a version of your code. For instance, right now, we have a branch for UI four, which is the, the 4th version of the UI of our site that we're designing. And so that is a branch. It's a Totally different version of the site that we can completely work in in isolation and then bring changes in back and forth. Yeah. I think that's pretty good for for jargon.

Maybe if we hit any others, we can make sure that we call them out because Git that I think that was one of the biggest things for me when I was first learning Git is you just People talk about it in such a way where they kinda everybody just assumes you know the the right words, and you're all just saying these words. But They're all very specific to what it is to work in Git. And if you don't have any experience there, it's kinda hard to get past that jargon.

So what okay. So So we we talked a little bit about, the fact that we both came from, like, a CLI background.

In UI tools, Wes, are are there any UI tools that you've used in the past Specifically to to do Git, have you try like, I know you mentioned that you tried some of the UI tools. Which which ones in particular did you try?

I rid have used in the past the GitHub GUI, which is which is very good.

I would say it may be one of the best GUIs to use. Rid. I have also used, what is the other one? It's like a tree tower cracking. Tower. That's the one. It's not rid It's a but maybe, yeah, Dreea is a tower of type. Tower is a big one. There's all kinds of Yeah. Kraken is a big one. Yeah. Kraken, rid. I've used that one, but that's been been years years since I've I've used it.

And I have mostly just rid. Stuck with the CLI. Another reason for that is because in my tutorials, if I'm showing any git stuff, I don't want to, like, I don't wanna, like, take sides on what version, especially if you're using, like, a paid thing. That's another people always ask me, like, why are you using Webflow? And rid. The reality is that people wanna do the same stuff I'm doing, so they want as few paid things if possible, no paid things as possible,

rid. So they can try it out and do it exactly as Wes is doing it. Right? Yeah. I hear you on that. Yeah. I've I've tried a lot of these myself, and the only one that I ever really used for any The amount of time was really the GitHub Desktop app, but it's only because, occasionally, GitHub will will throw a fit, and it'll just be like, you need to do this rid. This diff on the GitHub app, this is like a complex situation or something. I don't even remember, like, the exact scenarios in which it but there were times where GitHub specifically will want you to use the GitHub app to resolve a conflict and then I'll be like, oh, I gotta download an app and I gotta go to all do all this stuff. So That's that's a little bit of my history with it. Again, none of these tools have really stuck for me. Most of the time, it's like I would download them and install them and then blah blah blah. But I think that the beauty of these Versus Code tools and UI, things that we're gonna be talking about specifically, Is that they're so well integrated with how and where you're editing your code already. It's not a separate app. It's not a different context. A lot of these things work hand in hand with exactly when and how you're writing your code.

So let's get into, some of the ways that we can interact with Git in Versus Code.

So at the the very most basics, get, Versus Code has a a built in command line that you can use to To type in and do all your git commands in the command line if you so choose within GitHub. I've never done this personally.

I don't like The integrated command line into Versus Code for some reason. I I No. Even typically, if I'm working in the command line, I I typically have Iterm open. Rid I I don't know why. I I just like that context switch for me if I'm doing the command line stuff, but I I've never

rid. Gone too deep into using the command line within Versus Code. Me me neither. Everyone's always like, why don't you use the built in command line in Versus Code? Then it's just 1 app.

Rid. And for the longest time, I don't think this is still possible, but you couldn't, like, pop it out, from the Versus code. And, like, I've got rid. 3 monitors. I will often put Yeah. Yeah. A terminal on another monitor, or I wanna be able to see rid. The output and, like, I feel like it just gets too cramped. I just wanna be free Yeah. And be able to put my thing wherever I want. And I'm off I'm often running, like, 7 or 8 things in my terminal at once. So

I hear you. Just yeah. And I I feel like the I feel like Iterm usually runs a little bit better too in terms of rid Performance wise, I don't have any statistics to back that up with. But it it's a feeling, and it feels like it is. But I also agree that, like, I I do need I like to put my terminal wherever I want it. I want it over here in this monitor so that I can have a track while I have the browser and the the text editor here. Yeah. I like to keep all these things moving in the right spot. You know, I dipped into,

Warp again last week just to see where it's at. It's getting really fast, especially, like, I'm I'm still using still using hyper. Mhmm. And, like, the the speed difference between that and warp is unreal. Why don't you use I term? Rid. Because

I don't have a reason. It's gorgeous. It's a good looking app. And they added all the hyper stuff, so you get that little toolbar with all the CPU stuff that the hyper has, and there's Yeah. I think I need to to move back,

or just try to go all in on using Warp for, like, a week or two. Mhmm. I don't have any like, I don't use any of the hyper plug ins anymore. I just like the only one thing that I love about it is that I have a pink border around it.

Yeah. I know. It it does look nice.

And and I've never really gotten too deep in the hyper, but just mostly for performance reasons. And yeah. It's not that big of a deal. Like

Yeah. Just so, like but it's no it's not I never noticed it as an issue until I switched back. But I saw the Iterm two rid. Developer was, like, teasing a whole bunch of kinda neat integrations, and I bet that's the next the next gen for these terminals is that, like, Like, Warp has all these gooey features. It has a command palette. You can see all your commands. You can search.

I bet that's the next Gen for the CLI tools. It's not just The same CLI we had 20 years ago, but like a like a v s code for the the terminal.

Yeah. I mean, there are some things I really like about my Iterm setups. Like, you know, I can scroll with my mouse scroll wheel. I can click on links, and it opens them up in Versus Code nice and easily. Like, There's a lot of little niceties that for so long, you just felt like, why why can't you do these things in the command line? Why is this so obnoxious? Yeah.

Okay. So let's get back to Git in Versus Code. So another way you can interact with Git in Versus Code is via the command palette. Now I don't know what the command is on Windows. I would imagine it's control shift p. But on Mac, it's command shift p. That brings up what's called the command palette where you can just start typing. If you type in the words g I t or git, You can see that you can do a whole ton directly from the command palette. So if you're the type of person who never likes to leave the keyboard with your fingers, and, it's really nice to be able to quickly say, rid. Pull from checkout to merge this branch, commit, whatever.

And many of the extensions that you install with Versus Code that We'll talk about later, end up having their own commands in your command palette, whether that be conventional commits or anything like that. So many times, if you're wanting to just Commit and you don't wanna leave the context of your code. You can just hit that command palette and commit directly from the command palette, and that's really nice and easy. And and, personally, I think that's way easier than even switching context to a terminal anywhere, whether that be in Versus Code or in another app. Rid. I think the killer feature of the command palette is simply just being able to see what the available options are.

Because if you just type commit, You see, get commit, get commit, all get commit, amend, commit, commit an empty stage it.

And, like, I wouldn't even know what the flags are for all of these things in in the CLI.

I use rid. It's called Fig right now, which gives me much more IntelliSense into those options. But before that, I don't think I have any

Good way to go ahead. You're you're hitting those git gitdocs, which, personally, I if I'm in the gitdocs, I'm not having a great time.

Rid. That's me. I'm, like, all of. Yeah. You go to that well, the Git SCM website. Yeah. You're like, oh. That's a great website, but I just sometimes I groan when I think in that, like, it's a little worse. It's a little technical.

What does kid undo? What does kid undo? Right. You know? Give me the plain English. Get get documentation. Why is it hard, and why is it soft? You know?

Why? Well, the okay. So that needs to go in the, the Southport. The syntax code generator.

Alright.

Next is going to be the source control tab, which the source control tab, I did it used to be called something else? Because I went and I remember I was, like, Searching was it called s SCM or something before? Yeah. That was called version control. Control for the longest time. Yeah. So now it's called source control, And I actually this is how I primarily interact with Git myself.

So if, this has become really where I live for all of my commits, especially because I have a a somewhat decently sized monorepo.

And my monorepo has sub repos. It has private and public, rid. Repose in this monorepo.

So we we have all sorts of ways if I wanna commit to a specific project or work within a specific project. I can see Every single one of my Git repositories in the given project that I'm in just kind of in their own world over here.

In addition to, like, being able to see, all of your projects and all of their git status, you can commit. There's a text box for any time rid. That's, changes have been made. Every single one of your files that's been modified shows up here, and it has a little different color coordinator with an m, a u, or a d, depending on, like, what's the status of this thing. Has it been, un is it untracked? Has it been modified? Has it been deleted? Like, what is the status of this file? What happened when this file changed.

And that to me just is a nice, a good visual representation of everything that's been going on in the given workflow that you've been doing. So So let's say I've been working on a feature for a given amount of time, and I noticed that in my source control, I'm seeing, like, a ton of modified files. That's a good indicator to me that, you know, I should be doing a command right about now. This thing is getting kinda heavy. There's a lot a lot of changes being made here.

So to me, having that visual backup of, like, what is this current status of of my or my tracked or untracked rid. Files to me is is a big indicator of where I'm at in a given

session of coding. I really like the source control, sidebar as well simply just because they give you buttons to do common things like you can they have like you can just sync it with your rid. Git repo. So if you've got I don't know. You got a coworker that's on GitHub. They push the changes. Alright. I pushed it. Pull it down and and give it a shot. Right? You can sync it instead of having to type whatever git pull and and whatnot.

Then they also have just arrows for specific.

You can discard changes to a specific file. You just Oh, yeah. That's so handy. Click it. Discard changes. Done. Like, what the heck Is that command in the CLI? I always forget it's get reset dash dash soft at Head dash 1 or whatever, you know, like, I'm I'm I'm saying this as someone who's like, I'm pretty rid. With Git, I think. Like, not amazing. Sometimes I have to go to the old Twitter and ask the actual experts, but, like, that it just makes so much more sense Just to have a button.

That's hard on it. CLI to be that intuitive, and and so this gives you an intuitive, rid. Here's an undo looking button to do the undo functionality.

I will take that. Hey. That that's fine with me. And and some people don't like using mouse at all, and I get that. And then you can head to the command palette or any of those things. But to me, sometimes that visual representation and sometimes just using the else there is isn't a big deal. I actually, you know, appreciate it and enjoy that. It it is sometimes nice nice to see, like, how many things are you you pulling down when You're pulling down from a a commit that's been pushed up or something. I I think the reason why I like this so much is that it's like the we said this. Go back To, like, one of our 1st ever episodes on switching to Versus code from Sublime Text. We I think we said it's the right amount of GUI, rid

meaning that it's not a huge separate app or whatever. I'm I'm already in my editor. I feel comfortable in it, and it just adds the right amount of buttons, The right amount of, like, metadata information at a quick glance, you can see which files are modified or deleted or or untracked.

Rid. It's just, like, so nice and quick, and it it doesn't get in my way. It's not like, a lot of people are, like, just don't use the Versus code stuff. Use a GitHub desktop. It's way better. Rid. And I yeah. Parts of me agree. Like, you can just drop down and see all your branches names, but then parts of me is just like,

rid This is the right amount of of gooey for me. Yeah. It's it's like a it's like a brownie that you pulled out of the oven just a little bit too early.

Rid It's the right amount of gooey.

Impressive.

Yep. So, you can also rid change branches from here, Wes. I don't know if you knew this, but you can click the little branch name that's right next to the project name, and then that will bring a drop down in your command palette area to to let you choose the re really quick and easy. That's nice too. I don't typically do that. There's an easier way that I found. Now you can also interact with Git in the status bar, which is that bar that's at the very Bottom of Versus Code. That that's called the status bar, which, to be honest, I didn't know what it was called before I wrote this. The show notes for this, I had to go into the UI, and I was just toggling things rid until I found what it was actually called. So the status bar is where Versus Code kinda puts a lot of informational things based on different plug ins that you have installed or Maybe what what language or maybe Prettier is down there. But in the bottom left, there is your branch information, what's currently which branch you're currently on. And the next to it is a synchronized changes button. And this is, like, oftentimes if if if there are, like, rid. Remote changes in the current branch that you're on. It will say, like, a down arrow with a 4 or an up arrow with a one based on how many different commits are waiting for you to pull down. And if you click that, it will pull pull down and push up any changes that you have just in 1 fell swoop. And I always found that to be, like, a great way to work. If I was seeing that, you know, me and a co worker were coworker were working on the same branch And all of a sudden, I'm seeing code come in. I can just go ahead and click that and stay up to date at any given point, and that to me is really nice. I also this is where I rid. I use my mouse to the bottom left corner of Versus Code, and I click to change my branch. That's how I change branches in Versus Code.

Rid. I don't know why, but I that that to me is, like, the little workflow I've gotten into, and it feels nice for some reason. Yeah. There's also something about, I don't know, nice about,

rid. I don't know. Clicking instead of like, when you're doing something big, like switching a branch. Yeah. Clicking. I don't I still use I I still use command palette when I want, but they're definitely not against using

the key or sorry, the mouse for that type of thing. It's not a big deal. It's not a big deal. And and I don't know why, but I've gotten really used to it.

So let's actually take a quick moment to talk about one of our sponsors today, which is Linode. And, actually, Linode, if you're running a virtual private server, that might be a great way to utilize some of your Git skills in the command line because, you might be rid. SSH ing into a box and using some GitHub stuff or get get get commands using that CLI put to work. Wes, do you want to talk a little bit about Linode? I do. Linode is the

rid. Cloud computing, Linux hosting, awesome company that they are, and they're gonna give you $100 in free credit. So listen up. Linode's an awesome company. So if you wanna host your website or host your note app or literally anything, they have products for every single thing that you could want to host.

Rid. But they also have, like, very, very good docs. So they have just and this has just been updated less than a month ago, A beginner's guide to GitHub.

And that's what I love about Linode is they've got, like, really good docs, really good documentation Around like, this is not necessarily how to use Linode, but they know that, okay, you're using Linode. You probably are also needing to know how, rid. How Git use Gitworks or GitHub works, or they have they have docs on GraphQL and Node. Js and Perl and Python.

Rid. You name it. They've got it. So, awesome job at all their documentation. If you wanna host your next website, your next node app, your next Python app, whatever it is, Check out the $100 in free credit at linode, l I n o d e, .comforward/

syntax. Thank you, Linode, for sponsoring. So now we talked a little bit of ways that we can use Git in Versus Code. Let's talk about some features that exist within Versus Code to make your Git life easier.

Wes, you have file history here. Is this Part of the extension Git history, or is this, like, just straight up a file history? This is straight up baked into,

rid. Into Versus Code. So if you are inside of a file, you can just right click and it should say here you you try rid

I just did command palette file history, and that

opened it up for me. Okay. There you go. Command palette file history.

Rid. And then what that will do is it will open up another panel in your Versus code, and it's going to show you literally your file history. So it will show you all of the commits that you have done to this file, who has done them.

It'll show a little photo. It'll show you when they've done them, obviously, the commit hash. But then it will give you a whole bunch of, like, gooey features for doing resets. Soft and hard resets allow you to create tags and branches off of specific commits, as well as a whole bunch of links to reverting.

Then you can also search the commit history.

Rid. You can filter by branches, filter by authors.

You name it, they've got it. And I find that to be really, really handy when you're trying to find a specific commit. Rid. Yeah.

Because doing that in the command line, I've done it many times. Git reset dash dash hard, and then you got to copy the commit short hash, rid. Paste it in and make sure you have the right one. Kinda scary. Much nicer just to see the actual commit that you have done. You can line up the hash if you're Double concerned with it on GitHub, and you can revert or create a branch off of that. You name it. You got it.

Yeah. I often me personally, you know, I'll hit issues where I'll just be like, when did this file get changed exactly? Like, I don't I remember this file being different, or I remember this line being different. And and sure enough, there's git blame stuff there too that we'll talk about. But, being able to see a given file history for me is is really nice. In fact, I'll also talk a little bit about an extension that I use To quickly and easily check that file history, but being able to, like, time travel back in time and see sort of the status of any file, when it was changed By whom and in what branch and what version. Any of that stuff becomes such a power tool when you've been working in a code base that's existed for a long time.

There's also the diffing, within GitHub. Now there's 2 different kind of ways for rid. Diffing. One of which is we'll talk a little bit about conflict resolution.

But diffing in general, when you're comparing 2 files in Versus Code, What it will do oftentimes is it will have the file that you are comparing it to and the older or newer one based on whatever. It'll have them open rid. Side by side, and you can see highlighted in red with a minus sign in the gutter is everything that was removed from a given version of the file. And then in the newer version of the file it could be plus with a green for anything that was changed or added so You can quickly and easily see what's been removed at any given time over time between 1 file version and another file version. And, typically, the way VSCode will do it is even though it's essentially 2 tabs open, it'll have them as 1 tab in the tab bar, And it will say, for instance, like index dot HTML and then then parentheses, the commit, the shortened commit number, and then an arrow over To say the same file name and then the commit that you're comparing it to. So you can see directly the commit numbers in which 2 files you're comparing, And you can get a good view and a good understanding of what has changed. Just at a a quick glance, you can scroll up and down, and you that information in the the scroll bar too. I don't know if you've noticed this, Wes, but in the scroll bar, there's red and green showing you where exactly all of these changes take place. Rid. Super handy.

One thing I don't think a lot of people know about, Versus code specifically is that, in between commits, rid. You your Versus code is still tracking changes, and this this has always been a kind of a scary thing for me. And, quite honestly, it's a reason why I Have kept working out of Dropbox for so long, and I've been doing this less and less. I'm almost totally done with that. And the reason behind that is because Versus code tracks your changes in between commits, meaning that, like, if you accidentally nuke a file rid. After you've committed it, but you've saved it and closed it down, you're you're kind of out of luck unless you have, like, time machine where a time machine magically backed it up right during at the right time.

But Versus code will actually take a change. So if you go into your sidebar, rid. There is a little, thing in Versus Code called timeline, and it will show you all of your git commits in there. Rid. But then it will also show you your file saves in between those git commits. So if you make a change and and then click on rid. Save it, and then make another change and save it and click click back to the one of the last file saves, like, 30 seconds ago. Rid. It will open up a diff for you, and it will show you this is what it was before you saved it, and this is what it was when you saved it. Rid. And you can revert back to those just like it was a git commit, which is unreal. I love that feature. So I'm gonna need you rid. Me where exactly that is because I've never heard of that. I had no idea that existed.

Oh, man. Okay. So, open up your just your file listing Mhmm. In your sidebar?

It's called the Explorer, Wes.

Explorer.

Okay.

And do you see at the bottom, it says commits, NPM scripts,

timeline, outline. Click on timeline. Seen any of these other tasks here. I've only ever looked at the I've seen outline maybe, but I've never seen timeline. Woah.

Yeah.

Interesting.

The outline It's really handy as well. If you've got a markdown file, it can give it gives you all of the nested headers from your markdown file. You can jump around to it, But the timeline is is unreal.

And like this one right here, just put that in your brain somewhere because at some point, you're going to accidentally oopsies Nuke something and close the file, and you're gonna be like, where did that code go?

I love this. Have you have you done that? I've done it many times. Yeah. And I'd I'd I'd like I said, I didn't know this timeline existed.

The things you learn, Wes, this is why we do this show. This is why you listen to the podcast. Yeah. This is why I listen to the podcast.

I need to do like a Versus Code

video or something like 10 things That are kind of niche, you know? Yeah. I have a series, Versus Code Pro Tips, where I just talk about little things that I've picked up here and there. So Good. A little like one offs.

Yeah. Yeah. Those are the things like you. Versus Code has so many little features that you don't necessarily know them all. My little trick to people is open up the command palette rid. And scroll through the entire thing and just, like, look for random fun commands Yeah. And see what they do. You know? Or people are always like, how do you know rid these features. I literally just click all the menus and read all the menus, and users usually hidden functionality

inside of those menus or in the command palette. Yeah. Here's a One thing that I do occasionally, you go to the, settings UI, and you go to the search bar, and you just type in experimental.

And you see what What kind of new features or experimental things? Also, you know what's really great, though, is the v s nobody does I don't think anybody does rid.

Release docs as good as Versus Code does. Versus Code does the best release docs. They show you at any given release all of the new things that have arrived, And they do so by, like, highlighting various color themes. And in Versus Code, folks, can you highlight, the syntax remix of LevelUp Tutorial's official color scheme sometime? Because, I've seen Cobalt 2 in there, but I've never seen my theme in there. And every single time I I check one of those Versus Code rid. Release docs. I'm always like, is it gonna be this 1? Is this the one where my my color scheme gets featured?

Who who is it that puts those docs together? Because rid. I want that, but you chat. Shout out to the Versus Code team for using my theme in those release docs sometimes.

They are great, though. They and they show you every single month new features, and it's fantastic.

Let's talk about conflict resolution. When so conflict rid. Resolution is something that takes place typically when you're merging or pulling in code where code has been modified somewhere else, whether that is From an automated process on GitHub, you know, from a GitHub action or something, or another user's modified code and push up to the branch or a pull request or something, And you have what's called a conflict, and a conflict is typically when, Git cannot, they cannot Git itself does not understand What to do with the code coming in and the code going out? Where where what code do you want us to keep? What code don't you want us to keep? And what is the actual it's like lost lost the plot in terms of, those changes that have been made whether or not rid. Do you know exactly what conditions create a conflict in in GetWes?

Yeah. It's like when a line of code rid. Is changed, and it's not necessarily the same line because Git is very good about figuring out, like, alright, if you added Forty lines above this and changed one below it. It still knows. Okay. Well, obviously, that went down. Right? So that's why it is so good. But rid. Generally, if if some line of code has changed, and ready. You have changed it also, and you're trying to merge it. It says, okay. Hold on.

I have a change from the original.

Rid. It says I love pizza. That was the original.

Scott changed it to I love sushi, and I changed it to, rid. I love burgers.

So now what's happening is we we we both had I love pizza.

Scott tried to change it to burgers. I tried to or Scott rid. Tried to do change it to sushi. I tried to change it to burgers. That's a git conflict. Right? Bringing sandwiches into us, and, rid. Then you have to manually do that yourself because Git has no idea. Okay. Well, you changed it. So does Scott. Like, Get it together.

Right?

G I t it together. That's for sure. Yeah. I'm I'm glad you managed to to get food into this episode.

That's great.

We have a good track record here going. Whether it's under the hood or it's Sandwich building or something. We, we have a pretty good track record there.

So what happens is when you have a conflict, typically, rid. Git will will say well, 1, it will in the source control tab, it will have a c next to the file, and that c stands for conflict. There's a conflict with this file. Rid If you click on that c on any given file that there's a conflict on, it will show you a diff.

However, this time, there'll be Sections of the code that has incoming code, outgoing code, and whether or not you want to keep the incoming, keep the current, or keep both.

I almost never keep both. I don't know, like, if it's just the way I code, but, like, keep both is almost never something I select. Sometimes I end up rid Just going in by hand and not clicking the buttons and just highlighting and deleting the the code I wanna keep and whatever. But in your actual code, Git will put in the hyphens and some bunch of stuff there to show that there is, where 1 branch starts Or one one commit starts and the other commit ends and, what's coming in and what's going. And so you can say, oh, rid. This is the line of code that I actually want. I want it to say, you know, I like pizza or I like whatever. So you can you kinda have To go in by hand and and massage the the code a little bit to really say exactly what I want and what I don't want. Yeah. This is another reason why I love the

rid. Versus Code GUI for doing merge conflicts because I've for the longest time, I've been able to Edit my merge conflicts by hand, which means that Versus Code gives you whole bunch of the what is that? Arrow left pointing arrows? Yeah. It's it's It's a bunch of junk I never look at. I just know it's there. Bunch of arrows, and it'll say the current branch name or or head. That means, like, what head means, like, what is on your computer right now. Rid. Then it will show the code that's on your computer, then it'll have a a whole bunch of equal signs, and then it will show the code that's incoming.

And then it will say rid. A bunch of closing angle brackets, and it'll close the branch. So you say, like, in rid. Just by hand, you just basically you keep the one you want and you delete the other one, and then you get rid of all those arrows and whatnot, and you're good to go. But rid. Versus code just inlines little buttons like you said, accept current change, accept incoming change, accept both. So you said I've never used that. I have that on my jokes repo a lot, where people will add A lot like, I'll add a line to the end of the jokes repo, and then somebody else will add a line to the end of the jokes repo. And what happens is that okay. Well, rid. 2 people edited the very last line of this. They're both adding their own joke, but they're both editing line 80. Rid. And in that case, you you keep both because you okay. This person just clearly added something. That's the most pain in the butt type of change to deal with rid Where it's just people adding stuff to the end of I have that with my users dot tech repo as well where you could never rid Used to never be able to automatically merge conflicts because we would have a 100 people pull request adding themselves to the very bottom of the file.

So I fixed that by saying add yourself at a random location.

Yeah. And, it fixed it. So it's it's it's a great UI. I love it, and it's It's because you can so quickly you say, okay.

This this pull request added a sync to the function, and then I also added a new argument to that function. So if that's the case and you just boop boop boop, you can you can manually see what happened and manually do it yourself.

Yeah. And I I do like I like how much, it is exactly you're not having to switch your context context. It's where you're writing your code. So You can get all of this interface directly in front of you where you're writing your code. And and I I just I like that about the the UI, especially for for diffs. Rid. You got your Prettier working. You've got your all your auto completion, your syntax highlighting. You're just comfortable in the code. And if you're making

A kind of scary merge conflict in your code. You should be where you're most comfortable editing that code. Yeah. I hear you on that.

One last thing before we get into extensions and we take a a sponsor break, I wanted to just talk briefly about one Little automation tip that I have that you may or may not find to be useful.

Some people I I I did a little video on this on YouTube, and I I definitely got mixed.

Some people, this scares for some reason, and this does not scare me. I really like this. And what it is is automatically pushing your code after a commit.

Now especially if you're you have, like, a good branching system set up and we have, like, you know, automation set up through, GitHub actions And we have a good branch flow where I'm not pushing directly to staging often where it's going to trigger or deploy to our staging environment. I'm pushing to Sub branches in them and do a pull request in the staging. So what I do is if you go into Versus Code settings, and you search for post commit Command, there is a drop down, and you could say after post commit command, you can sync, you can do nothing, or you can push. And I have mine set to push so that anytime that I commit, I do my commit, I hit enter on the commit, It automatically pushes up to whatever branch I'm working on. And to me, that's it's it's one less thing I gotta do. And since our workflow is so, you know, buttoned down, it just feels so nice to me to do that. And then I might even change this push to sync, rid Just to pull down as well. I guess maybe I like to be a little bit more control of when I'm pulling down code, but push to me feels like it's right there.

Rid. Yeah. Yeah. I think the only time you wouldn't want it I think I'm gonna turn that on. I should say that. But the only time you wouldn't want that on is if you have a rid. Commit often and squash before you push, meaning that a lot of workflows will be like let's say you're working on, like, a Like a huge, a huge feature, and you commit 7 or 8 times throughout the for over, like, 2 days.

Before you send up a pull request, what you might want to do is to squash all of those commits into a single commit that says, rid. Added this feature, and then you send a pull request over because what can happen is if you push all those changes And then you squash them, then you are I'm pretty sure you have to force push to overwrite rid. What is on the remote? And then there's a possibility that somebody else forked what you had, and that's where you get into hot water with with Git. But, Quite honestly, it's not your workflow.

Sorry.

I almost never squash.

Yeah, it's it's not Something that like, it's it's all on, like, teamwork flow. Like, I worked Yeah. When I did contracting, I worked for, it was Red Hat, and we rid. Squashed all over the place because it was a rule.

Obviously, commit often because you don't want to lose your stuff.

Rid. But when you submit a pull request for a feature, it should only be 1 commit that's nice and tidy. Other other teams will say, whatever.

Rid. You got 8 commits. That's all valuable information that is part of your commit.

Let's keep those in the code base. Right? Interesting. Alright. Well, let's take a a quick, quick break to talk about one of our sponsors today, which is LogRocket at logrocket.com is the perfect rid. Place to see all of your errors and exceptions happening in a visual video scrubbable replay and also get a handle on just how your users are visiting the site. Now it's funny this rid episode's about visual tools, and LogRocket is one of those visual tools just in a totally different context. So for me, LogRocket is one of those things that Will will really change how you debug websites because having a scrubbable video replay suddenly opens up to this whole world of being able to see errors happen. And When you can see errors happen, it just makes it so much easier to solve them. There's just something about that visual aspect of Working with the tools, whether that's the the console logs or the network request tab, and being able to see these things happen and really just dive into them makes it such a a great experience to solve bugs. So check it out at logrocket.comforward/syntax.

You'll get 14 days for free. So definitely a tool you want to try. Least head to their website. Watch some of their videos. See what it's all about. Really interesting stuff here.

Love these visual tools, man. I'm a visual person.

Alright. Let's get into extensions really quick, and we're we're kind of running out of time here so we can breeze through some of these. Oh, shit. Yeah. We've got rid So much more. We this might need to be a part tour because, yeah, we've got lots here. Let's get into it. Yeah. Let's get into it real quick here. GitLens. GitLens is probably the best extension for, Versus Code in my mind. GitLens gives you a visual file history, rid. Really easily allows you to tab back and forth. There's, like, what it gives you is these little arrows at the top of your file. And if you click the arrow backwards, it will just Give you the previous version of the file in a diff, and I use that almost every single day because there's so many times where I wanna see what was the previous status of this file. I click that little arrow, and then I see in a diff exactly what it is. It gives you a visual file history.

It gives you, git Blame, which kinda sounds aggressive to call it blame, but that's just what it's called. Git blame just basically shows you who edited a file when they edited it. And this will show you in line in your you hover over any individual line. I used to use an extension Git named Git Blame for this, and I just realized to that GitLens does all of my Git Blame features. So I've uninstalled Git Blame now because GitLens does all of the things that I would want it to do Tell me who last edited a line. In that way, if you see some line and you're like, who's the donkey of the day? Oh, it's me. I'm the donkey of the day.

Then What is this of that. The day from?

I just I I don't know.

I it popped into my brain this morning. So I was really angry at Capital One. So I was like, oh, they're the donkey of the day. And, when that was in my brain, I was like, I wonder if I can put together a sound for donkey of the day and just bring it on Wes without him noticing it.

But I didn't have enough time. It also shows you authorship of individual code blocks. So it can say, like, before whole block of code who wrote it, which is nice. There's a interactive rebase features, which I've never used, but look nice. There's also a bunch of, like, plus Features that you have to pay for for private repos that are free for public repos, like a work tree, which allows you to easily work on different branches of a repository Simultaneously, I don't know what that would be like. I haven't used it, but it kinda looks sweet. So I might I might wanna check it out. Yeah. The the read base. Rid. Sorry. Rebases are always kinda tricky,

because you gotta know what all the words are. So I've never done a I've done an interactive rebase before, but I've always just, rid.

Edited the rebase file in Versus code. Mhmm. You put I or s or whatever. You know, if you wanna keep it or squash it or rename it, You just put them in, go for it. But I I should try that out. I almost never rebase because it scares me.

So maybe maybe a visual version of it wouldn't scare me less.

Rid. Another really good, another really good extension is Git history, which honestly is is probably redundant now that GitLens has, like, really good history and there's individual file history. But I used to use this Git history extension. And this is another one I think I might reinstall now that we've done this little deep dive to see, exactly what what extensions are are various here. We also have git graph, Which is an extension I use for a really nice visual representation of the branches that you have, the current branch, how it all works. I mean, we're talking about branches, and this gives you the ability to them in that whole branch Oh, I have not. I have not.

Oh, it's gorgeous. And the coolest thing about it is you see it. You see all the branches, And you can click on any commit there, and then it'll show you all of the files that changed in that commit. And then you can click the file up from there. It'll open a diff directly. All of these things are are things that we've been able to do, like, 8 other ways in Versus Code and Git, but this one for me is also nice and visual and just easy to use.

Rid. Like I said, Git blame, use GitLens instead.

They're also I I just asked on Twitter real quick. I was like, what do you use For git in Versus code, like, any any tips or or whatever. And I didn't even realize that there's an official GitHub extension.

Rid. It'll allow you to do things like review pull requests, validate PRs.

You can hover over specific issues. You can filter for things that were created by yous.

Rid. You can say start working on an issue. So if you have an issue, you can immediately just branch off of main, into your own branch for that one. So rid. That makes the, like, synergy between your Versus code and GitHub a little bit tighter. So I I have not used this yet. I just installed it. I had no idea they even had one, but, obviously, it's huge. There's

6,000,000 people are only 3 out of 5 stars, though. Interesting. I when you when you wrote this in the the show notes, I was like, oh, am I am I a dummy for not knowing this existed? So I'm really glad to hear That, you didn't really know about this either because at first, I was like, wait. Why the why isn't that I I didn't have this installed. So, yeah, I I should check out the GitHub extension. I have not used it. Rid One that I

handy for, like, like, triaging pull requests because, like, I, I my personal website, I've got, like, 20 pull requests open for it. And I would love to just, like, motor through that right from my editor without having to go like, you go to it and you're like, okay, I can merge this one. And, Oh, that one you can't merge. Let's try edit it online. Oh, I can't. Okay. And let me let me pull the origin down and and fork it into its own branch and, You know, like that can be a little bit slow sometimes. Yeah. I would love to be able to

do more with, like, GitHub actions in Versus Code. I like to test and run GitHub actions locally

would be just Yeah. So I mean, I that would be great. I think I wonder if they're working on that because that that's the one thing that get up actions and it was got to set up too much, you know, lots of

tokens. I have a I have, like, a an alias that does, like, a quick, get commit and push that where the commit message is just like rid. Testing forget how the actions because it's such a pain to to make sure, like, something works. So you gotta wait for a tall run through, and then it doesn't work and you try it again. Rid Another extension that I use, we before we can wrap this up here is conventional commits. And one thing that I really like about the conventional commits extension is it gives you All of those conventional commits workflows if you use that that way of working in Git, and it puts them all in your command pallet, but it Also puts them into the version control, the version control window, the source control window. In fact, it whether it's the little there's a little button next to the check mark if you install this that pops open essentially the command palette thing that where you can use conventional commits directly from the source control tab.

So I do use conventional commits, and I like them. So,

they makes it nice and easy for me so I don't have to remember the syntax for that. Last rid. Tip I have here. Somebody mentioned this in Twitter, and I said, oh, I've been using this one forever. It's super handy. It's, if you do git config globalcore.editor And then you pass it code dash dash wait.

What that will allow you to do is if you are ever If you're using git from the command line and you need to do a rebase or a merge conflict or, there's a couple other ones where before you before you go ahead and rebase something, you need to tell git to wait.

And what that will do is it will open up the merge conflict. You can save it and then close that file, and rid. Git itself will be smart enough to say, okay. They're done. Let's go ahead and and keep going. So the dash dash wait flag on code

is really handy. Interesting. So okay. Well, that's that's rid. Really, really insightful. I so this is what we have here. I know we ask for a lot of tips on on Twitter. If you listen to this So and you say, oh, man. I have all these great Versus Code tips for Git. Please hit us up on Twitter. Tweet us at a what you think, babe? We can do an entirely other episode that's, like, rid Versus Code tips from user members.

Yeah. So that maybe we can try out some new stuff and learn some new things ourselves, and, we can all upgrade together. Let's take a a quick rid. To talk about a nonsick pick, but a sick pick nonetheless, which is FreshBooks. FreshBooks, such as a FreshPick, I you could say. Wes, do you wanna talk a little bit about FreshBooks? Yes. Freshbooks.comforward/

syntax.

They are cloud accounting.

So they do all of your invoices, all of your client management, all of your rid your project, your time tracking, your HST, all your different taxes for around the world, your billing in different Currencies, you name it. FreshBooks does it. If you're a small business and you wanna save time so you can actually work on coding instead of actually having to rid. Do the books of your business. You need to check out FreshBooks. You're gonna get paid faster, and you're gonna spend less time fussing around with your books. Check it out. FreshBooks.comforward/ syntax. That I'll get you a 30 day free trial. Thank you, FreshBooks, for sponsoring. Sick.

Alright. Now let's get into the part of the show that we call sick picks Or we pick things that we think are sick. I have a sick pick for y'all today, which is a, text expander application. Now text re Expander went, like, paid subscription, and it was kind of, it's a great application, and I love expanding text because it can make you Have auto completion stuff really nice and easy, but here's an app that is free, and it's open source, and it is multi platform Mac.

Rid. I almost said Linux. Windows and Linux. MacOS, Windows, and Linux, and it's built in Rust. It's called Espanso, espanso.org.

There are extensions to this thing. There's packages you can install it and can autocomplete emoji just so you can get like Slack style emoji all over your computer without having to have a separate app. It can have really nice, smart smart typing. West found some stuff in here that, he he's been looking for himself. So, like, form support where you have your own form and it inserts your your text into into a pre established completion

via a like a form. Yeah. I used to have a bunch of, like, Auto completions, and you would have to populate the user's name into that and then also select from a drop down.

Rid. I don't do that anymore because I have, like, a dedicated support person that does email, but I use this a ton. And I've been I've been on the, like, the one time payment old version of TextExpander forever because there's no way I'm spending $6 a month to expand

Do text expansions. You know? Yeah. Right. No kidding. Right? And that that's kinda how I felt, so I never really got into it.

You'll West, you'll you'll like that there is a package to do random dad rid folks from here. So that's pretty neat. There's a whole ton of packages, actually. So, including some Git related ones, which I haven't used myself, but here they are. Rid. So looks neat. But, yeah, check out a spreadsheet, though. X triggers. Oh, that's cool. Oh, I don't like that. Yeah. This this seems rid. Sweet. I'm excited about this.

I am going to sec pick something really cool. I'm gonna hold up hold it up to Scott and see if he can guess what it is.

What does that look like? It looks like a pen is looks like a calligraphy pen.

Yeah. It also looks like something you could stab someone with. It's definitely stappable.

Rid. This is, an AirPod cleaning tool. Oh. So, man, if men my AirPods, rid. They I have them in my pocket all the time, and you have them in your ears all the time, and they get disgusting.

The case gets, like, full of dirt and, like Like, it has magnets in it, so it just it attracts, like, I don't know, random bits of metal. I'm not sure what I'm doing, but my AirPods are awful.

So I got this tool. You can get it on AliExpress. It was $3 shipped, and, essentially, what it is is on one side, It has, like, a microfiber little, pokey bit, which is you you poke that down into the rid. You poke that down into the, AirPod case, and then it has a little like a stiff bristle on one side. And then on the very end, it has, like, pretty much like a calligraphy tip or like a stitch ripper if you've if you use one of those before. Yeah. That's used for rid. Digging out the nasty earwax out of your your AirPods.

It's just a cool little nice little tool. It comes with a nice little case For $3 shipped, just I don't know. Just go to AliExpress and type in AirPod cleaner. Yeah. There's, like, 10,000 of them that all look the same. Yeah. Exactly. So I was wondering, like, how do you get the dirt out of the inside of the AirPod case? And this is the ticket. I initially saw it on, it was like a TikTok ad, and it was, like, worth, like, 5th $15. I was like, there's absolutely no way rid. These are just anything any ad you get on Instagram or TikTok is just someone drop shipping something from AliExpress.

So just go straight good live tip right there. Yeah. Yeah. Just go straight to AliExpress and buy it for a 5th of the cost. Sick. Well, I love that. Okay. Yeah. I'm gonna pick one of these up for myself. Alright. Next 1 is going to be our shameless plugs where we plug things that we've created. I'm going to shamelessly plug, Of course, level up tutorials .com. It's my tutorial site that I have, I've created, but we also have a ton of guest content creators, ton of, rid. Really talented people doing courses for level up tutorials.

So if you're interested in learning any modern web development Stuff, whether that is a real time remix with Supabase, with John Myers, who we're we'll have on the show actually coming up to talk about rid super base a little bit if you're interested, as well as things like three d and Svelte or browser APIs or Keystone JS with Amy Dutton. You can check it out. Learn all of that and more at level up tutorials.com.

We offer a la carte pricing so you can buy each course individually, or you can and get access to everything on the site, which is a massive, massive catalog of tutorials.

Awesome. I'm gonna shamelessly plug All of my web development courses. So you wanna learn a little bit about CSS or JavaScript, go to westboss.comforward/courses.

You could see a list of all the courses I have available. Lots of free ones, lots of paid ones.

If you do get a paid one, like my beginner JavaScript, you can get $10 off by using the coupon code syntax.

Rid Alright. That's it. Thanks everybody for tuning in. We will catch you on Friday. Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player Or drop a review if you like this show.

Rid.