Pro VSCode Setups

Yeah.

in particular now granted I'm zoomed in here, so it it doesn't typically look this large if you're wondering that, you know, do I have eyesight problems? I'm typically at about like this as far as zoom level goes. But

And you'll even notice that mine

So you can see mine is pretty bare bones. I do show breadcrumbs because I like that path.

in general, I hide most things, and then I go a step further using an extension we'll talk about later to hide even more

the shortcuts for the ones that you use most often. Like Totally. Command ESLint x is for the extensions.

your Git.

March release, by the time you're listening, this will be out. They're gonna let you put it at the bottom of the sidebar as Wes. So Wes, how's it going, dude? Good. Good. I'm excited to do this episode. It's kind of fun that we get to to show everybody

is I don't even know what the the file finder is. I just use dictionary classes on it. Mhmm. And I could see those as I was editing something a lot lower in the thing, and I was like, this is really nice. And if if you're looking at my screen right now, you probably say that's way too big. I have this I have this way bigger just for recording sake. I don't find it takes up too much space, and I've been really happy with it.

G is for Yeah. I I use cobalt too. This is a theme I made, commenting a comment of something let me open up, like, a function here. Yeah. So I got this transcript chron handler. As soon as I'm inside of that, it will lock it to the top. And then as like, I'm inside of another scope here if not allowed. Right? It'll lock those to the top and and go, and I've been finding that halogen. What is it called? A g u ten socket you should try to memorize You could just click through to the actual definition

and I immediately hid that. I was like, that's that's too big. You know? And I'm not giving up that much space for a bunch of buttons, and to where like, let's say you use a function in a specific spot.

The sidebar file by file

to do something else. Yeah. Let us know what you you settle on.

maybe that'd be fun to do a little gesture on there from one of my techs. F keys on on your keyboard? No. No. I'm saying to to remap them to a mouse clicker is what I'm saying. Oh, I see. I see. Yeah. Like, what what mouse are you using? Oh, you don't use a mouse? I use the trackpad. Yeah. I love the trackpad. Big trackpad fan.

or doing the whole, like, click through

like, cursor component. I'm sure there is with the keyboard. What is what is command click? one that I call syntax cyber that I never finished. But, yeah, I am maybe new. I should just use this one. It's a gorgeous theme. Yeah. I am working on, like I said, the Sanity one, which is gonna be a little bit, like, more yellows, a little bit more, I don't know, less reds and stuff that the syntax one currently is. Font, I'm using MDIO, I have a line that I need to now duplicate.

forward and back. Oh, that's good. Bound those to the spot. So I'm gonna try that as well. But, yeah, f 12 will will bring you to where the actual definition is, and then you can jump back with the command minus to where you last were. Yeah. That's that's actually fantastic because

I have some different keyboard shortcuts, though, and then that will just click through and open up the actual file

that's not this is not a good example. Here we go. This is a function right here, generate AI show notes. Right? If I want to know where that is, you either open your command palette and type pound generate AI show notes, and that's going to jump you to the file where that was where that JS, or you just command click it or no. In my case, it's option click.

variable

Go to definition is f Wes. So, yeah, you just hit f 12. Okay. I'm gonna change that. F Wes is kinda weird, but I'll I'll change it. I Yeah. I hated the f's for the longest time

of And when you say click through, what are you doing to do that? Just for the hold down command.

CSS selector,

for working contextually, right, especially in component based flow. Right? We see on my screen, there's a meta tag. I command click onto the meta tag. It takes me right to that component.

function,

I don't know why this is showing me my node modules in here. That's never the case, but you will be able to like. Here we go. Transcript IDs, transcript utterance IDs. I'm able to just jump

because it was the MAC if you want to reverse a whole bunch of lines, you can. Obviously, that's not the all that good for HTML, but I do find myself, but, also, it can be those those extensions that just gobble up all your resources.

And then from there, like you said, you could do control ESLint minus or just control minus to go back, and that control minus takes me right back to where I was. So Yeah. You can command click, control minus. I wonder if there's a shortcut for

buttons. Right? And then, yeah, I was like, you know what? These buttons are worth more to me than being able to turn the volume up and down, which I don't do all that often because I I actually have it right on my mouse to do that type of thing. Oh, that's the other tick thing. That command minus and forwards, so many people said they did the the buttons on their MX Master slim.

instead of thinking, what file is that in, think to yourself,

what is that symbol? Right? So, like, if I'm going to look for,

Yeah. Like, 3 swipes. You could use better touch tool. When you are in Versus Node, you could do 3 swipes,

Yeah. You don't even notice it. You know? And and just to even show how you might use some of these tips together, because I think these are some major tips

I'm editing it. And I say everywhere I want a cursor, I wanna insert a a number.

of anything.

I have extended better comments to add my own, Yeah.

I I like comments. I like my visual

But even, like, I I do use to dos. I know some people think to dos are not great. But I use to do. And this thing recognizes when you write to do colon in all caps that it turns it a different color. Or if you have an exclamation point, it turns it red.

Insider's version as well, but it's not my day to day coding is is just nice and stable on the regular version. What about you?

Yeah. You know, I was running regular for a while, and there was something that you had posted very recently about

alone made me reinstall you'll want to check out Sentry at century.ioforward/syntax.

Svelte pages could be you can change the label format

Yeah. I I just I

what shows up in the tab, and it's gonna be a a game changer for anyone working on maybe even if you have an array of items and you wanna switch it because you don't wanna for cell JSON, you know, you just click on it and it will peek, went down that route as well when we bought our house. I was looking for a bulb that was both bright and warm Mhmm. And Welcome to Syntax. Today, we got a show for you on Vercel Node. Scott and I are gonna detail, Like, that's the other thing. There's there's coding, and then there's doing tutorials where you need to provide context for which file you're in and and where you are in inside of that file.

or Mhmm. In Svelte, it's layout Scott Svelte or page dot Svelte. And your tabs, they will put the folder in the name, but you end up getting really loopy really quickly when everything is named exactly the same. Or if you have a bunch of index files in a Node JS project,

in insiders. API. Yeah. In the moment you posted that, I was like,

alright.

application to the specific

it's it's no problem to sync those between the 2 versions and to a a whole bunch of other computers. So maybe I should try it because and let let's explain what that feature was JS if you have

I'm going back to insiders. I I was I was really annoyed with it just updating all the time. You Node, I like my updates, but it was updating so frequently. I was like, I can't keep up with this. Yeah. You know what? That that post

I wanna know. What do you use? Insiders or regular? Let's talk about some extensions that we like and use.

a route based

