My Minimal and Beautiful VSCode Setup

The goal is to have a clean, functional, and extremely beautiful code editor so that I can love the tools I use every single day.
So, this is what I came up with.
But really, it's all copied from Caleb Porzio's Make VS Code Awesome course and then slightly tweaked with a different theme and font. I didn't want to share every little detail and setting because it's really all from this course and I want to give credit where credit is due. I've changed very little. :)
Links:
Caleb's Course (Affiliate Link to Help Me too. 😁): gumroad.com/a/...
APC Customize UI++: marketplace.vi...
Warp Terminal: warp.dev/
** I missed talking about the Intelephense plugin which is what I do use and paid for the premium version. 😊
*** Yes, those are crickets. The downside of recording in my garage in the summer. 🫡

[@joshcirre]

Here's a link to Caleb's course (that's supporting me in the process). It's worth every penny not just for the styles but also keyboard shortcuts, macros, etc. gumroad.com/a/636621331

[@RazoBeckett.]

As a nvim user this looks clean!

[@joshcirre]

Highest compliment ever right there. I've seen some wonderful looking nvim setups!

[@diegoulloao]

Same

[@daishes]

yeh

[@LolBruh]

You like things that are practical, and yet functional? Awesome man!

[@amirchegg]

This is the best vscode setup video I've seen so far. Great tips and tricks for navigation, customization, themes, and extensions! I didn't know about the AI extension you mentioned in the video and I tried it this morning and I'm impressed! Loved this video and would like to see updates to this video in the future. Subbed 🙌

[@Richardritchie-w1f]

Listen up. I think zed is similar out of the box. They just lacking some basic things but damn Boi, it's so cool to use it. It's feels like liquid pain out of my eyes every time I reset vscode. Great stuff as always!

[@joshcirre]

I'm a fan of Zed! :)

[@cdrz23]

Wooowww... I've been waiting for this from you, Josh

[@joshcirre]

Thanks! I'm glad for the support. ☺️

[@debajyatidey9468]

As an nvim distribution( not famous) maintainer and enjoyer I am impressed!

[@joshcirre]

Wow. This is high praise. Thank you. ☺️

[@joshcirre]

I am consistently impressed with NVim themes and setups. It’s definitely an inspiration.

[@fondevops]

On newer videos, you have a menu bar that appears on the center of the screen that you use to find and open files in your project. How did you set it up to be like that?

[@bbbbbb0bbbbbby]

I know this is kind of late but I was curious if you have your dotfiles or config on a github repo or something like that. I would LOVE to take humbily copy some of your settings.json, I love the setup! If not all good, thank you and great video!!

[@anonymousguitarist7418]

Thanks for showing this up. already in the process of going back to using Nvim. This convinced me to stick with vscode.

[@joshcirre]

You can use Nvim inside VSCode too. I am not a vim motions type of user, but I understand why it's incredibly useful!

[@necmi030]

Do you mind to share your whole settings.json file? I was curious using the same theme, which doesn''t look like yours somehow.

[@joshcirre]

I'll see if I can grab things that aren't relevant to the course. Since Caleb's course includes the entire Settings.json file and so I don't want to plagiarize what he's done. Give me a bit and I can grab some things out of there. :)

[@necmi030]

@@joshcirre Thanks for that. Theme looks great and I somehow kinda managed to get it looks like yours. Anyway, thanks for this awesome video. Do you've a Discord server?

[@bioburden]

@@joshcirre Any updates on this? Thanks

[@jangovvk]

amazing man. top notch work and video. Do you have your settings shared in a gh repo?

[@joshcirre]

Thank you. ☺️ I don’t at the moment just because the majority of the settings are from the Make VS Code Awesome course and I don’t want to share what’s not mine to share. That being said, Caleb did share his APC settings gist publicly. gist.github.com/calebporzio/c7a2ca8fbd180815e50281bdb7b911ca

[@jangovvk]

@@joshcirre thank you so much 🙂

[@Tuto1902]

Would you be open to share a gist of your settings.json? (or at least only the apc settings)

[@joshcirre]

Yeah! Let me make sure I remove everything that's Make VS Code Awesome specific and I'll do that. ☺

[@joshcirre]

@@Tuto1902 so I did find that Caleb shared this with his newsletter. So definitely buy the course for all the goodies, but here’s the APC specific setup: gist.github.com/calebporzio/c7a2ca8fbd180815e50281bdb7b911ca

[@Leozinhopirado167]

git with settings?

[@awesomeedwin]

what software are you using for recording this?

[@DanteMishima]

The sticky thing I turned off... It confuses me to have things stick

[@joshcirre]

Makes sense. I think I still like it, but jury is out. :)

[@guacamoly]

