Community Recommended Extensions

[00:00:00]
>> Steve Kinney: Anyone in this room have favorite extensions they want to talk about?
>> Justin: It's one by John Papa Earth. I think it's called Angular files.
>> Steve Kinney: What does Angular files do?
>> Justin: Okay, so it allows me to right click and create component real easy and not have to type in GC component or whatever.

[00:00:19]
Yeah, it saves me a ton of time. That's the guy in some Eastern Block. Kind of neat.
>> Steve Kinney: Cool, any other favorites?
>> Speaker 3: I'm looking at my list, and they are it's obvious that I came across a file type of something I wasn't familiar with. And then I downloaded an extension for it, yet syntax highlighting or something in it.

[00:00:44]
And there's half of them are that an obscure
>> Steve Kinney: Yeah.
>> Speaker 3: Anytime you come across something and it's download the download the syntax highlighting for it,
>> Steve Kinney: Yep, that's how you end up with a lot of these. Remove someone up with a zig plug in at some point/.

[00:01:01]
And the other thing you can do as well is if you have, a .versus code folder, you can put in, extensions.json.extension. And, put in a list of, recommended or unwanted Extension so that if somebody opened this project, they're, no, I don't want the C++ tools. For instance, if it was a svelte project, I might just put the identifier.

[00:01:32]
And you can get the identifier for any of these by going in and just grabbing copy extension ID and you pop it in here. And now if somebody opens this project, they're, would you to install the svelte extension? So you can actually add that. So for your team, if there are known extent maybe you want the prettier extension or maybe there is internal stuff that you're using.

[00:01:57]
You could directly have somebody who opens it, get it that recommended. Yeah,
>> Justin: another one I is material icon theme just because it makes the icons look really nice.
>> Steve Kinney: This is a super popular 28 million, a very super popular one. Let's install it real fast and so everyone can see and so on top of themes now I have a different set of icons here as well.

[00:02:25]
And with that, themes are also extensions. So I use Night Owl, which was made by Sarah Dresner, who does a bunch of front end message courses as well. And so you can install additional themes, trying to think, yeah, there's stuff for again, language before we talked about earlier, which is this just adds on top of CSS, all the post CSS kind of syntax as well.

[00:02:49]
Yeah.
>> Justin: Is that going back to the extensions, .JSON earlier? Is that specific to a project?
>> Steve Kinney: This one is in a project. Yeah.
>> Justin: Okay, it sounds good, yeah.
>> Steve Kinney: And so you would check this into version control and somebody also opened this project in VS Code.

[00:03:05]
It'd be here are the extensions that we use
>> Justin: one extension I really is path intellisence. So if you're importing something into a file, you can start typing and it will walk through your file system as you're trying to find where that file is really nice. I think I use that all the time.

[00:03:26]
>> Steve Kinney: Yeah, and some of that is built in, but this is a lot better, right?
>> Justin: Is it, okay.
>> Steve Kinney: Yeah, if you're just doing JavaScript or TypeScript files, but if you wanted to also, cuz a lot of times Vite and Webpack and Bun. Will let you install an HTML file and the normal, it's not called path whatever the intellisense that does pass NVS code is.

[00:03:48]
Can't handle the idea that you would ever fathom importing HTML file into a Javascript file. Which is a totally legit thing to do in bun and vit and maybe webpack, which I haven't used in forever, right? And so this one is a little bit better where it will also all files are fair game, right?

[00:04:06]
You just need to turn off the settings for the built in one as well.
>> Speaker 3: Not really an extension suggestion. But do we need to worry about extension bloating and slowing down the VS code, if you download all these,
>> Steve Kinney: Yes
>> Speaker 3: I had a code, a spell checker installed on my machine, and it would, it was on a code base that was so large that the code spell checker was always running and if I left the IDE open overnight and I.

[00:04:40]
I turned my computer on the next morning, it would that instance of Chrome would have crashed, and because it was just so big and so, I had to turn it off. It was too it was not no good. Smaller projects is fine, but not really.
>> Steve Kinney: Yeah, a bad extent if you really went over the top with extensions you probably made, because everyone has a cost, right?

[00:05:01]
It's got to run some amount of JavaScript, right, and load some amount of stuff and then one bad extension can also take you down. Because, yeah, if it's running in an infinite loop, and lighting your battery on fire, that's not great either, right? And there are ways to audit, but barring yeah, one pathological case.

[00:05:22]
I've never gotten to the point I also there's, I guess I'm running in 34 now, some of them I just installed while we were playing around. But generally speaking, have never felt the pain on my very expensive MacBook. So whatever. So to say there is no pain to be felt but I have not personally felt that pain, or I feel it all the time, and I'm just dead inside.

[00:05:51]
One of the two is true, another one speaking of costs and being dead inside I don't know, don't care that much about this one, but. This one is for every file that you import will show you the kilobytes you're adding to the bundle, right? It's the only tricky part is, it's also doing that for me a node and a bunch of other stuff.

[00:06:16]
And I'm I don't need it right now, I don't know. I will, I think that obviously something quite. Incredibly important, but while I'm importing, I think it's not the time I care about it. So yeah, any other ones from the chat, Dustin? What have we got?
>> Justin: Yeah, we've got a few pretty typed script errors.

