Hasty Treat - VSCode Extensions and Tips

Welcome to syntax. In this Monday, hasty treat, we're gonna be talking about b s code stuff. We're gonna be talking about extensions and tips That we like. I know we've talked about this before, but I'm sure enough time has passed that we have a whole bunch of new Versus Code extensions. I feel like I find one that I love and use Constantly on this thing. So, I'm excited to talk about some of my favorite extensions. My name is Scott Tolinski. I'm a developer from Denver, Colorado. And with me as always is CSF. Lead west boss.

Hey. I'm excited about this. It's been a while since we've done a Versus Code show, and I have a ton of new workflows and plug ins and Features that I have been using. Catches and gizmos. Love it. This episode is sponsored by .techdomains

and LogRocket. Hey, Wes. You wanna talk about .tech domains, and I'm gonna talk about LogRocket?

I do. What does .tech domains do? Send a name. You silly goose? They have dottech domain names. So you need a domain name for your upcoming, company or side project, or anything like that. And .tech is the the TLD, the domain name that you need For your next project, I personally have a couple .text domains myself. I've got uses .tech, Which is a listing of all of my users pages and everybody's users pages. Almost at 600 people go and check that on out. I also got west.tech. I'm not sure what to do with that just yet, but I've been I've been saving it for something special.

Huge value in a dot check f. Dot tech domain name. If you wanna have a domain name for your next project, make sure you use our really good Coupon code we've got for you here. You're gonna get 80% off on a 5 year registration by visiting go.tech Forward slash syntax is tech. So click the link in the show notes for that one, and use a coupon code syntax 5. Gonna get you 80% off. Send us. We've been having a lot of people sending us their projects on the .tech domain name, so send us at syntax f m what you've been building with your .tech domain name. Thanks so much to .tech for

sponsoring. Thank you. This episode is also sponsored by LogRocket. Now what is LogRocket? Well, it's in the name, silly. It's a log Rocket. No. It's, it's log rocket.comforward/syntax, and LogRocket is the Error tracking service that gives you a a replay, and I'm talking to, like, a sports center replay here. You can click and drag a video, Scrubable video replay that allows you to reproduce and fix bugs faster. I'm talking about ever try solving a bug with just a a a stack Trace or something. Well, it's not a ton of fun. You don't have all of the information, and most importantly, you don't really know what the user was doing. You can kinda guess. Right? What it does is it it takes you to the position where you're an investigator who's looking around the scene of the crime trying to be like, alright. Well, the The computer's knocked over, and this is broken. How did this happen? And instead, you can actually see the user as they clicked that video replay. It's like watching a Security cam footage of the user click the buy now button 18 times until the whole thing blew up, and then they got so frustrated they flipped their computer over. You could probably get the sensor data for actually, I don't know if you could. So don't don't don't call me on that, but you can get the network tab. You can get all sorts of awesome stuff From the Chrome developer tools that you're used to inside of LogRocket at logrocket.comforward/ syntax. Sign up and get 14 days for free. Again, it's a session replay that allows you to see errors as they actually happen.

Very cool. Okay. Let's get into it. I'm gonna start with one of my favorite ones, and this is one that I use all the time because snippets. Right? We all love snippets, or if you don't, might wanna start liking snippets because they can really save you a whole lot of time. In the past, I would have fired up some sort of a snippet conversion.

Pavel Gershteback made a really great website that allows you to create snippets.

However, I've since moved on to Easy Snippet is the name of this extension.

It's a really cool little extension, and it's not that popular. I was kinda surprised to see Not a ton of people use it, but this thing allows you to select a bit of code. Like, if I have a function here, I can just select it, then I can right click on it.

I don't even right click on it. Typically, I I I do my command palette, and then I just start typing snippet. And you could see create snippet from selection.

That makes creating a snippet the action of basically just selecting and hitting your command palette, and then you can add it to a group. You can open a snippet view. You can Have an easy snippet search, so it shows you all of your your snippets just right there. Man, I use this thing All the time. I really, really love it. Handy. Yeah. And there's also it adds a new one of the actions to the side tab that shows you all of your snippets that you've created with a snippet manager. So So if you wanna go and edit them or change them or tweak them, you can go and see them quickly and easily there, or you can add new ones from there directly. I think this should be baked into Versus Code. This is one of my favorite favorite Extensions. Yeah. That seems really nice. I'm gonna install that one myself.

