My Minimal and Beautiful VSCode Setup
Summary
TLDRIn this video, the creator discusses their preferred tools for development work, emphasizing simplicity, functionality, and aesthetics. They share their setup for Visual Studio Code (VS Code) and Warp Terminal, highlighting the use of Caleb Porio's 'Make VS Code Awesome' tutorial for customization. The creator uses the Catppuccin Frappe theme for a uniform look and mentions the Dank Mono font for readability. They also discuss the use of APC Customize UI++ plugin for a cleaner UI and various VS Code extensions that enhance their coding experience, including Tailwind CSS support and Laravel integration. The focus is on optimizing for simplicity, functionality, and beauty.
Takeaways
- đ» The speaker prioritizes practical, functional, simple, and aesthetically pleasing tools for development work, particularly in their terminal and code editor.
- đ ïž Caleb Porio's 'Make VS Code Awesome' tutorial is highly recommended for setting up VS Code, with around 80% or more of the speaker's setup influenced by it.
- đš The speaker uses a consistent theme across both Warp terminal and VS Code for a uniform look, currently the 'Catppuccin Frappe' theme.
- đ The 'Dank Mono' font is used in both VS Code and Warp terminal with similar font sizes and line heights for consistency.
- đ The 'APC Customize UI+' plugin is essential for customizing the UI of VS Code, allowing for styling similar to a web browser using CSS.
- đ„ïž The speaker has made personal modifications to the APC settings for the background, frame, title bar, and editor styling in VS Code.
- đ The use of 'Catppuccin Frappe' icons is mentioned for a cohesive look across the development environment.
- đ The speaker has switched to using 'Super Maven' for AI assistance over 'GitHub Copilot', finding it faster and more accurate.
- đŠ The 'Tall Stack' plugin collection is used for managing Laravel, Livewire, and Tailwind within VS Code.
- đ The 'Laravel Pint' plugin is used for formatting Blade files, with automatic formatting on save for adherence to Laravel coding standards.
Q & A
What does the speaker prioritize in their choice of development tools?
-The speaker prioritizes practicality, functionality, and aesthetics in their choice of development tools, valuing simplicity and a clean, beautiful look.
Why does the speaker recommend Caleb Porio's 'Make VS Code Awesome' tutorial?
-The speaker recommends Caleb Porio's tutorial because it covers a significant portion of the setup they use in their VS Code and terminal, which is beneficial for optimizing the development environment.
What theme does the speaker use to maintain consistency between VS Code and their terminal?
-The speaker uses the Catppuccin Frappe theme to maintain a consistent look and feel across both VS Code and their terminal.
What font and settings does the speaker use in their terminal and VS Code?
-The speaker uses the Dank Mono font with a similar font size and line height in both their terminal and VS Code, with a slightly larger size in the terminal.
What plugin does the speaker use to customize the appearance of VS Code?
-The speaker uses the 'APC Customize UI++' plugin to customize the appearance of VS Code, allowing them to style it with CSS.
What changes has the speaker made to the default settings of the 'APC Customize UI++' plugin?
-The speaker has modified the background, frame, title bar, and editor styling of the 'APC Customize UI++' plugin to suit their preferences.
Why did the speaker switch the font for everything in VS Code to Dink Mono?
-The speaker switched to Dink Mono for a unified font across all elements in VS Code, which they find aesthetically pleasing and consistent.
What are some of the key settings and plugins mentioned in Caleb Porio's course that the speaker uses?
-Key settings and plugins mentioned include having the sidebar on the right, using Command K and B for shortcuts, and the use of the 'Tall Stack' plugin for Laravel, Livewire, and Tailwind.
How does the speaker enhance their code editing experience in VS Code?
-The speaker enhances their code editing experience by using settings that increase font size and line spacing when creating code, as well as using plugins like 'Laravel Blade Formatter' and 'Tailwind Fold'.
What AI coding assistance tool has the speaker switched to, and why?
-The speaker has switched to 'Super Maven' from GitHub Copilot because they find it faster and more accurate, especially as it takes the entire code repository into account for suggestions.
What is the speaker's approach to optimizing their VS Code setup for both functionality and aesthetics?
-The speaker optimizes their VS Code setup by using a consistent theme and font, customizing the UI with plugins like 'APC Customize UI++', and utilizing various plugins and settings to enhance functionality and simplify their workflow.
Outlines
đ» Personal Development Tools and VS Code Setup
The speaker emphasizes their preference for practical, functional, and aesthetically pleasing tools for daily development work, particularly their terminal and code editor. They mention a popular request from viewers to learn about their VS Code setup and terminal appearance. The speaker credits Caleb Porio's 'Make VS Code Awesome' tutorial for about 80% of their setup, highlighting Porio's contributions to Laravel, Livewire, and Alpine JS. They discuss the importance of a consistent theme across both VS Code and their Warp terminal for a uniform look, currently using the Catppuccino Frappe theme. The speaker also details specific settings, including font choices like Dank Mono, and mentions the use of the APC Customize UI+ plugin to achieve a cleaner look in VS Code.
đ ïž Enhancing Productivity with VS Code Extensions and Settings
The speaker provides insights into their VS Code workflow, focusing on simplicity and functionality. They discuss the use of Caleb Porio's course for streamlining settings to improve ease of use. Key features include having the sidebar on the right, utilizing command shortcuts for quick navigation, and adjusting font size and line spacing for better code emphasis. The speaker also highlights the use of the Tall Stack plugin for Laravel, Livewire, and Tailwind, as well as the Tailwind Fold plugin for improved code readability during screencasting and development. They mention the switch from GitHub Copilot to Super Maven for AI-assisted coding, praising its speed and accuracy. Lastly, they touch on the use of Laravel Pint for automatic code formatting according to preset standards.
đš Final Thoughts on Optimizing VS Code for Aesthetics and Functionality
In conclusion, the speaker reiterates the importance of optimizing their VS Code setup for both simplicity and functionality, with an emphasis on aesthetics. They recommend Caleb Porio's course for learning how to work effectively with PHP, Laravel, Livewire, and Alpine in VS Code. The speaker suggests that their setup can be replicated using the Tall Stack plugin, the Catppuccino theme for both theme and icons, and the Dank Mono font. They encourage viewers to continue creating and optimizing their own development environments.
Mindmap
Keywords
đĄVS Code
đĄTerminal
đĄCaleb Porio
đĄTheme
đĄFont
đĄAPC Customize UI+
đĄExtensions
đĄIntelliSense
đĄPrettier
đĄLivewire
đĄAlpine JS
Highlights
Preference for practical, functional, simple, and aesthetically pleasing tools for development work.
Use of Caleb Porio's 'Make VS Code Awesome' tutorial for setting up VS Code.
Consistency in theme across both VS Code and Warp terminal for a uniform look.
Use of the Catppuccin Frappe theme for both the terminal and VS Code.
Employment of the Dim Inactive Pane setup in Warp terminal.
Utilization of the Dank Mono font for both VS Code and Warp terminal.
Customization of VS Code's UI using the APC Customize UI++ plugin.
Modification of the editor, title bar, and vibrancy using APC Electron settings.
Switch to the Dink Mono font for a cohesive look across all elements of VS Code.
Use of the Catppuccin Frappe icons for a consistent icon theme.
Recommendation of Caleb Porio's course for streamlining and enhancing VS Code functionality.
Preference for a simple and clean interface while editing and reading code.
Use of the Laravel Pint plugin for formatting Blade files.
Adoption of the Tailwind Fold plugin for improved code readability.
Switch to Super Maven for AI assistance over GitHub Copilot.
Use of the Laravel Pint plugin for automatic code formatting on save.
Optimization of VS Code settings for simplicity, functionality, and aesthetics.
Transcripts
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 VSS 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 VSS
code setting I would say maybe 80% if
not more is all through Caleb porio make
vs code awesome tutorial his course
Caleb porio is the creator of larvo
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 R cross 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 cat pin I believe
I'm saying that so cat pin frappe theme
or frappe or I I believe it stands for
Frappuccino so kuchin frappe we'll call
it that or Frapp kuchin Frapp 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
in within warp I'm I have like dim
inactive pain setup I have the Dank 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
APC customized ui+ plus plug-in so I
would advise you taking a look at this
because it's absolutely incredible I
think there was an older version that
Caleb porio had linked and set up with
his make vs code awesome tutorial but
this is like the newer up to-date
version uh 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 VSS code settings there's a bunch
of stuff here again Caleb porio 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 so APC
customize UI Plus+ the great way to
think about this is it allows you to
style VSS 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 chain
let's see I am changing the font for
everything to be dink monel so you see
in the 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 plug-in 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 different Vlogs 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 stylesheet 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 curser is one I believe
korio mentioned in his course so that is
primarily the gist of everything
style-wise so we are using like I said
the catp and frap theme for icons we are
using the kuchin frap icons so pretty
standard across the board I love this
style before I was using for for color
theme I was using the Natty theme and
that's one that Caleb porio uses and it
looks really similar to Live Wire mostly
but I have found that the theme from cat
pin 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 it just use Caleb P's course and use
APAC 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 has just naturally progressed on
to a lot of people like my myself is uh
command K and then you have B to like
swap to the browser then you have
command KX to swap to
extensions and I 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 KB command ke to go
to editor for terminal it's just command
T those are are usually like 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 uh 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 that's is the
the plug-in folder the plug-in
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 larel Live Wire Tailwind as well
as Alpine so headwind is one that I love
within this basically uses class sorting
as well as any intellisense within larel
blade because larel doesn't necessarily
have a prettier option there is prettier
blade plugins um that kind of are are
used to add in for each package but
within the vs code settings I found that
the Lille uh blade formatter is the best
option for that okay so now one thing
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 hidden 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 actually writing code because I
don't have to look at all whole bunch of
different class Styles I can't remember
if this is actually a VSS code setting
but you see here on the top where it has
the the latest or the specific what's it
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 co-pilot 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 hipop and I think
a lot more accurate in a lot of things
as well because it takes into account
the entirety of your code repo so if I'm
in a larel 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 of obviously I have a bunch of
different themes installed that I've
messed around with in in the interim
another thing that I love using is the
LEL pint plugin so that way if I was to
pull this up and say pint so because I'm
not in a say pint yeah for my document
using larel pint and I actually have
that set up to be on save so when I'm uh
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 Poo's
course again that's that's not sponsored
by any way shape or form uh 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 tall stack plug-in folder again that
might change in the future the cat ping
theme for both the theme and icons dink
mono for the font and then Caleb porio
course for everything else in between
which includes APC customize UI plus but
yeah hopefully that gives you some
insight on to how I've set all this up
but really it's just optimized for
Simplicity optimize for functionality
and just make things beautiful so keep
creating
Voir Plus de Vidéos Connexes
My Top 5 VSCode Extensions for React and NextJS!
How to set up Visual Studio Code for Executing and Debugging C Programs | Tutorial
12 VS Code Extensions to INCREASE Productivity 2024
Why I Pick ShadCN and Tailwind for all my projects
How to Setup Visual Studio Code for Web Development | HTML, CSS, and JavaScript
VSCode + ClaudeDev + Continue : STOP PAYING for CURSOR with this OPENSOURCE & LOCAL Alternative
5.0 / 5 (0 votes)