My Minimal and Beautiful VSCode Setup

Summary

In 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

00:00

💻 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.

05:01

🛠️ 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.

10:03

🎨 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.

Keywords

💡VS Code

VS Code, or Visual Studio Code, is a popular source code editor developed by Microsoft. It is known for its rich ecosystem of extensions and support for a wide range of programming languages. In the video, the speaker discusses their personal setup and customization of VS Code for development work, highlighting its practicality and functionality. The speaker also mentions using Caleb Porio's tutorial to enhance their VS Code experience.

💡Terminal

A terminal is a text-based interface for accessing a computer's operating system. In the context of the video, the speaker discusses their terminal setup, which is used for development work. They emphasize the importance of a clean and consistent look across both their terminal and VS Code, which contributes to their workflow efficiency.

💡Caleb Porio

Caleb Porio is a developer known for creating Laravel, Livewire, and Alpine JS. In the video, the speaker credits Caleb Porio's 'Make VS Code Awesome' tutorial for significantly influencing their VS Code setup. The tutorial is mentioned as a valuable resource for customizing VS Code to be both functional and aesthetically pleasing.

💡Theme

In the context of the video, a theme refers to the visual style applied to the user interface of software like VS Code and the terminal. The speaker mentions using the 'Catppuccin Frappe' theme to maintain a uniform look across both applications, which is part of their strategy for a clean and organized development environment.

💡Font

The font used in text editors and terminals can impact readability and user experience. The speaker in the video discusses using the 'Dank Mono' font in both VS Code and their terminal. This choice reflects the speaker's preference for a consistent and visually appealing development environment.

💡APC Customize UI+

APC Customize UI+ is a plugin for VS Code that allows users to customize the appearance of the editor using CSS. The speaker uses this plugin to style their VS Code interface, making it look cleaner and more personalized. This plugin is central to achieving the aesthetic the speaker desires for their development environment.

💡Extensions

Extensions in VS Code are add-ons that enhance the editor's functionality. The speaker mentions using the 'Tall Stack Plugin', which is a collection of extensions for Laravel, Livewire, and Tailwind, among others. These extensions are crucial for the speaker's development workflow, providing tools for better coding practices and efficiency.

💡IntelliSense

IntelliSense is a feature in VS Code that provides real-time code completions and suggestions. The speaker refers to IntelliSense in the context of using the 'Headwind' extension, which improves class sorting and code suggestions within Laravel Blade files. This feature is essential for speeding up the coding process and reducing errors.

💡Prettier

Prettier is a code formatter that enforces a consistent style by parsing and re-printing code. In the video, the speaker mentions using 'Prettier Blade', an extension for formatting Laravel Blade files, to maintain a clean and standardized codebase. This tool is part of the speaker's strategy for ensuring code quality.

💡Livewire

Livewire is a full-stack framework for Laravel that allows developers to build dynamic interfaces quickly. The speaker mentions using Livewire in their projects and highlights the importance of having the right extensions and settings in VS Code to work efficiently with Livewire.

💡Alpine JS

Alpine JS is a lightweight JavaScript framework that is designed to be easy to learn and integrate with existing projects. The speaker discusses using Alpine JS in their development work and the importance of having a setup that supports efficient coding with this framework.

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