Insiders and run it full time. So I'm currently running Insiders full time, but you never know. I I can change back and forth. And in fact, now that we have, like, syncing about tabs. I've always been someone that had my tabs visible in Versus Node all the time. Never even considered not having tabs visible.

Nuxt, any of these things, you often find yourself with a whole bunch of

how

I like that. Yeah. That's something I I use somewhat frequently. Another one I use quite a bit is

Yeah. And it helps because after you duplicate it, you can release the shift key and keep the option key held down and then move the one you just created.

Yeah. Oh, I always would just hit command shift d to duplicate the pnpm, but I like I like yours of being able to hit the arrow of which direction you want it to go.

Who knows if you actually can remove it? Yeah. You know? That's one one of those things that doesn't actually work the way you want it to ever. Yeah. It's too frustrating.

Oh, yeah. Isn't that like that's like you're holding your key down. You have to click exactly where you want the cursor, and then you click it in the wrong spot. Like Yeah. Oh, you're you're you're toast. You gotta start again. I think you could remove it.

You shift option up or down, and now you just duplicate that. And you can create several of those. So, like, those kind of shortcuts for me are things That's a nice one. Yeah. I use those all the time, and there's so many little things like that that you really only I don't really need tabs open. And usually, when I'm hunting for files, I'm always doing command p anyways to open up a file. And and that's almost even if I have the tab already open, I'm almost always doing that anyway. So I just turned off tabs

Oh, That's amazing.

You know,

you can hold the option key to move a line up or down. Right? I do that all the time. Maybe I Me too. Maybe I misplay something, or maybe I'm just moving components around. I'm holding the option. I'm hitting the up and down key. Or maybe to commit something and have it push up to whatever branch I'm working on JS I just type the name of the commit message, then I do command enter, I I find it to be really handy for nested CSS as well. It works there too. Anything that you might lose contact context with because you're several indentation layers deep, Really just a a nice and easy setting.

like, once you get them in your muscle memory,

Yeah. Just getting it the general keyboard familiarity with your editor cannot be understated as a hack here. And I know that's definitely, like, a thing where if you're used to using your mouse, it feels like it's a little tedious to get used to. But there's almost kind there's so many, like, little keyboard things I use every day. Like,

to each of those that says show the

and then I'll put it there. And then maybe I want it to be, like, lowercase.

you can manipulate the text to your fullest extent without having to copy and paste all the time.

I have a hole. I'm not sure if you can see it or not. To be clear, they're not act they're not they're not shoe Bos. Like, you buy your shoes in a cardboard Bos, they are plastic Yes. Boxes. Yeah. Plastic

it's just pain in the butt. So I we had to replace a bunch of these, like, halogen ones with LEDs, but they're still the old

Sign up for the newsletter.

These are the only bulbs I'm buying. I have a lot of LED dimmers in my house and stuff, and, you know, they they can get a little obnoxious and there there's no and there's no flicker. They work really well. So these are the only bulbs I'm buying from now on. So the Ultra Definition

dimming flicker rates or refresh rates or anything like that. I watched a bunch of light bulb YouTube and found the Philips Ultra Definition Yeah. I'd be interested.

I just go to And Oh, delete all left, delete all right. That one's new.

Yeah. Yeah. It's it's nice. It's pretty. Works well.

I don't know how you walk around in the dark like this. The sunshine.

easy easy to get at. Nice. Cool. Well, shameless plugs. Head on over to syntax.fm.

Phillips bulbs.

the type that will always do it, and the other 2 are are probably

Let's get into sick pics and shameless plugs here. I think that's enough for Versus Node stuff for today.

about 2 years ago, and I'm so happy with it. And then I did our whole medicine cabinet because, like, Node of the kids is sick. You're looking for Advil, and you're like, damn it. Where is it? And where's the puffer? You know? So now we have them all nice and categorized. And then I also did all the kids' Lego

sick pick is gonna be Yeah. That's interesting. Click it, and it'll go up. But I don't wanna do that.

boxes the size of a shoe. They're called you can get them at Home Depot for, like they're often on sale for, like, a dollar. Super cheap. And I put every single the profile. So I have a Scott Tips profile that has a different, What else? Oh, rename, Versus Node injector because, like, I wanted this as well. I want a custom control over the tabs.

type of cord in its own box, and I have, I don't know, probably 20 of them. Mhmm. And when I need a cord, that you've you've done that twice, and it's very clear to me that, okay, This is a comment that I have commented out. So if you have a whole bunch of code, you're commenting out entire function,

Wes splitters or led lights and, like, extremely

And then you need, like, a shovel to clean it up. And, like, we were like, put it on a blanket, and then we can at least do it. So now we sorted it into just colors,

Sign up to our YouTube channel. We are

and the kids just open 7 or 8 of these little boxes. Oh, man. And then they they you can see everything because it's clear, and then they just pick out the stuff they want. And it's not, like, a huge mess to clean up after every time they use it. I have a question for you.

Oh, yeah. I this is something that I sick picked a while ago, but a lot of people seem to be picking it up again on Twitter. I'm really excited about it, and it's just shoe boxes Yeah. For cords.

if if if, like, every 6 months or so, you gotta gotta redo it, it's fine as long as it's a little like, the whole house turns out. I'm like, let let me see.

as people switch to Biome,

how likely is it that they actually put them in the the right color container when they're Deno, and how good are they at doing that? Because my son getting him to pick it, you would say, alright. Now it's time to pick up your Legos. He goes,

And the options there are very, very

occasionally have weird issues with

that you really like that maybe we missed that we haven't thought of, let us know what you're using. We wanna hear about it. So sick picks. I'm gonna sick pick a light bulb, which,

I I can I can see this getting Yeah. I I kept the everything else that for you, and it can be really handy to just select them all and then hit, here, but I do realize that the gutter is necessary

So so far, it's going good. Node of my kids is

color temperature of of bulbs.

yeah, it's built in Rust. I foresee this zed becoming popular putting cursors on every single line. So say, for example, I have all of these components right here and I want to add a prop to every single one of them. What I'll often do is I'll just select sometimes the search, although I've got a tip on the search coming up or the debug. I kinda like that. Or the the timeline is is really handy. If you if you don't know this, this is a hot tip on itself.

because we have tons of Lego, and the kid would just dump it on the ground.

Let us know. Leave a comment if you're on YouTube. We love comments on the YouTube channel. It's the best way to get a hold of us or to to share with us. If there's extensions that you're using,

if you if you've been in the light bulb game at all, you'll know that, you know, LED bulbs

dimmable.

How Better comments is something that, you know, I I just

a little bit more popular?

everywhere. So, that's all I got. Alright. Thanks, Eric, for tuning in. Catch you later.