[00:06:33]
>> Steve Kinney: Yeah, I got that one in here somewhere.
>> Justin: There's Python folks, the autodocstring.
>> Steve Kinney: Yeah.
>> Justin: A recommended extension.
>> Steve Kinney: Yeah.
>> Justin: Git graph is great if you're looking for a more visual representation of git branches.
>> Justin: There is a recommended quokka.
>> Steve Kinney: Yeah.
>> Justin: It's a kind of a JavaScript productivity extension, I believe.

[00:07:06]
>> Steve Kinney: I have installed that one and then I don't use it, but it seems great. So this one will kinda, let you see, the return values of various functions, in line, as comments. And so yeah obviously throws an error. But, as you can see it'll show you, you can put a comment in there and it'll show you that line what it would evaluate to.

[00:07:33]
So basically, where you would otherwise put console logs all over the place, we'll look at debugging. But let's be clear, I know what you all do. You can theoretically just see the values in here as well. This is by a company called Wallaby.js, which has a very similar thing for tests.

[00:07:58]
So you can see it looks very similar in this case, but you can get visual feedback on your tests in the editor. If I am not mistaken, this is not necessarily a free service, but it's pretty good. Also, there is some amount of testing infrastructure built into VS Code.

[00:08:17]
There is a Jest plugin that will show you check marks or failing tests. It's not always running them recursively. It's when you run it, it will parse the output. And then if your test fails and it says this test in this file, line 10, column whatever, VS Code can figure out where to put an unhappy mark in there.

[00:08:40]
We'll actually see how that works in a little bit. We won't do too much with it, but we'll at least acknowledge where that happens. So again, if you use jest, then obviously the jest plugin is great. If you use V test, then obviously that one is great.So on and so forth, right?

[00:08:58]
Any other ones in the chat, Justin
>> Justin: ( A live server?
>> Steve Kinney: A live serve, you love that server.
>> Justin: There's a recommendation about you're trying to avoid kind of the extension bloat. You install an extension, you disable it, and then only enable it in your workspace to make it not in every project that you open.

[00:09:22]
>> Steve Kinney: That's a great segue. So we'll talk about that,
>> Justin: And then the one other maybe we'll conclude with VS code pets.
>> Steve Kinney: Excuse me, [LAUGH]
>> Justin: Yes VS code pets.
>> Steve Kinney: This is why I show
>> Justin: Multiple recommendations for VS code pets.
>> Steve Kinney: This is why I.

[00:09:41]
My God, this was worth getting on a plane.
>> [LAUGH]
>> Justin: My God, I want it.
>> [LAUGH]
>> Steve Kinney: Yeah, this is-
>> Speaker 3: This we trust,
>> Steve Kinney: I trust whoever made this, 100%.
>> Speaker 3: What does it mean?
>> Justin: 1.6 million installs, so.
>> Steve Kinney: And worth it.
>> Speaker 3: That's too good.

[00:10:02]
>> Speaker 4: Look, it's this. It's still cute.
>> Steve Kinney: That was my pet, but how do I make it snow? We're gonna cancel the rest of the workshop. I'm gonna be very busy now. This is more impressive than what I have going on.
>> Speaker 3: The tagline says that this brings your productivity.

[00:10:19]
>> Steve Kinney: Yeah. I can put a frog in there?
>> [LAUGH]
>> Speaker 4: Look at the cat.
>> Steve Kinney: A red frog?
>> Speaker 4: On the bottom of the screen.
>> Steve Kinney: Kermit, now there's a red frog in there. They like each other. Okay, I'm cancel my plans.
>> [LAUGH]
>> Steve Kinney: Well, that was worth it.

[00:10:38]
On the installed ones, you will see right? That you can disable it without uninstalling it. You can also either a disable it normally and then enable it for a workspace, right? Or to say if it's such override it in one way or the other, right? So if we hit disable for the workspace.

[00:11:01]
It will for this one be disabled and then I could choose to enable it. We'll also look at something called profiles in a little bit, right? So for instance, I do a lot of Raspberry Pi-ish stuff when there's micropython and cereal. Port and, I don't know these things running most of the time, right?

[00:11:24]
So you can have different profiles where you adopt different versions of yourself and personas. We'll take a look at that in a second when we get to settings, and you can turn them on and off for a given workspace. You can have sets maybeif you live in the consulting world, you can Have different environments for the different things that you do.

[00:11:44]
And then there are also ways to do this with containers. We'll get into all of that in a hot minute. But yeah, and then some of these kind of come for free and are built in. And we said before, some of these should you open a TAML file, which is just YAML or JSON, but different.

[00:12:00]
A lot of times it will recommend whatever the default plugin for that might be, right? Particularly if it's made by Microsoft, and you open up a python file, it'll be like, would you the one that we didn't include by default? Absolutely, yeah. There are lots of extent. Extensions again, there are recommended ones.I am guilty a lot of times though, of installing them and not remembering what they do, and then they just sit there.

[00:12:34]
So your mileage may vary. Toggle quotes for the win.