When it comes to the tools that I use every single day, in particular for development work, like my terminal and my code editor, I love things that are practical and yet functional. Simple, beautiful, and clean looking, I guess, would be a great way to put it. And so I've gotten a lot of requests to go through, okay, how is my VS Code specifically set up? Why does my terminal look exactly like my VS Code?
Questions like that. And I wanted to dive in and make a video and just talk through it. Now, I'm not going to walk through every single setting because mostly it's not my own to walk through.
Most of the things that I've set up within my VS Code setting, I would say maybe 80%, if not more, is all through Caleb Porzio's Make VS Code Awesome tutorial, his course. Caleb Porzio is the creator of Laravel Livewire, as well as Alpine.js, and I would advise you to buy it, to pick it up. Now, my VS Code, as well as my terminal, warp. terminal that I'm using, I like to keep the same theme across both of them just so they look the same while they're on video. But I also just like having a uniform look.
So if I change the theme on one, I'm usually changing the theme on the other. And for the past couple of months, it has been the catpuchin. I believe I'm saying that.
So catpuchin frappe theme or frappe or I believe it stands for Frappuccino. So catpuchin frappe. We'll call it that or frap. Capuchin frap.
There we go. We'll go with that. That's the theme that I'm using for both warp the terminal as well as VS code. And I don't think there's too much that I'm changing within warp.
I'm I have like dim and active pain set up I have the Dink Mono font. And so that's the font that I'm using on VS Code as well as in Warp. With a similar font size and line height, it's a little bit bigger in Warp than it is in VS Code, but we'll get to that in a little bit. So those are the settings for my Warp terminal. Okay, so now let's jump into VS Code.
So you might be thinking, okay, how is it actually looking that way where it's like a little bit cleaner on top and it's not necessarily any kind of like borders around it. That's primarily from the AP. C, customize UI plus plus plugin.
So I would advise you taking a look at this because it's absolutely incredible. I think there was an older version that Caleb Porzio had linked and set up with his make VS code awesome tutorial, but this is like the newer up-to-date version that has a different name and it's like what everyone is using now. So there's some things to look at from here. Here's how I've set that up particularly.
in my VS Code settings. There's a bunch of stuff here. Again, Caleb Porzio's course is going to be the great resource to dive into a bunch of this. But primarily what I am looking for here is the APC settings.
And this is what I've modified myself, APC electron to change the background, to change the frame, to change the title bar, the vibrancy, as well as the styling of the editor. So APC Customize UI++ is a great way to think about this. is it allows you to style VS Code as if you were styling a browser, because that's what VS Code is.
It's using Electron behind the scenes. So you can say, okay, this particular editor and the title and the container and everything like that, you can change what kind of styles it has just with simple CSS. So one thing that I'm doing that I just recently switched is I am changing the font for it.
everything to be dank mono. So you see in the sidebar, I actually didn't have this. So without that, it just changes it to just normal font. Same thing with up here.
I love having it all in one font. I think that's a nice little touch that I just added maybe a month or so ago. And I absolutely love it. So that's the biggest thing.
The plugin for APC Customize is the one to look at. And I would advise just diving into maybe some other people's custom JSON settings that they have. for that.
There's a bunch on GitHub and in different blogs and stuff like that. But also make it work with your particular theme. So anything within the APC electron settings is going to require a complete start of VS code.
Anything in the style sheet things for the cursor, you can see here that's like that purple cursor that's happening. Then I don't have a purple cursor anymore. It's stuff like that.
You can easily change with just modifying the settings. This purple cursor is one that I believe Caleb Porzio mentioned in his course. So that is primarily the gist of everything style-wise. So we are using, like I said, the catpooch and frap theme for icons.
We are using the catpooch and frap icons. So I'm pretty standard across the board. I love this style.
Before I was using for color theme, I was using the natty theme, and that's one that... kilo porzio uses and it looks really similar to live wire mostly but i have found that the wrap theme from cat poaching is really easy on the eyes i really enjoy using it okay now i would say that's pretty much it for when it comes to just use caleb poiseu's course and use apc customize ui plus but there's a couple different things within caleb's course a lot of the things that you'll dive into is just settings to make things easier so i love having the sidebar on the right and some of the settings that we use in the course that caleb is just you naturally progressed on to a lot of people like myself is command K and then you have B to like swap to the browser. Then you have command K X to swap to extensions. And those are usually the only, those are usually the only two that I pretty much use.
You could use any kind of like version control if you wanted. I don't really use version control in my VS code. I usually just pop open this up and down.
So command K B command K E. to go to editor for terminal just command T. Those are usually the main two commands that I use while browsing around VS code. One another thing that Caleb's course kind of talks through is having the ability.
I like things pretty simple when I'm editing and reading. But when I'm doing creating code from the get go, usually I'll go command KK and it just shifts up the code to a completely different font size. as well as different paragraphs or different line spacing.
I love this to be able to just dive in when I'm trying to emphasize specific parts of the code. So again, all of this is built, is this created to be functional for both my own personal programming to say, okay, this is what I use every single day, but as well as this is what looks great on video. So that's primarily a lot of the modifications that I've done. So let's look at some of the plugins as well as just. things that I do within VS code that are helpful.
So again, sidebar on the right, that's like a something that I enjoy using for extensions, I use mostly the tall stack plugin. So this is the the plugin folder, the plugin collection, at least as of now, there might be the possibility for official extensions in the future. At least as of now, this is the best extension package. folder that I've seen for everything within Laravel, Livewire, Tailwind, as well as Alpine. So Headwind is one that I love within this.
It basically uses class sorting as well as any IntelliSense within Laravel Blade because Laravel doesn't necessarily have a prettier option. There is prettier Blade plugins that kind of are used to add in for each package. But within the VS Code settings, I've found that the Laravel blade formatter is the best option for that.
Okay, so now one thing that I've been using recently within the past couple of weeks has been the Tailwind Fold plugin to basically improve what looks like when I'm actually showing specific code. In that sense, when I click into this, then I can actually see the classes. Otherwise, it's just, I think that's very nice for people who are doing any kind of code screencasting, but I think it also just works great while I'm working. actually writing code because I don't have to look at all a whole bunch of different class styles. I can't remember if this is actually a VS code setting, but you see here on the top where it has the the latest or the specific what's called the specific div or specific code element that you're in.
It has that kind of sticky to the top. I find that incredibly useful as well. I am using for AI.
I used to use GitHub Copilot. I since switched to Super Maven, which I have found incredibly useful. I pay for the premium version and it's incredibly fast.
Like it's a lot faster than GitHub Copilot. And I think a lot more accurate and a lot of things as well, because it takes into account the entirety of your code repo. So if I'm in a Laravel application, everything that it suggests is based on my entire code repo. Okay, I believe that's pretty much it for things like packages as well as themes. Obviously, I have a bunch of different themes installed that I've messed around with in the interim.
Another thing that I love using is the Laravel Pint plugin. So that way, if I was to pull this up and say Pint, because I'm not in a, let's say Pint. Yeah, format document using Laravel Pint.
And I actually have that set up to be on save. So when I'm editing something, if I was to format. using pint, it automatically edits it as according to those pint standards.
I think this is incredibly useful as well. Other than that, I think that is pretty much it when it comes to my VS Code settings. There's not too much that you wouldn't learn if you bought Caleb Porzio's core setting.
And that's not sponsored by any way, shape, or form. But it was incredibly useful for me to be learning how to work with PHP, with Laravel, with Livewire, with Alpine within VS Code. I can be pretty much boiled down to that. The TallStack plugin folder, again. That might change in the future.
The cat-puching theme for both the theme and icons. Dink mono for the font. And then Caleb Porzio's course for everything else in between, which includes APC customized UI+. But yeah, hopefully that gives you some insight onto how I've set all this up. But really, it's just optimized for simplicity, optimized for functionality, and just make things beautiful.
So keep creating.