My Minimal and Beautiful VSCode Setup
ฝัง
- เผยแพร่เมื่อ 1 ก.ค. 2024
- 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: makevscodeawesome.com/
APC Customize UI++: marketplace.visualstudio.com/...
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. 🫡 - วิทยาศาสตร์และเทคโนโลยี
![*Next-door 10x Software Engineer* [FULL]](http://i.ytimg.com/vi/kKAue9DiHc0/mqdefault.jpg)
![[ไฮไลต์] แบดมินตันชาย SHI Yu Qi (จีน) vs วิว กุลวุฒิ (ไทย) รอบ 8 คน | โอลิมปิก 2024](http://i.ytimg.com/vi/f7z7taforOM/mqdefault.jpg)
As a nvim user this looks clean!
Highest compliment ever right there. I've seen some wonderful looking nvim setups!
Same
yeh
Wooowww... I've been waiting for this from you, Josh
Thanks! I'm glad for the support. ☺️
You like things that are practical, and yet functional? Awesome man!
Thanks for showing this up. already in the process of going back to using Nvim.
This convinced me to stick with vscode.
You can use Nvim inside VSCode too. I am not a vim motions type of user, but I understand why it's incredibly useful!
Hey hey! I've been waiting for this one. Thank you sir 🙏
Of course! Thank you for being a fantastic supporter. ☺️
I was waiting for this!! Thanks
Of course! Thank YOU.
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!
I'm a fan of Zed! :)
amazing man. top notch work and video. Do you have your settings shared in a gh repo?
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
@@joshcirre thank you so much 🙂
Hey, Josh! What're your thoughts on PhpStorm?
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)
i use neovim primarily and vs code for debugging... would absolutely love it if it is as clean as this...thanks❤
Check out the APC Customize plugin. And just start stripping things away. 😁
Would you be open to share a gist of your settings.json? (or at least only the apc settings)
Yeah! Let me make sure I remove everything that's Make VS Code Awesome specific and I'll do that. ☺
@@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
Your video presentation is top notch.
Thank you so much. That means a lot!
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?
This is what I use "Intelephense" for. Once installed, as long as it's a PHP file, you can import classes and namespaces automatically. ☺️
@@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!
Do you mind to share your whole settings.json file? I was curious using the same theme, which doesn''t look like yours somehow.
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. :)
@@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?
@@joshcirre Any updates on this? Thanks
If I used vscode I’d have it configured like that 👌🏻 actually my nvim config looks very similar.
Love that! I am incredibly inspired by a lot of clean NVim setups, as well!
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..
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. 😅
The sticky thing I turned off... It confuses me to have things stick
Makes sense. I think I still like it, but jury is out. :)
Aaaand purchased... 😎
It's SO good. 😁
man this looks awesome!
Thanks! It's been a long time coming but I really love how things are currently!
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.
Yep! That's the APC Customize UI++ extension with a bunch of tweaks to remove unnecessary things. :)
@@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.
@@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.
@@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
@@imfilou very nice! ☺️
I'll try replicating this with Marine Dark theme
Love it! Hope it goes well!
Looks good but a few problems with the setup: Mac OS instead of Linux, VS Code instead of Neovim, PHP instead of Python.
Oops. 🤷♂️
Could you share your json settings?
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!
What is your terminal again?
This is the Warp terminal (warp.dev/) :)
its really amazing..
Thank you. :)
What is your file icon theme?
I can’t remember if I said it. My apologies! Icons are also the “Catppuccin Frappe” icons. ☺️
As an nvim distribution( not famous) maintainer and enjoyer I am impressed!
Wow. This is high praise. Thank you. ☺️
I am consistently impressed with NVim themes and setups. It’s definitely an inspiration.
is it boost performance?
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".
Nice look!
Thanks! :)
can u show me what icon do you use
This is the Catppuccin Frappe icon set, as well. :)
@@joshcirre is it available for windows?
Can you send the full json file?
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
You should probably take a look at your mic settings, it sounds really weird.
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. ☺️
what is font name in floder tab
That's Dank Mono, as well. :)
@@joshcirre can you share the link of font to download
The icons theme please
This is the Catppuccin Frappe icon theme. :)
@@joshcirre Thank you so much!
your fonts look odd, like non-aliased or something like that?
Hmm. Odd, I don't notice it so maybe it's just the recording. In the actual editor or in the sidebar?
why not use nvim though
I’m not smart enough for it.
@@joshcirre u def can do it hahah just takes time
why hide line numbers?
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. ☺️
Why are cricket sounds in your audio ? It stops when you stop speaking.
Because there are crickets in my garage. 😬
@@joshcirre FIX IT please.
@@dipanshusabharwal hahahah. I’ll get right one that.
Sadly, I can’t just “fix it” lol.
No wayy, it only supports Linux and Mac 😢
Unfortunately right now. :(
good setup,bad technology lol
Like VSCode is bad? Lol
just use zed lol
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.