they categorized them.

Like Yarn of the reason why a lot of people love this code is that it's integrated with all their tooling.

Who cares? It's supposed to be a collaborative But people often wonder why you use that. It's like a very collaborative editor. They have, like, multiplayer baked in, and it's supposed to be fast. I mean, those are the the 2 big things. And,

Yeah. They're still working on Emmet support, which is coming. So those are, like, the big things for me. And you know what I gotta say? It it it's good. You know? There there's some things that I I miss from my Versus Node setup, and I'll continue to use both of them. I'm much faster and better with Versus Code. But, you know, there's a lot of nice things about Zed too, and maybe we can do an episode in the future diving into Zed setups once we have a little bit more further along. You know, it is Mac only right now. And I Everything good is.

I like my dimming things. My house to look like a cave at 7 and 8 PM, and, my wife hates that. She she'll well, she'll come in and turn the lights on full blast. I'll be like, you know what? I'm I'm trying to turn my my internal levels down here. I'm trying to, like, really wind down. Let's just, like, make it look like a a dark cave. Oh, we have that in the morning. I my wife, like, sits in the dark with, like, 1 lamp on, and then I just come in. I'm just like, going into the currently, That's a thing. If you do command shift p, these are commands for the editor itself or functionality within the editor. I'll even do Git commands in here. I'll delete a file I'm working on. Let's say I started working on a file and I'm abandoning it. You can just delete it straight from here.

flicker free bulbs to be the best. And let me tell you, they're not, like, crazy expensive or anything. They're just they're not smart bulbs. They're just LED bulbs.

are gonna wane on it. But where that function is defined.

oh, but it's so much. And you're like, yeah. I know. But we got them out. You know? Yeah. We're we're only about 2 weeks in, and so Yarn, it's going good. I gave them all $3

many, many years. I just finished up my my latest course, so I'm gonna switch it now, I think, because

the

tricks here.

like the arrow. It looks like you actually put an arrow in your Node, and, like, I I kinda get that. And I I have a bit of a unique use case, I guess, when I'm showing

the ligatures being added to it because it looks like

I have some last minute

These are these are things that one of them is definitely a Chrome extension, but it's it's called

from a normal arrow.

necessarily

really think I I miss it. I don't think I miss it. I I have breadcrumbs up top here that show me what file is open. Yeah. That shows me the full path of the file.

I still do split screen.

once that discussion happened,

and start thinking about jumping through your application of,

a, where your edits are. So, like, if I'm right here, you can hit control

and I've left it off. I haven't I haven't really wanted it back on. Man, I it it really made me second guess myself because I was like, I need tabs. Like, I need if I'm working on, like like, for example, some sort of processing or whatever. Luckily, we both have good fat pipes of Internet, so it's probably fine.

And now UI plus plus.

at once, and you say, alright. Like, that's my context for Scott of what I'm working in here. And I thought I need them open for that, but a lot of people are like, no. No tabs. I ditched them. So I'm gonna try it as well. I think the the most important thing here is that massive

stop thinking about

Tabs is in Scott tabs or spaces, but tabs is in the little top tab at the top to see your open file. And you know what I gotta say? After turning tabs off, I don't

jumping through your application so much better. These things I I did all of my cords search tools here.

minus,

the f. And then I'm sure me hovering over top of them Oh, sure. Yeah. Didn't help as well. So what is needed and then go ahead and apply those changes. So that's been huge for me you can pop back and forth, and it it's super easy compared to what they That's interesting. I never thought about that because I the reason I never was on Insiders is because it's like, oh, I don't wanna set this all up again. But now that I have syncing, and you get all your your regular

those things are super key.

so they're just, like, really shaky will now show you I'm gonna put you on to Node something I just realized, and that is the search editor. So if you're searching for things in your project,

you can find out what the keyboard shortcut for expand selection, or you can just open up your command palette and do the expand export, whatever it is. Those are called symbols an API folder. I might have a route handler open. I might have a the tabs that are open. Well, if you don't have tabs or or if they're at least hidden, maybe it doesn't matter.

by a lot of programs when I watch them, especially new programmers, and that is being able

selection and see what the all of the expands are. So expand line, expand selection, or expand selection to scope. All 3 of those are really handy for being able to

select, Versus Node has your back. So if you accidentally save over something, close the tab, CSS files that I there's, like, another custom CSS extension I tried, and it controls all these warnings. You don't?

Jump to beginning of line and end of line JS command arrows.

I find that really nice.

at it, and then they would not select and I find that to be really handy rather than just taking your mouse and dragging it up to where you want it to go. Especially, like, when I taught in boot camp, we would have people that were not comfortable on their, like, trackpad, Now I'm goofing them up. Whenever I try to do them in front of people, I'm like, what is the extension? It's just part of my hands. There we go. Yeah. Command option b opens and closes that. But they recently allowed you to put the activity bar up top,

just, like, move their cursors around until they explicitly have what they want. But often, you'll find yourself have, like, a comment or, like, another variable, like, const newbies how to Node, and they need to know that. But I've never been a fan of the ligatures. So I've been on operator mono for but feels good. There's my my wife is huge on

you hit your command shift arrow, and that will select everything there. You can select by scope, which is if you go into the selection here, Yeah. To there we go. View. Oh, maybe I should say view.

to move,

So I often find myself doing that. Like, let's say I have this this right here, and I wanna select all 3 of these lines right here.

and expand your your cursor. So let's say we're in this code right here and you wanna select, this part of Svelte where I have the transcripts. Right? Like, I might have rename

further scopes. So whether it's your function with curly brackets or whether it's some HTML with with angle brackets, it will just kind of keep on growing,

You just gotta type view and then type the the thing you want, and the fuzzy factual fuzzy fat fuzzy finder will find it for you.

is like, there's buttons that you can click if it's something that you you don't use all that often. You can hover over top of it and figure out

either you're not optimized with your text editor in certain ways or, like, it's so funny. CJ CJ did some videos and, like, the comments on it are really funny sometimes. Like, people will say, he used Node. Opinion disregarded.

But I I I guess you're right. You I mean, you could also just memorize that extension or set it to something that you could memorize.

the kind of language that people use when type when it comes to hiding things in here despite the fact that there's, like, a 1,000,000,000 things in this bottom bar below.

There's a bazillion maybe even C Pnpm already does this, has dictionaries of, like, common

Yeah. I think the thing is here is that we all probably have, like, weird

very, very fast to do that for me. I I don't have to run multiple commands to get something to go into the origin where I I just need it to go. I'm always I you know, git push origin main or git push origin branch name or just git push origin whatever, like, just gets old every time. So Totally. Being able to commit and sync is is really good. Commit and sync is good too because it will pull down changes that you've done if we're working in the same branch, not just Yeah.