Mine is not an extension, but a new piece of functionality Honey, that was just rolled out in the latest Versus Code and in TypeScript 4.2, and it's called add a missing Function declaration. So we talked about this on the, TypeScript show, but a lot of the, like, TypeScript niceties, Things like renaming functions or moving to a new file or refactoring, those are actually built into TypeScript itself, and you just Access them via Versus code, but they just added this thing called add missing function declaration.

So if you have a function that you're calling with a couple arguments, you can use a quick action in Versus Code, which is your what's the I don't even know what the keyboard shortcut is. I just Hit it.

It's command command, period. Yes. And it will open up these all these little code actions. That's what they're called, code actions.

And they've added a new one called add missing function declaration, where it will create a function with all of the arguments Typed to at what you've passed them and then, just throw an error inside of that. And what that will do is it'll just scaffold out a little function for you. So If for some reason, like, you I I don't know about you, but I think most people first write their functions out and then go ahead and call them. But if for whatever reason you are copy pasting some code or you're inside of a function and you just write a function called, like, Purchase shipping, and then you pass it a string of the ID and then an object with the user's address and name and postal code. What it will do is it will Create a function with all those types in it, and it will type them for you, which is really, really fast. It's kind of a I think I'm gonna start writing a lot of code that way because of how quickly it Scuffled, it's out for you. I have never used. I will, take your take your little tip there. Just came out, like, a couple days ago. Yeah. Well, Wes, Okay. I'm on it. Okay. I'm on this stuff. I I use things the day they come out. Okay? That's

okay. My my next one is also gonna be an extension. I got a lot of extensions this time. I'm an extension fiend.

This extension here is gonna be one I get asked about a lot. It's called error lens.

And what it does is if you have an error in your code, typically, you get a little squiggly under the line, and then you gotta hover over it or f eight To find out what that error is. What this does is it makes the whole line red. And then next to the code, it actually prints the error out, which Can be a little obnoxious at first, but it it's only obnoxious if your code's got errors in it. So, like, you should and that's, like, really the point of it for me is, Like, to make those errors not something that I can sweep under the rug by just ignoring the underline, I can just be like, oh, This thing is yelling at me that I need to fix it. And it works in with TypeScript really well. It can show you, like, little things like warnings too. It can show you things like Implicit any, if you have an implicit any. So it it can show you a lot of little things, not just errors, but it'll show you warnings and nice little diagnostic stuff. I I use this

Forgot about it. I'm installing it now because the fact that you need to use your mouse to hover over your errors is kind of annoying. And you can do it with your keyboard, but it's It's kinda slow. I think. If you've got an yeah. If you have a nice wide monitor, why not have them showing up all the time just beside The line of code. I think I'm gonna really like this because it's less mouse work. Yeah. Love it. My next one here is I tweeted out the other day. I said, wouldn't it be nice if you have, like, a function called create course? Right? And that course takes in an object.

And in that object, you have the the name of the course. You have the price of the course.

You have any links to the course. You have all those properties. Right? And anytime you're creating a course, you need to provide all of these pieces of data. I was thinking, like, wouldn't it be nice if it just scaffolded out All of the properties that are needed that are required to make that thing for all the arguments in there.

And everyone's like, yeah, that'd be amazing. And then we found this somebody found this extension that it's got quite a few installs now. At the time, it didn't. And It basically does exactly that where you have a code action on your function and it will declare missing members, meaning that if you have to pass The name, the price and the links. Instead of typing them or whatever, you can just run this code action and it will scaffold out the name, the price, the links, and then you just go ahead and fill them in with whatever variables that you need to pass on through.

And that's just another one of these quick little time savers very much in the vein of, and I should say I'm talking about TypeScript here, but this will work for

JavaScript if there are types available for whatever package you're using. Neat. Okay. Got 1 more here for you. This is actually. It's funny. I asked a question or I I I tweeted about something that we both find to be very obnoxious, which is the import syntax For JavaScript, when you import, you have to do the import pat you know, what you're importing first and then from where? Like, that to me is crazy because it breaks your auto completion. Right? You have to like, it'd be much better if it was import from the package and then what you're importing. So I tweeted about that. Somebody said, hey. You can do it with a a snippet pretty easily using IDM, Which will write out the whole thing and place your cursor into the package name first. And then when you hit tab, it will then place it into the what you're importing.