Hey hey! I've been waiting for this one. Thank you sir 🙏

[@joshcirre]

Of course! Thank you for being a fantastic supporter. ☺️

[@wi1h]

very interesting setup, i'm a neovim guy at heart, but i have to use vscode sometimes at work, might have to buy the course... as an aside, whenever you're talking, there's a cricket-like squealing in the background, it's pretty faint but it's driving me insane with my headphones on. judging by the mic quality, it might be an issue with a noise filter you have setup, or maybe it's just a washing machine or something..

[@joshcirre]

It’s a great course especially if you use VSCode frequently. A lot of helpful tips outside of the setup and aesthetics. And… haha. Those are literal crickets. My garage setup in the summer is tough to not have crickets in the audio. 😅

[@fernandezjasper]

What file icon is that?? looks great!

[@sagadsalem]

Catppuccin Icons for VSCode

[@highmoonlander7274]

Can I get the this json file?

[@huckfaters]

I'll try replicating this with Marine Dark theme

[@joshcirre]

Love it! Hope it goes well!

[@ypathan420]

i use neovim primarily and vs code for debugging... would absolutely love it if it is as clean as this...thanks❤

[@joshcirre]

Check out the APC Customize plugin. And just start stripping things away. 😁

[@Soulis98]

Hey, Josh! What're your thoughts on PhpStorm?

[@joshcirre]

I think it's great and if I started in PHP world, I probably would use it, but the time to get up-to-speed with PHP Storm (since I know VSCode really well and it works for my usecase) does not seem to be worth the effort even with the awesome stuff it brings. But if someone is not 100% sold on their editor, I think PHPStorm is a fantastic option! I'm also keeping my eye on Zed 👀 (zed.dev)

[@imfilou]

Hello! I see that your "breadcrumbs" is in the titlebar, or rather than you don't have a title bar and the info about the file you're in is showed at the right of the closing/minimize/maximize buttons (the red, orange and green buttons at the top left corner of the window). How did you achieve that? This feels so minimal I love it.

[@joshcirre]

Yep! That's the APC Customize UI++ extension with a bunch of tweaks to remove unnecessary things. :)

[@imfilou]

@@joshcirre Wow! I didn’t expect you to answer me! I’m subscribing :) Yeah I assumed too, will you share your settings with the community ? Even if you sell it, I’m in! Every work is worth some money.

[@imfilou]

@@joshcirrebtw I went another way regarding the terminal. I use iTerm 2 inside VSCode. There’s a setting in VSCode that lets you use other terminals than the native one. I made custom shortcuts inside iTerm 2 that makes it possible to select text with shortcuts just the way everyone is used to do it in every modern software. I can shift + arrow key to select one word or shift + cmd + arrow key to select a whole world. So I ditched Warp Terminal. I made the terminal full screen in VSCode so it feels like an alt tab when I open it via the shortcut. It’s more practical because you can drag and drop the files from your VSCode project in the terminal.

[@joshcirre]

@@imfilou I always try to respond to everyone. :) the settings can be achieved by 90% with the Make VS Code Awesome course by Caleb Porzio, but he did release this in his newsletter. So definitely purchase the course and take a look at this Gist. ☺️ gist.github.com/calebporzio/c7a2ca8fbd180815e50281bdb7b911ca

[@joshcirre]

@@imfilou very nice! ☺️

[@wixarea]

Hi, when I use Next JS and press enter while typing the component name, the import section is automatically added above. I can't do this with Laravel. for example When I type something like User::class use App\Models\User; should be added above. With which extention can I do this?

[@joshcirre]

This is what I use "Intelephense" for. Once installed, as long as it's a PHP file, you can import classes and namespaces automatically. ☺️

[@wixarea]

@@joshcirre I had previously installed Laravel Intelephense, but it didn't work for me. Now, after installing PHP Intelephense, everything is working perfectly. Thank you so much!

[@AndreiSilvester]

Looks good but a few problems with the setup: Mac OS instead of Linux, VS Code instead of Neovim, PHP instead of Python.

[@joshcirre]

Oops. 🤷‍♂️

[@itsarsh77]

where is the config files?????

[@ronin1022]

whats the name font in your vscode bro ?

[@joshcirre]

It’s in the video! Dank Mono. :)

[@diegoulloao]

If I used vscode I’d have it configured like that 👌🏻 actually my nvim config looks very similar.

[@joshcirre]

Love that! I am incredibly inspired by a lot of clean NVim setups, as well!

[@JordanHumbertodeSouza]

@josh do you share your dotfiles by any chance?

[@joshcirre]

Surprisingly enough, I don't have any dotfiles... yet.

[@JordanHumbertodeSouza]

@@joshcirre cool cool... share when you're ready!