You can customize that to be commit and push as well if you just want commit and push.

the command line for me.

and that commits it and then pushes it up automatically. So it's, like,

now more than I do

I use it almost a 100% of the time

you know, I all I have to do

It's because I I want a little bit of a gooey. You know? Yeah. I I'm like a I like the terminal. I love flying around in there. But let's say I have a comment that says Let's talk about something that I feel is underutilized

opinionated about either of them, but it's kinda nice. It just ends up being the way that you end up working. Right? Is the way that you get used to it. I do use the the version control panel

something like a a Neovim.

and jump to words or jump to lines or duplicate or those types of things that are just effortless.

There's even event mode in in Versus Node. So I don't know. Neovim people come at me if I'm saying something stupid, but, you know, I I find that you can you can get around files

Yeah. You can do most of the stuff you you need to do this way.

is being able to jump around their editor. And that's one of the reasons why I think people really like things like Neovim or or some of these other ones. They they just get, like, the keyboard finger control to be able to go through their application

new developers from, like, really experienced developers Oh, yeah. So or line breaks and things like that. Yeah. I wouldn't mind making it smaller. I think you can do that with Yeah. Some extensions.

And and that's actually one of the things that I find a little bit annoying around the conversation about, you know, Neovim or Versus Code. It's like, man, you can do a lot of the stuff in in Versus Code without without sweat. You know? It's not like, Neovim is the only platform that can do many of the things it does.

just as fast.

Cool. That those are some really key tips. I I think those are some really pro tips because the one thing that I think that separates Anytime I'm logging anything out, just whatever my cursor's on command pnpm. And and my muscle memory is so baked in to do that. It it really super good. Another Node is split and move is a keyboard shortcut I have set up. Typically, when you split a window, what it does is it duplicates that window and has it open then twice. So let's say in a typical way that I might split, let's say, this file.

Let's say I took a dump of stable. So I will I also run like, the f two to rename something,

a bunch of data that I'm working with all of the lines that I want, and then I'll hit command ESLint l, and that puts a cursor on every single line. And then I don't know if we need to be talking about multiple cursors here in in this thing, but then you can go ahead and actually type your prop value that you want. And often, I'll find myself, like, using multiple copy paste as well for that. So, like like, for example, these theme maker player toaster loading hockey's, maybe I wanted to add, like, a label or sorry, folder based routing application, so Next. Js,

because my cursor was on the wrong line.

and boom.

and it's like medium, medium, medium, large, large, medium, medium, medium. I'll often just wanna say, like, okay. Let's just see the unique versions of of each of those. So if there's a bunch of those, I'll just select it all, and I'll type unique Is it command? It's so funny that you command. Yeah. I don't even know what they are, but,

reverse and boop. It'll reverse them for you. That didn't work

reverse it in JavaScript, the command palette.

I also use the the sticky here, the sticky headers. And like you said, it's really handy for HTML.

Just, you know, one click to turn that on. I do wish that you could hover over top of o x c.

the things and get the types. Like, right here, if I hover over top of my request,

the version control, of it, and you can just go ahead and type the files. And if you type a folder that does not exist, it will make that it's slow. Obviously, having a fast computer helps, it will show you a preview, and you can check and uncheck

Yeah. Command shift g. I don't know. I do command shift e for my files. I do keep my files on the left here. I do frequently hide it. Command b hides that. I keep my searching on the right. So searching on the right, files on the the left,

You can change these things, by the way. That's a that's a whole thing. You can change the extensions to to make more sense. I forget what the version control Node actually was because it didn't make sense to me. But command Command e Command shift g.

but you didn't get committed and you could give it also give it a class of item dollar sign, and then you can give yourself 10 of those. That will also do the same thing. Right? So that is

If you goof something up in between Git commits, another theme,

and I'm almost always turning those off and on for me and keeping it just as the text file whenever I'm working.

because, a, you maybe don't have a a repo or or you're just in between git add, git commit, the timeline will save your button. You'll be able to roll it back, They weren't cheap. I think we spent $100 replacing bulbs in 1 room. Jeez. And I was like, brutal,

on the on the left so far, partially because sometimes I do want to have

being able to, like, big fan of that. I I just don't yeah. I think the thing is is just the starting and ending tag, which is something that we're working in HTML.

be able to control your sidebars and know what's open, when, or, like, how to open, let's say, version control, command shift x, or command shift Wes x's extensions. I'm sorry. Not version control. For me, I changed my version control to hyper g for git. You know? That's my mnemonic.

I'll give myself my multiple cursors. I'll go in there. I'll type item, and then I'll open up my text pastry, and, like, I don't know which one. I'm not going to read through all of those.

and jump a 100 each time. But I'll often just use this 1, 1 to x, and hit enter, and it will insert 1, 2, all the way up to 10. And I find that to be super handy. I use that all the time, especially, like, Selecting by line, I often will do is is command l.

and that will give you, your cursor be able to jump around

item dollar will be replaced. You can also do dollar dollar dollar, And I know Scott did it, and everything inside of it. I often see people just, like, hold down shift and then but I just prefer to just type it like I I normally would. So Yeah. That's the the key there.

working with, like, content in, like, markdown, SvelteKit, and, Phillips.

Wes, you have text pastry here? I've never heard of that one. Man, this one's the best. So let's say you have some HTML,

1, 2, 3, 4, 5, 6 to all of them. Right? But I didn't it is APC, does it do like, do you have to restart every single time you make a change, or does it do it live? Oh, that's a great question. I don't know. I set mine up a while ago. My biggest qualm with my thing is that I have to run this. Every time Versus Node updates, I have to run this process, and it injects it which is really nice. That's what these little icons are. There's a little setting. And in the next version of Versus Node, which is gonna be the I don't hide the this, like, top bar right here, which I'm just looking at it being like, do I use that? I don't think I use this for anything. But every now and then, I do use the

So what I'll do is I'll select them all.

when I am There we go. Or change all occurrences. That will do it across all the files, and this will just rename it in your specific scope.

often what I'll find myself needing is I need to add a If I hover over it here, I don't get that. So I would like that because that's that's a common use case. I wanna know what's the type of my arguments.

or start at a1000 that, and then I select all of this and comment it Scott, the display or audio or, rename variable. So often if you like let's say I have this allowed variable here. Often, what I'll see people do is they'll just which is is really nice. So I've been keeping that on the left and then my sidebar on the right. Not not super the CSS variable is mint

