Popular VS Code Extensions

[00:00:00]
>> Steve Kinney: So, VS code has support for these things called extensions, and there are lots of them, there's a bunch of ways you can find them, you could theoretically just start searching for them. There are some recommended ones as well as you can see, you could also go by the most popular, recently published could be anything.

[00:00:24]
Recommended are the really, what you think they are it's Docker or Python, right so on and so forth. There are some categories that you can kind of explore depending on, what it is that you're looking for, so on and so forth. So, I went through my own setup and pulled out some of my favorites, I will warn you right now, the ones that I love the most are the silliest, right.

[00:00:56]
And then I asked all of my coworkers for some recommendations. And then I did Google best VS code extension and opened five tabs and read some of them. So, this is a compiled list some of these if it is a language that you use, for instance, I also use bun a lot so having some of those little bindings, those aren't particularly special.

[00:01:21]
Let's go to the notes, though, where I've got a bunch of extensions that I put in alphabetical order as not to play any favorites. We are not gonna go through all of these one by one, but I will kind of pick and choose a few and then we'll grab a few from the audience and life will be good.

[00:01:46]
First, we're gonna go with what I'm gonna argue is the most important extension that I use, the last on the list. This one is called toggle quotes, right and what it does is it adds a new keyboard binding, either command, single quote or control. And I feel the only way to truly understand, make sure I uninstalled a bunch of extensions before.

[00:02:16]
But I'm sure, and then I tried to play a game of which ones did I actually feel the need to put back toggle quotes came back. Because I installed them and then went to my normal day job, and I just tried to see how many of them should up which I think is an important practice every once in a while.

[00:02:29]
Clear out everything and then see what comes back cuz I found something there then I'm I don't remember installing this. All right, so toggle quotes let me explain to you so the glory that is toggle quotes. So where's my index.js in the playground there it is, okay so let's say you have a string,
>> Steve Kinney: And all of a sudden, you're like, I wish this was one of those fancy template strings with the back ticks go inside the string.

[00:03:02]
You hit command, and you toggle between double quote, single quote, and back tick.
>> Steve Kinney: I love this extension, it is my favorite extension. It is the one extension that I cannot live without, I know, that seems dumb, and I love it, [LAUGH] right and it makes me happy.

[00:03:29]
And whatever, like that way if all of a sudden need to be, especially for a much bigger string. Or all of a sudden, I realize there is an apostrophe in there or quotes or I need to do that the template literal thing of like.
>> Steve Kinney: Right if it was this one now, I could switch it and.

[00:03:56]
>> Steve Kinney: And get to the same basic thing it's dumb I love it it's my favorite. All right, so that is one let's see what else we've got in here. That is nice okay, this one also great if you work on multiple projects and you do them all in VS code, there is a chance that you will forget which window you were in.

[00:04:26]
The dumbest version of this, which I'm sure that no one can relate to, but I can relate to myself with this one. Sometimes you are writing code, sometimes you are writing a ton of marked down that happens to have code blocks in it. Sometimes when you are tired, you are editing the code in the markdown code block, hitting save, refreshing your browser and wondering why nothing's changing.

[00:04:55]
What peacock does is it allows you to kind of like define a very subtle color for every window. So, if you're like your back-end code, you might choose to have it like red for ruby, I don't know, and your front-end code might be blue for typescript. So it is very in your face which project you are in, right?

[00:05:20]
The only issue is that when we get into settings in a second, there is user settings, workspace settings, and global settings. This is a workspace setting, and if your team decides they're gonna check those into version control, you gotta at least have a conversation, right? But you will never forget which project you are in if one is bright yellow and the other one is cyan, right?

[00:05:47]
Again, my favorite ones are clearly the silliest, but some of these simple ones are incredibly, incredibly useful. Another one that I really like is indent rainbow, all it does is color codes my indents, there used to be one for making the brackets rainbow too, but that's not built into VS code.

[00:06:17]
So like that was another one that I enjoyed, but I don't need to enjoy it anymore cuz it's built in yeah.
>> Speaker 2: Do you have one, not to jump ahead, but do you have one that does color your brackets so if you're in a nested.
>> Steve Kinney: It's by default these days.

[00:06:30]
>> Speaker 2: Okay.
>> Steve Kinney: Right if we kind of,
>> Speaker 2: Right, prettier or whatever's built in, isn't it?
>> Steve Kinney: There's also prettier extension unclear what's built in at this point,
>> Speaker 2: Okay
>> Steve Kinney: Mostly because sometimes, when you've had it, always you forget, if it's built in but if you look, you can kind of see that the first one is purple, the next one is blue.

[00:06:50]
After that, it's yellow, like that used to be an extension that I used, it was like bracket colorizer
>> Speaker 2: That's it,
>> Steve Kinney: Yeah, and the only reason I don't use it anymore is cuz it's now built in.
>> Speaker 2: Yes.
>> Steve Kinney: I actually only learned that when I uninstalled all the extensions in preparation for this and then didn't have to reinstall it.

[00:07:07]
Cool what else is on the list that I like, and I will talk about some of the other ones that other people like. In a second, EditorConfig is a standard, which is you've probably seen a lot of repos, there's .EditorConfig, which is like this. We use spaces and not tabs, we use two spaces as the indent.

