Up next in 10
The ULTIMATE VS Code Setup Crash Course | Extensions ,Fonts, Themes & Settings For Beginners
Feb 19, 2025
Get the full source code of application here:
https://codingshiksha.com/tutorial/how-to-customize-vs-code-layout-appearance-with-extension-user-settings-full-crash-course/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video of
0:03
vs code crash course so in this video I
0:06
will show you the setup process of how
0:08
to set up your Visual Studio code with
0:10
the extensions font which fonts
0:13
extensions and settings that I use for
0:15
day-to-day development so I will start
0:18
from scratch so I basically uninstalled
0:21
all the extensions and the settings so I
0:23
will show you from scratch so just open
0:25
your vs code and now the very first
0:28
thing that I will show you
0:30
how to basically hide some of the
0:33
sections that we don't need such as the
0:35
status part that you see at the bottom
0:37
side we don't need this left hand side
0:40
it is some of these unwanted sections
0:43
that I don't use so I will show you how
0:45
to hide these sections this is actually
0:47
your menu how to customize the look and
0:50
appearance and layout of the vs code so
0:52
first of all what you need to do you
0:54
know you need to go to the view option
0:57
and just go to the appearance section
1:00
and first of all we will hide this uh
1:03
status bar that is shown in the bottom
1:04
side so as I toggle this you will see
1:07
the bottom section of the status bar has
1:09
been successfully removed and if you
1:13
also just hit the shortcut key control
1:16
shift p
1:18
this will open and here you just need to
1:20
say user settings Json so if you can
1:24
just open right here I basically toggle
1:26
the setting off which is our work p do
1:30
status bar visible and we I set it to
1:32
false you can even open this file as
1:35
well which is your user setting file and
1:38
let me change it to true so now once
1:40
again this status bar will once again
1:42
pop in so at any time if you want to
1:44
show the status bar you can come to the
1:46
file and toggle these options so by
1:50
default I don't want the status bar so I
1:52
will set it to false so it basically
1:54
create some space and it looks elegant
1:57
the next thing we need to do is that we
1:59
need to hide this menu bar as well that
2:02
you seeing right here this this one this
2:06
toggle mini map this also I don't use so
2:10
that's why I also want to go to view
2:12
appearance and then just uh toggle this
2:15
mini map so now this will also go away
2:19
so now you can see editor mini map
2:21
enabled and it set to false and once
2:24
again I will say this menu bar if you
2:27
don't want to see this menu bar you can
2:30
even toggle this as well but one setting
2:32
I don't use is sticky scroll so again
2:35
just untick this box so sticky scroll I
2:39
don't use so editor sticky scroll enable
2:42
to false now what we need to do is that
2:45
one other setting that I want I don't
2:47
want to show this primary sidebar if you
2:51
don't want to show it you will see that
2:54
sidebar by default will be removed so if
2:56
you don't want to see this this will
2:59
also get remove removed but I don't I do
3:01
want to see this primary sidebar so I
3:03
will not remove it and uh after
3:07
this what I need to do by this active
3:12
activity bar position it is set to
3:14
default but you just need to say hidden
3:17
so now what happens this side portion
3:21
this is hidden now so you can see that
3:23
it is created some more space here to
3:25
write code here so it looks elegant so I
3:28
don't want to go to that section so at
3:31
any moment of time if you want you can
3:33
change the setting to default so once
3:35
again it will pop in so I personally
3:38
don't use these settings a lot so I just
3:40
want to Hidden the settings so just
3:42
change to Hidden now this it creates
3:46
some space out there and one more
3:49
setting I do want to do is our uh
3:52
appearance and then I want to move the
3:55
primary sidebar to the right position by
3:58
default it is set to left but I just
4:00
want to see it in the right position so
4:03
here it actually workbench sidebar
4:06
location is set to right so you can
4:08
change it to anywhere just open your
4:10
user settings if you want to have left
4:12
or right I personally use it at the
4:15
right position so this is actually
4:17
looking more elegant now guys you can
4:19
see it creates some more space in
4:21
writing your code and now I will show
4:23
you some extensions that you want to use
4:26
here first of all I want to show you how
4:29
to create the these icons material icon
4:32
there is an ex extension that you can
4:34
use so let me go to
4:36
extensions and now I will show you one
4:39
by one the extensions that I use so
4:42
there's extension out there which is
4:44
material icon
4:48
theme so this is actually the extension
4:50
it is got 27.7 million downloads so it's
4:54
a very popular extension so it actually
4:57
have all the material icons theme so
4:59
simply click install and after that just
5:02
select your theme material icon theme so
5:06
after you see that if you open your
5:12
file now you will see that the icons are
5:14
showing it these are the material icons
5:16
which are showing if you see so it is
5:19
looking pretty good right here so you
5:21
can see these icons material icons are
5:23
showing so this extension you should
5:26
install must install so it is us by
5:30
almost every developer out there second
5:33
of all I will show you the second
5:36
extension which is our theme which theme
5:39
that you want to use personally I use
5:41
this theme which is the react
5:44
theme it is having 880,000 downloads but
5:48
personally I love this theme so simply
5:50
install it it is based upon the react
5:54
theme right here you can now select
5:56
multiple themes it also has the light
5:58
version but uh I want this
6:02
react this one either you can select
6:05
this one let me just show you so based
6:09
upon which theme suits you best
6:16
so so I just want this react theme so
6:21
this is the theme that I personally use
6:23
so you can see that so you can it is not
6:26
mandatory that you use the same but uh I
6:29
personally use this so you can just see
6:32
next of all uh then we will want to
6:35
modify the font as well so by default we
6:39
act I personally use this font which is
6:42
very popular font programming font which
6:45
is F code f i r a c o d e this is
6:50
actually the font here and it got almost
6:54
206,000 weekly downloads so this is
6:57
actually the extension here simply type
6:59
FAA code in the extensions and just
7:01
install this extension so simply click
7:03
the install button and as soon as you
7:06
install it now just press the keyboard
7:08
key control shift p and just type here
7:12
FAA code and just need to activate this
7:15
so for the very first time if you
7:17
activate this it will redirect you to
7:19
the five fonts six fonts which are there
7:22
of this uh font here and you need to
7:25
select everything and just right click
7:27
and simply install it it inside your
7:30
system so as soon as you installed it I
7:32
already installed it so one by one you
7:35
just need to install all these six
7:41
phones so once it is installed here now
7:45
just see restart your terminal
7:48
restart you don't need to restart you
7:50
will see automatically the font has been
7:52
applied so it is simply look like this
7:54
you will see that now the actual so
7:58
personally I use this font it looks
8:00
pretty good while coding so just
8:05
you so we can see the font in the so it
8:10
has various good if you see the legates
8:15
uh if I if you write triple equal to it
8:19
will turn to this so legates are pretty
8:22
good here you can see that equal to less
8:25
than equal to so it is a very good
8:28
programming for so I personally use this
8:31
so simply install this
8:34
extension and then you need to customize
8:36
some things right here which is your
8:38
this menu right here if you want to add
8:40
some blur section to it and also if you
8:44
want to customize this section the top
8:47
section that you see right here so as
8:50
you all know guys Visual Studio code is
8:52
a web application which is developed in
8:54
electrons so each of the element that
8:56
you are seeing right here is
8:57
customizable you can it is developed
8:59
using HTML CSS and JavaScript in
9:02
electron so it's a web application so
9:04
there is an extension that you can
9:06
install right here which lets you
9:08
customize it so go to the extensions and
9:10
just install a extension right here
9:13
which is custom CSS and JS loader so
9:19
this is actually the extension it's uh
9:21
used by 879 th000
9:25
weekly installs so simply click install
9:30
and this lets you customize the look and
9:32
appearance of Visual Studio code text
9:34
editor so as soon as you do this now in
9:38
my blog post I have given the files here
9:42
or of my ultimate setup so if you go to
9:45
my blog post I given all the files here
9:47
first of all I given the settings. user
9:49
settings. Json file so you if you have
9:52
some doubt you can directly copy all
9:54
this code and apply to your Vis Visual
9:56
Studio code and one thing we need to do
9:59
here is simply copy this and let me
10:03
paste it just open your user setting
10:06
file
10:08
here and right here just paste it so
10:12
this is actually this C extension right
10:15
here custom CSS and JavaScript so here
10:17
you need to specify the CSS file and the
10:20
Javascript file that you will write for
10:23
customizing the appearance of visual
10:25
studio
10:27
so if you also store it at the same
10:30
location where I am storing these files
10:32
so you just need to change this username
10:34
my my username is Asus so if you paste
10:38
it you just need to replace your own
10:40
username here and by default I'm just uh
10:44
storing these files if you just wherever
10:47
your Visual Studio is installed so right
10:50
click open file location and by default
10:53
it's uh present inside
10:55
your
10:57
username then the app data local
11:00
programs Microsoft vs code so here I
11:03
created this folder here which is
11:06
customize and here we Define these two
11:08
files which is our style. CSS and the
11:11
script.js so what I will do is that I
11:14
will open it inside vs code so here you
11:18
can write the code for customizing uh
11:21
actually
11:26
the so here you can actually write the
11:30
code which will be responsible for
11:33
customizing visual studio so what you
11:35
would you will do right here so I have
11:38
given this style. CSS code as well
11:40
simply copy to clipboard and simply
11:43
paste it so these are all the
11:46
customizations that you can perform
11:48
right here I will show you Let me
11:50
refresh it after applying and then we
11:53
also have the JavaScript code as
11:57
well and then go to your
11:59
script.js these file names can be
12:01
anything I just put this style. CSS and
12:05
script.js so same file names you need to
12:07
mention in the path here so I just
12:09
provided the full path
12:11
here and now after applying the changes
12:14
after you return these files now you
12:17
just need to apply these changes so just
12:19
press the shortcut key control shift V
12:22
and right here you just need to say
12:24
enable custom CSS and JS and just this
12:29
notification will pop in just restart
12:31
Visual Studio code so now what happens
12:34
if you see my title bar has been changed
12:36
right here and if you now press control
12:40
shift p this will look like this if you
12:43
see the menu bar so it is having this
12:46
blur section in the background you can't
12:48
see the background code right here this
12:50
is looking quite great if you press
12:52
control shift V now it looks like this
12:55
control shift V and here you can select
13:00
anything so in this way you can
13:02
customize the look and appearance of
13:04
Visual Studio code like this and
13:10
uh so the end setup looks like this guys
13:14
you will see after applying all these
13:16
code right here which I given in the
13:18
description of my blog post simply go to
13:20
the blog post and copy paste
13:22
the style. CSS and script.js so after
13:27
applying it will will look something
13:29
like this you can see
13:33
that and uh Whenever there are no files
13:37
available let's suppose if I close all
13:40
the files you will
13:43
see there was vs code icon was present
13:46
but we customized this in our uh this
13:50
style. CSS if you closely
13:53
look we basically replaced it with a
13:56
custom background SVG image and
13:59
basically we provided this background
14:00
image so this is our B 64 code so this
14:04
is actual SVG file that we replaced so
14:07
here you can customize your own image as
14:09
well so simply replace your own image
14:11
code go to this style. CSS and replace
14:14
this whichever image that you want to do
14:17
so here you can even customize put a
14:20
logo of yourself put a picture of
14:22
yourself in vs code if no files are
14:25
present like this so I personally like
14:28
this setup it looks clean and simple so
14:33
you also see the scroll bar we also
14:36
decrease the by default the scroll bar
14:38
looks Bri uh thick but we reduced it you
14:42
will see it is now looking thin and it
14:44
is looking elegant as well
14:48
so so this is and also the tool tip so
14:52
if you basically hover onto any code
14:54
right
14:55
here so we we get this nice little box
14:59
Shadow effect here so you can see how
15:02
beautiful it is looking right here it is
15:04
matching the theme as well because we
15:06
are using the react theme for this setup
15:09
to look beautiful you need to have that
15:10
react theme that I showed you early on
15:12
so just install the same theme and then
15:15
you can modify it so install the react
15:18
theme and then see the setup so it looks
15:21
something like this so thank you very
15:23
much guys for watching this crash course
15:25
video on vs code which extensions icons
15:29
that I personally use fonts as well and
15:32
go to their blog post to get all the
15:34
source code and also check out my
15:38
website as well free mediat tools.com uh
15:41
which contains thousands of tools
15:43
regarding audio video and image and I
15:46
will be seeing you in the next video
#Programming
#Software
#Education