and it will just Scott increment itself. So text patiary, it was it was a Sublime Text plug in for a long time, and somebody remade it. And I I probably use it once or twice a day.

We're gonna go through just Node all of them because, you know, there's a ton of extensions that I use that are probably not that interesting. But,

that will help you through that.

And, also, that's really handy for screenshots if I'm tweeting it. And then I also have this one where it's forward slash forward slash and then a dot. That gives me white text, and I find that to be a little bit more readable cool allowed.

It will give me this dot and then, gives me white comments. So it's so good. And the Node, like, even awesome thing about better comments is if you comment a comment in one of these,

use a store. Right? And it none then it will style it a little bit differently.

when I'm sharing a screenshot with somebody. So I have a little keyboard shortcut where I hit 3 forward slash.

and I want them to be highlighted a little bit differently so it's clear. Or if I have, like, method, yeah, method 1,

What did I add? I added star.

Yeah. That's that's neat. Auto rename tag is Node that we both use.

which is really nice. So I, and that will jump to your last edit ESLint, and control shift minus will jump you back and forth. So instead of thinking, oh, I'll go back to that file, just say, oh, I'll go back to where I was just editing the actual file.

to Versus Node in general. We are sharing our entire screen with you for this one. So this might be one you wanna check out on YouTube GitHub pull request. Oh, yeah. It's an extension called GitHub pull request. And if you like, if you type that in there, like, let me type in pull requests.

or on Spotify so you can actually watch the video as well, do keep track of features that are being added to Versus Code, and I'll often want to do a video on them, or I'll want to try them out before they they make it into

but we'll do our best to describe it as well for anyone listening in just the audio.

all the extensions, all of the keyboard shortcuts, all of the hot tips we have, and

Yeah. Yeah. We'll be talking all about our our just our our setups in general. So nothing, you know, should be excluded by not looking at the video. But if you wanna see what we're talking about, I think it's gonna be a very visual episode in that regard. And if you want to see all of the errors in your application, I use this a 100 times a day if I'm logging anything out.

I don't

know. Yeah. That an OCD type of thing, I guess, I suppose. And and, you know, being able to sort Scott a JSON object can be really nice sometimes.

or things like that. That's something I like to have because it's like, hey. If I if I have, like, let's say, a schema and it is alphabetical

Use this all the time. Another one I use is sort JSON objects, allowing you to sort a JSON object by various ways, like alphabetically

and then I'm then working on it in my my code base, I kinda want that all to be in the same order just JS, like, a,

That's nice. SQLite viewer, If that's in a totally separate file or if it's halfway down the current file, I don't know. As this tooling changes, as it gets easier,

Yeah. Let's talk about some more interface stuff

like like Svelte or Next. Js Wes it's all routes based. I find I still like to see the layout in Versus Code.

beyond you know, obviously, keyboard shortcuts. We could go all day on that, and maybe that's worth an episode of its own. But let's talk about inter inter interface stuff. Sidebars, you can now have multiple sidebars in Versus Code. You can have 1 on the left or the right. What are you doing for your sidebars?

the files

unless it's important to show the user.

So I as quickly as you can is a huge benefit. So being able to jump word by word is holding option and using your arrow keys is is really good. And, of course, you can throw a shift into the mix of any of these and change it from, just a move to a select.

and I moved it to the right sidebar purely because I like the idea that it doesn't shift the code you can you can have a lot of fun with those types of things and multiple cursors without having to click and add them pnpm every single time.

switched simply text find and replace, you're gonna run into issues sooner or later. Yeah. Definitely a and I'll find the one to x. They also have 0 to x, and you could do custom, like, 2468 solution, and you Scott a, like, you got a bunch of items. Right? This is just Emmet. Right there, I just TypeScript item times 10. Right? And I expand it, and I have 10 items. Now enter, Do you have you been using this? So sticky headers is this idea that If it's wrapped, Exactly. And if you just, like, find that, you'll see it'll sometimes catch the wrong thing. So it's important to instead of just selecting them and typing them JS you use f two or right click and it has these settings, these extensions, we hit share screen, and it's like only 1 person can share at a time. So Scott's like, maybe it's a bug where we can both do it at once. So we both we did 3, 2, 1, and we clicked the button at the same time, and boom.

on the right And now I find myself, oh, this is too many things open. Now I gotta manage

Yeah. And I I'm mostly the same way. That's, it changes Or just if you're writing maybe params for JS doc, it includes those as being their own color. So for me, I definitely really like better comments. And this is one that I I've turned on a long time ago. It has 6 and a half 1000000 downloads, and I have not turned it off. I do see one called even better comments, but I don't even know what could even be better here. So

yeah, it's on the right side. I I like it, but it's not been a a game changer for me. I very rarely use the sidebar unless I'm, like, Oh,

So I'll just pop open the sidebar as I need it, HTML

symbol.

One kind of hot tip I've got for you is recording software moments before that has to be That was a little bit. Maybe Randy can even cut in the laugh. So Scott and I are are using Riverside, and we're trying to to both share our screens. We're recording locally for high resolution, but we're also trying to like, I need to see what Scott's seeing and and vice versa. And we tried it, and it it worked with both of our screens. And then we just we just tried to use it, and let's say, something Yeah. That is fascinating. I've never seen that. I I should also say one more thing because everyone's gonna comment. I know in Emmett, you can also do this item,

Or maybe it's being used across multiple files.

JS allowed. Right? And and that's okay, but just rewiring your brain to jumping to those values page dotts I added method. So when I'm doing my my courses, and then I'll go in here and just say chapter 1, chapter 2, chapter 3, this new one will allow you to write a bunch of rules and rewrite them

select both of them, and then the rename

And if you're doing your find and replaces into doing that things, but I've just so many little tweaks I've put in over the years anytime you're doing any debugging

use the

resource intensive.

Do not install this. Uninstall this. This thing besides, you know, the functionality is iffy whether you even need it or Scott, you should probably be able to check to see,

downloads.

So if you don't need it, which I gotta say you probably don't,

It JS, like, you know, on a 1000000000 YouTube videos, they're like, here are all the plug ins you need to install, import cost. It has 6 0.3 or 3,600,000

Oh, yeah. That's that's good because it's. Yeah. Versus Node is pretty fast for me and it's always frustrating to hear really long functions as well as Or unless you like to use 3 swipes to

what the size of the, packages you're installing. It shows you the size of your packages next to the import is what it does. This thing is number 1 culprit for slowing down your Versus Code. I I went into, like, profiling my extensions, and I found this thing is

really get rid of it. I I find it's it sped up my editor and increased my battery life like crazy, which is wild because I'm using in, you know, an M1 MacBook Pro or whatever.