[@dipanshusabharwal]

Why are cricket sounds in your audio ? It stops when you stop speaking.

[@joshcirre]

Because there are crickets in my garage. 😬

[@dipanshusabharwal]

@@joshcirre FIX IT please.

[@joshcirre]

@@dipanshusabharwal hahahah. I’ll get right one that. Sadly, I can’t just “fix it” lol.

[@sotasanta]

You should probably take a look at your mic settings, it sounds really weird.

[@joshcirre]

This is my garage set up and there were a lot of crickets out tonight so I had to make do and eq'd it a bit to get rid of some cricket noise. ☺️

[@viasaud]

What is your file icon theme?

[@joshcirre]

I can’t remember if I said it. My apologies! Icons are also the “Catppuccin Frappe” icons. ☺️

[@Zee-ch6nr]

is it boost performance?

[@joshcirre]

Not really? But I haven't noticed too much of a lag for VS Code with my setup or before. Sometimes it does take PHP Intelephense to "catch up".

[@najlepszyinformatyk1661]

Could you share your json settings?

[@joshcirre]

Probably not the full one just since 90% of it is what is in Caleb's course and it's proprietary so I don't want to leak it. Sorry!

[@isaachatilima]

What is your terminal again?

[@joshcirre]

This is the Warp terminal (warp.dev/) :)

[@prashlovessamosa]

Your video presentation is top notch.

[@joshcirre]

Thank you so much. That means a lot!

[@zyalwfie]

can u show me what icon do you use

[@joshcirre]

This is the Catppuccin Frappe icon set, as well. :)

[@zyalwfie]

@@joshcirre is it available for windows?

[@bigardibatera]

I was waiting for this!! Thanks

[@joshcirre]

Of course! Thank YOU.

[@garciajero]

your fonts look odd, like non-aliased or something like that?

[@joshcirre]

Hmm. Odd, I don't notice it so maybe it's just the recording. In the actual editor or in the sidebar?

[@prakashgk-tz3fv]

what is font name in floder tab

[@joshcirre]

That's Dank Mono, as well. :)

[@prakashgk-tz3fv]

@@joshcirre can you share the link of font to download

[@davidgrigoryana]

Can you send the full json file?

[@joshcirre]

Unfortunately, not just since most of the full JSON file is from Caleb's course. However, Caleb did send out this Gist in his newsletter that has a good starting point. :) gist.github.com/calebporzio/c7a2ca8fbd180815e50281bdb7b911ca

[@VimMaster]

its really amazing..

[@joshcirre]

Thank you. :)

[@MrManafon]

Apc has been discontinued :(

[@joshcirre]

Hmm. This one? I'm not seeing it be discontinued. marketplace.visualstudio.com/items?itemName=drcika.apc-extension

[@CaptainDouchie]

why not use nvim though

[@joshcirre]

I’m not smart enough for it.

[@CaptainDouchie]

@@joshcirre u def can do it hahah just takes time

[@sawzarnilinhtay5551]

Is free sir??

[@Zitrone21]

The icons theme please

[@joshcirre]

This is the Catppuccin Frappe icon theme. :)

[@Zitrone21]

@@joshcirre Thank you so much!

[@1Lll_llllllLLLLllllll_llL1]

man this looks awesome!

[@joshcirre]

Thanks! It's been a long time coming but I really love how things are currently!

[@sebastiansusnik7229]

why hide line numbers?

[@joshcirre]

I like having the "cleaner" look and rarely have a need to know what line number I'm on. I do have a shortcut to turn them on if needed when debugging. ☺️

[@kiraishagaming]

No wayy, it only supports Linux and Mac 😢

[@joshcirre]

Unfortunately right now. :(

[@Tuto1902]

Aaaand purchased... 😎

[@joshcirre]

It's SO good. 😁

[@Dunning_Kruger_Is__On_Youtube]

Nice look!

[@joshcirre]

Thanks! :)

[@cyrilalonzo7430]

cool! btw, nice cap!

[@joshcirre]

Thank you. 😁

[@rib9985]

Hold my nvim.

[@YNKSDK]

bye,bye apc))))))

[@redionallaraj7653]

good setup,bad technology lol

[@joshcirre]

Like VSCode is bad? Lol

[@ЛераДера]

just use zed lol

[@joshcirre]

I love Zed! I still am missing some key features specific to Laravel development, but I think it has a LOT of potential. ☺️ And, it's minimally beautiful.

[@cidhighwind8590]

Nice commercial.

[@ivandez1811]

So I have to pay to customize vscode? nah I pass

[@joshcirre]

It's more supporting a creator that has a TON of fantastic tips. You can download APC Customize UI++ and put it together yourself. :)