And I think that's a a decent solution. We're not gonna get the syntax changed. So, yeah. I said, okay. Well, let me give that a try. And they're like, it's in this package, e s seven React Redux GraphQL React Native Snippets. And I say, I've had that package installed for, like, 3 years. This is one of the, like, The the back just that I'm always sharing with people. So I've had this snippet in my arsenal for so long, but only found out that I had it just a couple a couple weeks ago. So, this is e s seven React Redux GraphQL React Native Snippets. It is a giant package of snippets that are really some of the best snippets around. I use this for scaffolding all my React Components already and so much more. So, check this out. It is a mammoth amount of things inside of this snippet library. Again, I love snippets, And, this is this is really just the key package for all of that. My next one is a

an extension. It's called file utils, And what FileUtils does is it gives you rename, move a file, duplicate a file, copy file name. Get to duplicate? Yeah. In the not in your sidebar. Because, like, whenever I see people, like, creating new files or moving files, they always, like, go to the sidebar and use their mouse. I'm not a sidebar user. I you do everything on the command palette, and there are no file rename, file move, Delete a file. All of those things are not available via the command palette, and this makes all of those things available in the command palette. And I didn't even I thought this was just part of Versus Code. I must installed it Very early days, and everybody's like, what are you using? I'm like, the command palette is just in there. And then I finally realized, oh, no. This is an extension I've been using Forever. And one thing that we fixed recently, I'm gonna say we fixed. I complained about it. Somebody else fixed it. Is if you rename a file Via the sidebar in Versus Code or if you move a file via the sidebar, it will prompt you to update imports in your project. So if you If you import a function from this file, it will actually update wherever you've imported from that file name, which is really handy. And for the longest time, it didn't actually do that on file utils. But now it does. Now it works, and I never use my mouse in the sidebar.

I always just use the command palette, which is super handy. That's neat. I Still wish I could right click and duplicate even though you just gave that whole thing about not doing that. I still wish I could do that. Yeah. But I'm gonna use this anyways being able to dupe a file. CSF. You can right click duplicate a file. You can't? No. Oh, well, I have something installed

that allows you to do it.

Maybe this file utils extension does that because I'm sure, like, I don't always use the command part. Like in my courses, I'll zoom into the sidebar And say, let's duplicate this file, and then I just right click, duplicate.

So maybe that is from that FileUtils.

Install this. You need it, Scott. I'm installing it right now. That's for dang sure. Next 1 I got up for here is going to be GitLens. So I got a lot of lenses here. I got a Air lens, and now I have a GitLens.

GitLens add some really nice little utilities. Basically, it's like just giving you more advanced functionality for browsing Past Git branches, it's it's a long time extension. It's been around for a long time, and it it always gets better and better. One of the things I really like about it, Besides all of the features are that it adds, like, a little back arrow and then a little forward arrow where you can sort of time travel through your code. So I use this all the time instead of just like the the one that exists in Versus Code by default is just like compare to previous commit. But this one allows you to really step backwards and compare to previous commit of any commit just by clicking that arrow to go back in time. I use it literally Every day. In addition, that's not the only feature here. There's a ton of stuff. They say supercharge your Git capabilities,

and I agree. I turned this one off a while ago. I I think it's a little heavy. We talked about why.

People were literally typing committed 3 days ago in my courses Because they thought that that was typed by me, but it was obviously part of the editor. So I, had to turn it off for one of my s. And I just never turned it on again. Maybe I should give it another go. Next one I have here is, more of a tip or a trick, and that is when you are Writing GraphQL or HTML or any of these languages in backticks in temp in e s six template strings, And you want it to be highlighted as if it were not just a string, but if it were syntax highlighted like CSS, HTML, GraphQL.

There are plug ins that you can install. The GraphQL one will do this for you, and then the one that I use a lot is called e s six string HTML.

And what it allows you to do is you can tag your template strings with The word HTML.

And then that will highlight your strings as HTML because I do a lot of vanilla JavaScript, and I use backticks to template out HTML just like it as if it were React.

And this one is super handy for getting the highlighting. You can use it 2 ways. You can you can tag it HTML. And if that's the case, then you have to create a I'm using air quotes here. A function called HTML, that is just aliased to string.raw.

And string dot raw will they will do nothing. It'll just pass the template on. But then you can also use a comment, which you don't have to create a tag. You can just use forward slash star, HTML forward slash star before your string, and then it will highlight it for you, which is really, really nice.