[00:07:27]
If a .EditorConfig is in the repo, VS code will respect those settings that's it. The GitLens one, which I don't normally use, we talked about, has a bunch of features and most importantly IntelliSense.
>> Steve Kinney: This one is pretty cool, this one will actually cuz we all, none of you do this, but we all have a coworker that puts a to-do in the comments.

[00:08:01]
They're never gonna do that to-do right? It's never gonna happen this will at least make it so that it's like a lot easier to find, right? And you can kind of see them in a tree and colorize them, etc. Like again, the ones I use the most are very simple.

[00:08:19]
Other ones that I think are popular, the Tailwind IntelliSense, basically auto completes tailwind classes and also sorts them so that you don't have to fight with people. In the same way prettier, which just formats everything in a way that maybe no one fully loves, but we don't talk about it anymore.

[00:08:37]
Trying to think the other ones, this again, a super simple one, auto rename tag. Should you be in HTML and you change the opening tag, it will change the closing tag yeah.
>> Speaker 3: I don't know if it's auto renamed, I mean, that's one I use, but I run into problems with that sometimes it can help a little too much.

[00:08:57]
>> Steve Kinney: Yeah no sometimes it causes more problems than it's worth. [INAUDIBLE]
>> Steve Kinney: I will be honest this one has probably reason why it has three and a half stars when it works and it does the right thing, it's great. Doesn't always do the right thing, I think this one's currently turned off for me, but it shows back up every once in a while.

[00:09:14]
>> Speaker 3: Yeah, if you turn it off, you'll want it back.
>> Steve Kinney: Yeah and if you turn it on, you'll want it off. Yeah, I think that's fair color info, you hover over it, you see the color info again? Again, my favorite ones we've got some more extreme ones in a second, I'm starting with the subtle ones, I'm sure the ones from the crowdsource ones will be a little bit more compelling.

[00:09:38]
But the ones that I tend to use are the simplest ones, mostly because before there was setting sync, and before there was the ability to save all your settings with JSON. There was a period of time where MacBooks had terrible keyboards, and I ended up with a new computer from it every six months.

[00:09:58]
And my tolerance for a heavily customized setup dropped in ways that I've never fully recovered from.
>> Speaker 4: What's that Gremlins track?
>> Steve Kinney: Okay, Gremlins tracker sounds cooler than it is. There are a lot of Unicode characters that are kind of like not great in HTML or code, like a curly quote versus a straight quote, there used to be an editor called BB Edit.

[00:10:22]
>> Speaker 3: Yeah, I know them.
>> Steve Kinney: It was great, I mean, there still probably is an editor called BB Edit. That was mean like, and it had a function called Zap Gremlins, which would straighten all your weird curly quotes and all that stuff and remove all of those. This one doesn't actually zap them, it just, puts a little, monster dude.

[00:10:40]
But it's also kind of built into Versus code in a much more subtle way but there's no real way to zap them, which is unfortunate.
>> Speaker 4: That usually happens when you, copy paste every stuff, right?
>> Steve Kinney: Yeah, no it's when you got a little copy paste. Copy and pasting word, stuff from the Internet or word, stuff from the Internet where the Blog then took the code straight quotes and now your code doesn't work.

[00:11:01]
That's really, at least now, instead of losing like half an hour tracking that down on why your code doesn't compile. You can at least do a little gremlin and know what the problem is, since there's no way to zap them, though, and I don't know how to make them on purpose so if I copy and paste something, we see it.

[00:11:18]
What I do normally is I grab them you'll see them a little in VS code, they're also in a little Amber rectangle. And then I multi curse of them, and I make them go away, so that'll work, okay? So a few more that I think are super cool or actually we're not gonna do too much with GitHub copilot, because depending on who you are, it may or may not be free.

[00:11:46]
And I'm not gonna make you all subscribe to something the depends on who you are, which is there is some heuristic that if you have enough open-source code, you get it for free. I work at a company that has an open source product also all these repos that I do for Friday and Masters are all open, so it looks I know I get it for free.

[00:12:07]
But many people don't, but there's a bunch of it's just, you've seen a lot of that kind of auto complete or in a new file. I can ask you to do stuff, but there's a bunch of other really interesting ones to take a look at. One of which is, there is a chatgpt extension that all that it does is, if you have the Mac app, right, you can go here.

[00:12:38]
I know it's still in an update while I'm like live coding, I'm not a rookie. You can hook it up to VS Code and then it has access to whatever the files that are open in VS Code are. And then can either use this context or edit the files for you with an ability to look at it first because the stuff is not to be trusted all the time.

[00:13:02]
So, like for instance, if I took a real file here and I go back, you can see that it has access to math.js, which is the active editor tab that I had opened in that window. It will only do the ones that are like, if you have two splits so it's actually these I got a bunch of weird files here.

[00:13:22]
You'll see that, all I see is math here, but if I do a split with index being the other active, editor tab in another editor group, you'll see both of them, right? And now if I ask you questions, I'm how do I refactor this? It knows what this is, right?

[00:13:41]
It has access into Versus code. It can apply those changes and that's cool and useful sometimes. There's a few other integrations in there as well as you can see. Notes, notion, you might see different things depending on what apps you have installed. But if you do wanna, hook it into Versus Code or you found yourself, copy and pasting stuff and then copy and pasting it back.

[00:14:01]
This is arguably a better workflow.