usage.

wildly, Yeah. Last 1 here is APC, which this JS, to me, a really cool extension for those of you who like to tinker. And it's definitely you were talking about GitLens, or you wanna do version control?

seeing what was taking up the most

But, like, there's so many things that are not here that you'd expect to be here. And Yeah. To the point where I I don't even know what the defaults are, I just remember that, like, oh, JS it, like, duplicate wasn't there or something?

and then I'll just copy paste that. Or move is also really nice, and that will give you the entire path Oh, yeah. That's I always hated the over when you need it. It hasn't been like a game changer for me. I wouldn't say I love it, but it's,

So now it just expands the the options that you have with various files. And I don't know if that's what does allows me to delete yeah. It is. So if I look at file utils, delete, I can delete the current file I have open. I use that somewhat frequently. If I'm just hacking on something and maybe perhaps I'm abandoning it, or changing directions, I'll delete it. I use that so much. It's it's wild to me that you can't delete a file without installing this. You have to go into the sidebar and and hunt with it with your mouse. I know you can use your keyboard shortcuts as well, but with built into Versus Code, which is a a great feature you should turn on, the ability to sync to GitHub.

So rename will just let you rename the actual file. I often use that just to quickly copy paste the name of the current file. Like, if I'm in an SVG file and I want to copy paste the name of it, I'll just I'll just hit rename, And the way that it works is that there's an electron HTML file somewhere on your computer, and you can inject CSS and JavaScript into that. So I wrote a WebSocket that would do live reload

update your imports throughout all of Versus Node. Just like if you move a file in Versus Code, it'll say, hey. You imported this in 6 files. Do you want me to update those imports? I in in Versus Node, and it doesn't matter. You're just jumping to wherever it is that you you're editing. Now if you wanna open something new, open it up, and then, like, oh, okay. I like that. I want to open it up. So you hit control and click it. I feel like that's

it will into the the file, and it's just like, that's a better UI

And it will do that for you. Yeah. Super handy.

ability to customize things that you cannot customize

Man, I hunting for something in,

I'm hiding the title label h two. I'm hiding the title actions, the editor actions.

Just all kinds of little things here and there, and I think that's it. Just to just to give it a little bit more. A little tweak. A little tweak. Yeah. Just give it a little bit more mind. Hide things that you can't normally hide and and all that stuff. So APC,

o.

typically.

You can you can tweak endless amounts of things. APC font Sanity. I'll show you mine in just a second here. You can choose the font family based on each individual pane. You can select,

application of Versus Code because Versus Code is an electron app. So you can you can do things from you'll notice I have all kinds of things hidden and maybe perhaps my file explorer JS much more barren than a lot of people's.

Yeah. I'm choosing my font family, which is the same font that I have, m d I

And let me show you mine here so I can you can get an idea about some of the stuff I'm doing. So one thing I did is I set the APC header to height 36.

And you can even write CSS to customize things within the electron I I ran there's, like, a thing you can see, like, the process time or something within extensions. I forget it is. I googled it at at that moment and found that that was the number Node culprit. So I I found it through It it basically gives you quirks in how we use our text editor that are not optimized. It's very funny, like, the just well, Legos everywhere. Like, Legos everywhere, and and

all kinds of things. You can load custom CSS.

Or you'll notice that I've changed the font here. I've been able to change the label fonts for things. And that's all being done through APC, which is again, it's a really cool extension.

it's, super cool.

And when you install this thing, it can feel a little overwhelming. And I've mostly gotten some of my config from other people's configs. But you can do things like hide the title bar. You'll see I don't have a title bar. It doesn't say Visual Studio Code up top here.

For the APC Electron, just because I have, like, little things like commit and sync. So,

APC customized I thought at first, it was like one of those ideas that somebody puts into your brain. You're like, no. Never. Can't you could not do that. I turned tabs off, and here I am. I'm not using tabs, And it's actually kind of sick.

I have the title bar hidden and have it inset. I've then moved to the traffic bar or the traffic lights up top here so that way they actually go to the top left.

when you are nested inside

for both And you just hit f two, and you can rename that to is allowed. And then if you hit shift

HTML and I want to know what am I actually inside of, you know, I could just go up to click it, especially, like, I was working on, like, a Tailwind site where the the wrapper had, like, a bazillion GitHub pull request. Maybe you don't even have I don't even know what this. Yeah. I do not have GitHub, whatever the GitHub extension is. Do I have it? Sometimes I don't even know what

even with my terminal, I use warp. I like warp because it gives you a bit of a gooey I'll often say a couple of months ago to my I

when I'm inside of, everything else related Yeah. That's that's always a frustrating thing to hear. People are like, maybe it's got to slow, and then

Sticky headers.

for I could click on the branch name if I want. Right? Like, I don't want it as just text. Just text is not enough. So Versus Node does have It's also that's also why I like Versus Node over it's so nice to be able to delete a file from because, like, I don't keep my files open very often. I usually close it, especially when I'm, like, recording a tutorial, button on the client side. So sometimes you'll have 3 or 4. If you're working on a feature, 3, 4, 5 different files open There's so many different ways, but I'll often just hit the command l l three times. I know there's some keyboard shortcut where you can select all 3 of them at once in Npm. You could probably do that Versus Node as well, but that's nice and fast for me. Or if you wanna select just to the end of the line, and you can search for something like transcript,

what they do. So big fan. And not only just the not being texting, I don't have to configure it to get this functionality. It came out of the box this way. Yeah. And I I got a job, man. My my job can't be my text editor. I'm sorry.

like, a really nested, so I don't have to reload it. If if you don't know, you can just go to help toggle developer tools And if you buy cheap bulbs, like you said, I find really nice. Move.

think this is a really gorgeous theme myself. Yeah. I like that. Yeah. It it's it's a level up tutorials colors. I do have a syntax level up tutorials one that's like a hybrid of both

and then I have a light level up tutorials one and then, like, a crazy

our brand colors,

level up. Yeah. So this is the level up I Yeah.

Yeah. You know what? I'll show you the, You know, one that we've both talked about using a lot is better comments.

It's a monospace font with ligatures and all that good stuff. So the ligatures in MDIO are a little bit different where, like, you don't have

but Yeah. I'm a big fan of Cobalt too.

let's see. How do I do? Theme, color theme, Auto rename tag allows you Wes you're you're working in HTML. It's wild. There's a lot of things to scroll before you get to see it here. Okay. When when you're changing a tag name in HTML,

which is the brand font we use for syntax.

Node Owl is the most popular one that a lot of people use,