Neat. Yeah. Next one for me is the one we oh, no. Not my last one. My second to last one is something I use all the time called wrap console log simple.

And this is just a basic extension that allows you to wrap whatever you're doing in a console log, and it can even label it for you as well. I use this all the time. I have mine mapped To control l, so I can highlight any variable, hit or command l. I highlight any variable, I hit command l, and it creates A console log on the very next line that could show you, with a label exactly what it is you're logging out. Again, I use this All the time for console log driven development, it is very good. My next one here is called text pastry,

and this is for pasting helpers with multiple characters.

So if you've got a list of allies or you've got and you're in a markdown document and you have A whole bunch of bullet points or something like that. And you wanna insert a number on every single line, like Chapter 1, chapter 2, chapter 3, chapter 4. What you can do is you can put your cursor everywhere where you want a number to show up And then open up your command palette and type in text pastry one two x.

And what that will do is Every cursor, it will insert a number and increment it by 1. I use this a lot when I'm using numbered bullet points in markdown, which is an ordered list.

And the reason why is I used to just use ones in all of my ordered list because Markdown doesn't care what numbers you give it. It will always render them out as 1, 2, 3, 4, 5 all the way up. But then I realized, like, the The kind of the point of markdown is that you can read it as if it were raw markdown, but you can also render it to HTML. So you're kinda losing the numbers.

So If you ever are in the situation where you have, like, bullet points 1 through 5 and then you add 1 after 2, Then you have to, like, rename the everything after that. With this, you can just select all the lines, 1 to x, and it will put in an incrementing number for you. I use It's also for if you need, like, unique keys in React or you wanna say, like, item 1, item 2. There also, you can you can start it from any number that you want. So if you wanted to start at 500 and go up from there, there's a bunch of other little features specifically for doing letters and Pasting lines especially as well. I use that one in Sublime Text for probably for, like, 8 years now, and I use it at least a couple times a week.

Last 1 here for me is an extension that I most likely have talked about on the show before and have most likely talked about in an episode about Versus Code extensions, but it's one of my very most favorite ones, and this is Better comments.

Better comments is, really key because what it does is it colorizes your comments based on some characters, whether you have, like, an Exclamation point, it makes it red. Or if you have to do, it makes it orange. I think an asterisk or a tilde. There's there's several different ones. I use these all the time.

And in fact, like, our code base is very the comments are super readable because of better comments. I I definitely enforce this myself in my own comments.

And, it makes them just easier to read, parse, and see what's important to know at a glance. Also makes to do stand out really nicely. I love this one. I can't imagine not doing it Because if you have to dos or or

what are the other ones? There's a question mark. There's a warning, an emphasis. Yeah. Yeah. Exclamation point will give you a warning. Yeah. I love better comments.

Next one here is just a tip in Versus Code, and that is to use Emmet everywhere. So if you use a lot of backticks to template out HTML like I do, it's really handy to have the Emmet shortcuts.

For me, I use it in JavaScript quite a bit. And if you wanna use Emmet everywhere, you have to just go into your Emmet settings and say include languages And then set TypeScript and JavaScript and JavaScript React syntaxes to be I think it's just HTML.

And then that will allow you to I have a custom shortcut set up to Emmet expansion. I don't use tab for Emmet because Tab is such a loaded thing in v s code, and it only does what you want about half the time. So I just have my own command e to expand Emmet To HTML, and it just works flawlessly. And you don't have to fuss with it ever again.

I think that's it. Some really good ones. I'm so excited about I just installed this, error lens, and it's looking really, really good. I'm super excited about it. Excited, am I? Mhmm. What is is that like is that like Bernie? Or Yeah.

Oh, some sort of kids show? You're the only person in the world Who wouldn't know? Yeah. Whatever. I feel like you're goofing with me. I I I bring out my special Yoda voice for 1 episode.

Yeah. And you just yeah. Dump all over my my special Yoda voice. Whatever. Oh, didn't you have the May 4th the other day? Oh, no. That's not yet. That's March. No. I'm not I'm not necessarily a big Star Wars guy. I have seen all of the movies at least Like normal people.

I'm holding out. Never.

Never. That's fair. That's fair. Alright. That's it. Thank Thank you so much for tuning in. We will catch you on Wednesday.

Peace.

Peace.

Head on over to syntax dot f 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.