In fact, what you're looking at is the syntax Sanity theme that I had mentioned that I'm working on. This is syntax tasty inside of Zed, which check it out. I think this is a pretty cool looking theme. And this is a little bit more yellow. There's some there's some colors I wanna change on it still, but this is the the, tasty theme. And it is in zed, and it's it's custom.

They do now,

I don't know, probably a year now. And every now and then, I dip into it. Most recently, someone asked me to make my theme for it, but

which JS, a new Bos. And in fact, that's one of the reasons why I started using it since very recently.

Yeah. I I Have you? I've dove into it quite a bit. Yeah. I've been I've had it installed for,

they are not allowing external themes just yet.

what our thoughts are on Zed. I know, Wes, you haven't really dove into it. This is Zed. I, Is this thing was still slowing me down. So, yeah, get rid of it. That's wild.

Yep. Cool.

You know what? I I think we can save the AI stuff. We've had a lot of episodes Yeah. On Copilot and Codium. Those are both great options. We had Node folks on the show. It it was really cool. I use that one all the time. Last thing I do wanna say because I know we're gonna get comments about this is Zed is a new Rust based editor. It's only Mac right now. People might be wondering

And, yeah, that's it right now. But I I think for me, I started using it once it added Svelte support.

this color scheme. But when I'm coding

Yeah. I think that's

instead of having specific in this experience, like locals right here. You do a a pound in your command palette, and this will do a symbol lookup, and then you can do a sort of a fuzzy fetch.

Are you saying you stripped down for your hot tips? I stripped down for my hot tips. Yep. Yep. Tune in, folks.

these buttons right here where you can switch

that's all I hide. I would like to hide a little bit more. I sometimes get annoyed at the the gutter right having every single T shirt that was sold in a specific day, expand your selection. So if you're in here, you you run it once, that gives you that. You run it again, it'll give you that. Run it again. It'll just, like, keep going out

profiles are really cool. So these right here. So you'll often see them on the left hand side of people's editors you can do question mark. I think question mark is built in. It's built in. Yeah.

folder based settings, you can just have profile. So, like, if you're like, alright, well, I like the code at this when I do Python,

The discussion was why you know, a lot of people were saying I haven't had tabs visible, and it's not a big deal.

folder based routing or file based routing. Well, I guess that even, like, really does a a nice job of segueing kinda naturally into the next one that I had here was that conversation

led to many other conversations both in even in the the Svelte ambassadors discord, people were talking about your tweet, and then that led to the same discussion

3, 2 2.

Wes just got lucky the first time. Oh, that's hilarious. Oh, that's so good. Oh, that's good. Yeah. It's so funny that we just got lucky the 1st time, and it we both must have just clicked it at the exact same time

1.

to to share our screen. But, yeah, that's that's super funny that because it works. It just you had to trick the system a little bit. Yeah. That's very funny. It's funny that it works. You know? Yeah. I'm sure it's a a limitation around

let's get on on into it. Well, even before we get on into it, Wes, do you wanna share with the audience the little bug that we just found in our

Yes.

all of the the different parts of our our Versus Node. And I've got lots of tips and tricks, and I love talking about this type of stuff. So Emmet is is super handy. However, I often find myself in the case where I'm not writing HTML from scratch.

Speaking of that, let's talk about 1st and foremost, big question off the top here with Versus Node, There's 2 versions of Versus Code that you can use, the insider's build that updates very regularly or the regular build that updates not as regular, like once a month. Right? Yeah. And Push up.

than or like, let's say I took a dump of all of don't clip that.

Yeah. One last thing. I did a TikTok on this. I did a video or whatever. Turn off import cost. Import cost is a plug in that so many people have installed.

the sidebar search is decent. But if you want, like, a little bit more of a comfy UI,

having to go into the tiny little sidebar Yeah. For that type of thing. Like, how often do you, like Yeah. Oh. I I think I like the the look of this better. But, like, can I It's itty bitty? You're right. Can I put the search as its own tab? You know? Give me this UI

You can also do the whole find and replace that you can in the sidebar. Pnpm you just now your search is is in the actual editor, and you could just kinda scroll through it. And if you wanna say, alright, I'll often have, like, a log dump or command b because it's on the other side. Right?

I think.

Just makes it look more cohesive. It is totally cosmetic and pointless, but it just it's nice. It's not pointless. Looks good.

0 blacks. I know that can irk some people. Yeah. Oh, I like the full black.

Yeah. Theme, I'm using the Syntax FM theme. It is hardly been downloaded. We don't tell anybody about it. I made it a little while ago, and, you know, I slowly tweak it here and there. In fact, I'm even working on a new version that JS gonna be a little bit less straight black. So you'll see it has really low download numbers. We don't talk about it. So if you wanna use the same theme that I'm using, it's the syntax f m theme. I also have a level up tutorials theme on here too that I I really like to use for a long time. But I am I am making a new theme that I'm calling syntax Sanity, which is a little bit less high contrast. It's a little bit, you know,

not like I I don't use a mouse. So I I have to figure out another way to do that, whether it's like a gesture or my my,

colon's white, once it works, like, you just pray that it it doesn't stop working. You know? So I'll often have, like, an h two tag that says, like, chapter,

over, like, JavaScript, I like to do this. You can just switch between profiles with that, and I have, like, a really stripped down version for recording my hot tips because then it it takes all the line numbers and all the whole bunch of all the crap out of there. It's just just the code highlighting.

So I'm often tempted

HTML attributes,

is is yellow,

equals this white, and then the string inside of here is a different green. You know? Like, there's Mhmm. There's a lot to that. And if I were to switch that to it gives me the types. Right? Same with, like, locals. But now doesn't do it if it's sticky.

the fine grain detail. Like, look at this look at this right here. Style Yeah. So I run I run regular. However,

angle brackets. And I often look at people's themes. I'm like, that that theme doesn't have the because Versus Node knows about your symbols. Versus Code knows what's a variable and what's a function and and and where they are. It knows the whole graph of your your code base where things are imported and exported.

see, like, it's it's washed out. There's blue and there's brown.

delight.

Maybe that's a a good thing to talk into.

I have, you can open up it's called the search editor, new search editor, So Interesting. Yeah. Pretty exciting.

computer words that are not real words.

of all of the words that I've I've done over the years and added to it, and that gives you there's gotta be, like, a whole bunch of It worked. Alright. Yeah. Okay.

a tinkerer's

I am a big fan of that as well. You just click on Wes. SQLite. You did a video on it. You click on SQLite database, and Bos just opens it up, gives you a nice little GUI for working with it and seeing what's in there. I use that a lot where I'm just like, did that work? Like, the 1st time you you're saving something to a database, it's like, did that work? Like, the 1st time you you're saving something to a database, for your tabs and sidebar instead of a serif font sans serif font, huge.

awesome.

did that work? There's lots of database GUIs out there, but being able to do it right from Versus Code is

to give us actual spell checking. It's super annoying because

it finds a lot of I mean, it finds legitimately misspelled words for me all the time, which is great. I have spelling issues. I'm dyslexic. All kinds of things. Right? So for me, yeah, I gotta have this type of thing. In the same regard, it, like, never finds my last Node, so I have to add it to my dictionary or, like, what? We work in code and there's so many fake words in what we're doing that aren't in the dictionary. So I feel like I'm constantly adding fake words to this thing or code words to this thing. And it can get annoying. But hey. You know, the longer you work with, the bigger your dictionaries end up. Then, yeah, you just you just take those from computer to computer. You never you know? stuff. So I I'm definitely a minimalist

And I like this one because it is lightweight. It's not like a full on editor. It's just a viewer. And, again, I'm you could rename this one, did that add to my database? Because that is what I'm using it for. Did my my query succeeded? Okay. Did it actually add to the database? Check it. Alright. It did. Code spell checker is Node that we use Inside of my style sheet, which is stuff I'm doing with CSS, always good to to try something new, and there's so many cool coding fonts out there in the last 3 or 4 years. Yeah. There's so many. And Node even just, like, not even coding fonts, just monospace fonts in general that you can use and and look good.

via

memorize the the shortcuts you need for the panels that you have open the most, and that's it. I I hid that thing, like, day 1, and I've forgotten about it. Oh, yeah. To me, like, when I see that open, it's usually people who haven't memorized the panels or need to click on it to see what it is. But I think it's worth your time to memorize those because,

to hunt around and see what features are there. I'll tell you what I do for that. I do the command shift p and then just start typing.

Yeah. I I think I use end up using that if it's something, like, fuzzy for me. Like, I'm not quite positive what it is. Yeah. I just like like, try try open up, for those of you who like really even more customization, GitLens you know, making, let's say, the arrows indistinguishable same type of ligatures. They they adjust, but they're Scott, like, they're not combining characters in the same way. They're taking up less space. They're doing or they're they're they're they're adjusting without, There we go. Yeah. I look at an extension called file utils, which Yes. You know what's funny that, like, the the file when you're in the the sidebar here and you click on a file, I know there's there's commands too for file details.

in in here. Right? It's nice to be able to to I I gave Randy ours because he edits the show, and he writes the the markdown notes. So I gave him my there's there are tools to figure out if it is an extension. Is that how you found that, or did you just randomly turn it off and and realize it's way faster?

pull requests.

you know, I do. I close and open those or React or whatever. This works in all of that. So, you know, no no issues there. So you can just straight up open let's say here, I have a main tag. If I wanna change this main tag to a div, I just change it to a div, and it changes both the the start and the stop.

very frequently while I'm working. Yeah. I don't know if clicking to do that is the the right way. Every now and then, I have, like, a I have, like I wanna go to the GitHub chat. You know? And I don't know what the extension is for that, so I like to just be able to click on or or see pull requests with all the buttons down the side, dollar dollar bills y'all. That'll give you leading zeros.

syntax. Again, we've been using this tool for a long time, and it totally rules. Alright.

when something goes wrong because things go wrong all the time when we're coding. And you don't want a production application out there that, well, you have no visibility into in case something is blowing up, and you might not even know it. So head on to reduce entry.ioforward/

You can sign up today and get 2 months for free. Sentry is just a really incredible tool for not only tracking your performance, making sure application has no bugs, but even just seeing what goes wrong

whatever the other files open here. So let's say, again, I'm working on multiple files. I'll just split it. It moves it open. Next thing you know, I have 2 columns open with 2 different files. Way faster to me.

the setting itself is move editor into next group. That's the setting. And you'll do hyper s, and you can see what it does is it splits it and then moves it into the next group in 1 fell swoop. That way, I have

I don't know, probably 12 years ago, and I've been loving it ever since. I do every now and then think, ah, maybe I should make another one. You know? Maybe something a little bit more purple. Maybe something with a little little darker blue.

If if I'm going dark mode, I want that.

That's, you know, that's just how it is all the time whether it's Svelte

Check it out. I just changed my font to Georgia. Oh, okay. Yeah. And I'm gonna move to this. This looks awesome.

it's not gonna work. And the other what do I hide? I hide the mini map for sure.

Hot reload. Yeah. Having, like, the font fixed font

in here, and you can just inspect element and find the selectors on all the the things that you want.

I wrote a whole to and they took, like, an hour and a half, and they sorted the entire bin. And they thought that was super fun because it And, obviously, there's a lot more themes out there. It seems like handy

and you get access to all of this code you just hit it twice, and that will jump to the the actual beginning of the line, not the the wrapped beginning of the line.

Pretty simple. It should always work like that. Yep. It saved me so many times in React world or or literally anything with components where you rename 1. And you can use, Or command shift b.

and you can have it be camel case, or you can change it to snake case. Oh, yeah.

And that just changes it quick and easy. You don't have to do it manually, which is something I feel like a lot of people probably do. You can even just type kebab or whatever. Yeah.

I use Node called the change case. So if I have some text highlighted here, you can see, like, this is a kebab case right now. You can do change,

anything selected, If I were to do that, I don't know if it I don't know what the shortcut even is for that. What it would typically do is open that file twice. I don't want why would you ever want that? So I have mine set to be hyper Wes, and what it does and this is the setting that's a highly used thing for me. Anytime I'm renaming anything, it's almost always via that way. Unless, of course, it's just like a string that's used somewhere in one place. You know? Just real quick. Yeah. Variable or function. Yeah. Absolutely.

you can customize this. But if you have anything selected, I do command l, and then all it does is insert a a console log below with a label of what the variable name is, comma, the variable.

wrap console log simple. And I have it set up to be command l. So if you have any

Activity bar. What is the activity bar? I always get those confused. Which one is the activity bar? Yeah. The activity bar is

Well, you can, and that's what they'll tell you.

Like, I guess, like, what he just edited a file really quick. He can't use nano. Like, he doesn't have not everything has to be whatever you use, you know, or how you do it. So, just keep that in mind. It's all personalized. It's your thing. It's like setting your your car seat in the position you want your car seat to be in. It's it's up to you. Let's talk about, like, what we in general show or hide. I've mentioned that I show and hide tabs. I show and hide the activity bar. But I also hide the search bar at the top. And I pretty much I hide the mini map typically.

Renaming.

Wes I installed is permute lines, so unique, reverse, and shuffle.